1.
<canvas id="tutorial" width="150" height="150"></canvas>
替换内容
<canvas id="stockGraph" width="150" style="max-width:90%"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" style="max-width:90%" alt=""/> </canvas>
标签不可省
2.渲染上下文（The rendering context）
WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl")
我们将会将注意力放在2D渲染上下文中
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');
3.检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}4.一个模板骨架
Canvas tutorial
<canvas id="tutorial" width="150" height="150"></canvas>
5.一个简单例子
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
