Skip to content

Instantly share code, notes, and snippets.

@dai-shi

dai-shi/kineticjs-test20130417.html

Created April 17, 2013 14:01
Show Gist options
  • Save dai-shi/5404537 to your computer and use it in GitHub Desktop.
Save dai-shi/5404537 to your computer and use it in GitHub Desktop.
Download ZIP
KineticJSでHelloWorld
Raw
kineticjs-test20130417.html
<!doctype html>
<html>
<head>
<title>canvas test</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>
<script src="kineticjs-test20130417.js" defer="defer"></script>
</head>
<body id="container"></body>
</html>
Raw
kineticjs-test20130417.js
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: 'black'
});
var text = new Kinetic.Text({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
text: 'Hello World!',
fontSize: 30,
fontFamily: 'Arial',
fill: 'lightgray'
});
text.setOffset({
x: text.getWidth() / 2,
y: text.getHeight() / 2
});
layer.add(rect);
layer.add(text);
stage.add(layer);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment