百木园1.canvas描述
canvas（画布）是H5提出的新标签，其目的是用于替代类似flash动画或游戏的插件，
能够极大地减少页面结构大小，提高页面响应速度。
说明：
⑴ canvas标签仅是一个图形容器，提供了一个可以绘制图像、图形的区域，可以实时渲染
图形、动画、虚拟图像等，对快速绘图进行了大量优化；
⑵ 使用<canvas>标签习惯性在标签内部设置元素大小，以及进行不支持说明；
示例：<canvas width:300px height:360px><p>浏览器不支持“canvas”！</p></canvas>
当然，也可以通过CSS设置尺寸属性，还可以通过“if语句”判断浏览器是否支持canvas。
⑶ canvas标签除了提供绘图区域外，没有其他行为功能，其内部的所有内容都要通过脚本
（JavaScript）进行绘制完成；
⑷ 使用canvas的基础模板：
<body>
<!--创建canvas画布，并设置区域大小-->
<canvas id=\"myCanvas\" width=\"200\" height=\"300\">
您的浏览器不支持Canvas！
</canvas>
<script>
// 获取canvas画布
var canvas=document.getElementById(\'myCanvas\');
// 在画布上创建画笔
var ctx=canvas.getcontext(\'2d\');
/* // 或通过if语句判断浏览器是否支持canvas
if (canvas.getcontext){
var ctx=canvas.getcontext(\'2d\');
}else {
canvas.innerText=\'浏览器不支持canvas！\';
}*/
// 在画布上绘制图形
ctx.fillRect(10,10,60,60);
</script>
</body>
来源：https://www.cnblogs.com/husa/p/14566044.html
图文来源于网络，如有侵权请联系删除。