参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
HTML5 Canvas简单入门操作，如同每个语言习惯输入hello world一样，来打印出Hello Canvas吧！
1-1.html
<!DOCTYPE html>
<html>
<head>
<title>A Simple Canvas Example</title>
<style>
body{
background: #dddddd;
}
#canvas{
margin: 10px;
padding: 10px;
background: #ffffff;
border: thin inset #aaaaaa;
}
</style>
</head>
<body>
<canvas id='canvas'width="600" height="600">
Canvas not supported
</canvas>
<script src='1-2.js'></script>
</body>
</html>
1-2.js
var canvas=document.getElementById('canvas'),
context=canvas.getContext('2d');
context.font='38pt Arial';
context.fillStyle='cornflowerblue';
context.strokeStyle='blue';
context.fillText('Hello Canvas',canvas.width/2-150,canvas.height/2+15);
context.strokeText('Hello Canvas',canvas.width/2-150,canvas.height/2+15);
运行结果：
网友评论