1.canvas
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。
2.浏览器
支持所有的主流浏览器，IE需要9以上。
3.代码示例
<body> <canvas id="canvas1" style=" 100px;height: 100px;background-color: grey;border: 2px solid black "></canvas> </body>
通常要加id值，方便以后js调用。
4.canvas坐标
canvas是从左上角的（0，0）开始的。
5.下面来一个完整的范例
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 设置颜色
ctx.fillStyle="#FF0000";
// 设置位置
ctx.fillRect(0,0,150,75);
</script>6.在canvas中画路径
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// moveTo表示起始坐标
ctx.moveTo(0,0);
// lineTo表示结束的坐标
ctx.lineTo(200,100);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();
</script>
7.在canvas中画圆
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 调用arc函数
// 其中的参数分别是：x，y，半径，起始弧度值，结束弧度值。
ctx.arc(95,45,40,0,2*Math.PI);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();
</script>
8.绘制文本
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 设置字体大小和字体
ctx.font="100px,宋体";
// strokeText用来设置空心字体，fill用来设置实心字体
ctx.strokeText("空心",10,50);
// 内容后面是坐标
ctx.fillText("实心",70,50);
// stroke表示画线，设置了坐标，必须用stroke来完成连线
ctx.stroke();
9.绘制渐变
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 创建颜色梯度
// createLinearGradient的参数是（x,y,x1,y1）
var grd=ctx.createLinearGradient(0,0,200,0);
// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
// 设置形状
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);
</script>
下面绘制的是辐射性的渐变<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
// 找到canvas的id
var c=document.getElementById("myCanvas");
// 获取其中的内容，2d表示平面的意思
var ctx=c.getContext("2d");
// 创建颜色梯度
// createRadialGradient的参数是（x,y,x1,y1）
// 这是绘制一个辐射型的渐变
var grd=ctx.createRadialGradient(0,0,100,200,0,50);
// 下面的0，0.5和1表示颜色变化的转折点，当然你可以设置0-1之间的多个这样的点
grd.addColorStop(0,"blue");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
// 设置形状
ctx.fillStyle=grd;
ctx.fillRect(0,0,200,200);
</script>10.把图片加载在canvas里面
<img id="scream" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495286529156&di=6c6667975a7aa6fa08fff64df8067fb4&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F121209%2F234928-12120Z0543764.jpg" width="100px" height="100px">
<p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}
</script>