canvas元素用于在网页上绘制图形
那么什么是canvas?
HTML5的canvas元素使用脚本通常是用JavaScript在网页上绘制图像。画布是一个矩形区域，我们可以控制其每一个像素，通过<canvas>元素来绘制，canvas拥有多种绘制路径，矩形，圆形，字符以及添加图像的方法。
注意默认情况下<canvas>元素没有边框和内容
创建一个画布(canvas)
向html页面中添加canvas元素
规定元素的id，宽度和高度

<canvas id="myCanvas" width="200" height="100"><canvas>

注意:标签通常需要指定一个id属性脚本中经常引用
提示:可以在html页面中使用多个canvas元素使用style属性来加添加边框
使用JavaScript来绘制图像
canvas元素元素本身没有绘图能力。所有的绘制工作必须在JavaScript内部完成。
实例

<script>var c =document.getELementById("myCanvas");var cxt=c.getContext("2d");
cxt.fillStyle="#ff0000";
cxt.fillRect(0,0,750,75);</script>

实例解析
首先找到<canvas>元素，然后创建context对象，getContext("2d")对象是内建的HTML5对象，上面ctx的两个方法绘制了一个红色的矩形，通过fillStyle属性可以是css颜色，渐变，或图案。fillStyle默认设置是#000000黑色
fillRect(x,y,width,height)方法定义了矩形当前的填充方式。

作者：DivMa
链接：https://www.jianshu.com/p/1a761edc9225