画布：在ie9以下不兼容，在ie9下就是一个块标签
canvas自带宽高 宽300 高150
不能通过css来设置canvas画布的大小，强行设置会导致画布变形
**通常都是在标签内设置width height的大小
<canvas id="canvas"></canvas>
<script>
canvas.width=500
canvas.height=300;
//1.先获取画布的工作环境
var ctx=canvas.getContext('2d');
//2.开始绘制
ctx.beginPath();
//3.调整画布的粗细
ctx.lineWidth=5;
//4.设置画布的颜色
ctx.strokeStyle='red'
//5.设置起始点
ctx.moveTo(50,50);
//6.设置途径点和终点
ctx.lineTo(50,150)
ctx.lineTo(150,150)
ctx.lineCap='round'//设置端点形状
//7.是否闭合
ctx.closePath();
//8.画结束
ctx.stroke();
</script>
画圆的方法 前两个值为圆的位置 第三个值为圆的大小 第四个值必须为0
ctx.arc(70,18,15,0,Math.PI*2,true);
颜色渐变
var a=ctx.createLinearGradient(0,5,125,45);
a.addColorStop(0,"red");
a.addColorStop(1,"green");
a.addColorStop(1,"blue");
绘制图片
//第二个和第三个参数是画布的位置 四五是图片的大小
ctx.drawImage(img, 1, 1, 224, 160)
