在HTML中须用一组<canvas>与</canvas>标签定义画布的范围,与其它标签一样,<canvas>元素可以设置id,width,height,bgcolor等属性,在没有特别设置的情况下,画布宽的默认值为300pixels,高的默认值为150pixels,背景透明。
由于<canvas>标签是非常新的元素,所以目前还有可能会遇到部分浏览器不支持的情况(例如IE9之前的版本)。因此可以安插一个“错误替代内容”在<canvas>与</canvas>之间,当画布元素没有办法正常显示时,就会显示错误替代信息.
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<script>
</script>
</head>
<body>
<canvas id="tutorial">浏览器不支持画布功能</canvas>
</body>
</html>
在HTML中我们使用<canvas>标签产生一个固定大小的画布,但是要在这个画布区里面绘制和操作图形,需要先定义渲染环境(rendering context)以及获取绘图函数(function),才能在画布区绘制并显示影像。所谓的渲染环境指的是要先告诉画布当前使用2D或3D的绘图环境,可以通过javascript方法getContext()来指定渲染环境。
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<script>
var canvas=document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</script>
</head>
<body>
<canvas id="tutorial">浏览器不支持画布功能</canvas>
</bod