width、height和style里面的width、height一样吗？
如果直接设置canvas的width和height，画布和元素的宽度都是你设置的值。如果设置的是style里面的width和height，它仅表示canvas元素占文档流的位置，这时候画布的宽度和高度是默认值600,300。
注意：
1、设置canvas的宽度的，直接操作canvas的width和height属性。
2、如果需要放大canvas画布，设置的style里面的width和height应该和canvas里面的width和height属性值的比例保持一致，即等比缩放。
3、canvas是块级元素
定义画布的大小是style的属性，而定义画布的像素是canvas特有的width，height属性
（2）坐标系
坐标的原点是在左上角，这一点和数学上不太一样。
（3）描边和填充
（4）常用方法
1、canvas.getContext("2d")：获取渲染的上下文，也就是获取画笔，括号中的参数固定为“2”
2、context.moveTo(100,200)：移动画笔的起点位置，括号中的两个参数为画笔的起点坐标。
3、context.lineTo(50,300)：画一条线，参数为线的终点坐标。
4、context.stroke()：绘制线条
5、和线条相关的属性
context.lineWidth= 10：画笔的粗细 context.strokeStyle= "red"：线条的的颜色 6：context.closePath();关闭路径，回到原点 7：context.fill();设置填充 8：context.fillStyle(‘’)：设置填充样式 9：beginPath（）：开始一条新的线条，或重置当前的路径 10：context.arc(250,250,100,0, 2*Math.PI,true)：（圆心x，圆心y，半径，起始，起始角度，目标角度，画的方向more为true(逆时针)（true/false）） 11：context.rect(x,y,w,h)：绘制矩形，（x,y）是矩形左上角的坐标位置， w：矩形的宽度 h：矩形的高度
var canvas = document.getElementById("canvas"); canvas.width= 500; canvas.height= 500; var context = canvas.getContext("2d"); context.moveTo(100,200);//移动原点，起始位置 context.lineTo(50,300);//目标位置 context.lineWidth = 10;//画笔的粗细 context.strokeStyle = "red";//画笔的样式 context.stroke();//开始画
画圆：
window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 500; var context = canvas.getContext("2d"); context.arc(250,250,100,0, 2*Math.PI,true); context.strokeStyle = "red";//画笔的样式 context.lineWidth=5; context.stroke();//开始画 }
