canvas元素是HTML5的一部分，因此允许动态生成图形。画布的一些预期用途包括构建图形、动画、游戏和图像合成。canvas元素及其关联代码中需要和期望的内容。这将有助于您对canvas有一个坚实的基本理解，为使用这个独特HTML5元素创建一些有趣和强大的东西做准备。
在HTML5中创建画布示例
画布canvas是用<canvas> </canvas>元素指定的。
<canvas id="myCanvas" width="200" height="100"></canvas>
JavaScript使用ID查找<canvas> </canvas>元素：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCnv" width="150" height="150" style="border:5px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCnv");
var ctx=c.getContext("2d");
ctx.fillStyle="#0ff000";
ctx.fillRect(0,0,120,100);
</script>
</body>
</html>
示例2
<!DOCTYPE html>
<html>
<body>
<canvas id="myCvs" width="200" height="100" style="border:2 px solid #c3c3c3;">
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCvs");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0F0000");
grd.addColorStop(1,"#00FF00");
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,100);
</script>
</body>
</html>
日期：2020-04-11 23:04:21 来源：oir作者：oir