canvas

canvas默认的宽高是宽300px高150px

1.设置宽和高

<canvas id="drawing" width="200" height="200" style="border:1px solid blue; margin:50px auto;display:block;">it doesn't support</canvas>

通常不设置在style当中，而是像上述这样设置（w3c规定像这样指定）原因：

 

2.初始化

var canvas=document.getElementByID('canvas');

var context=canvas.getContext('2d');//调用canvas的一个getContext的方法，得到绘图的上下文的环境，传入参数2d 

 

3.canvas.width=200;canvas.height=-300;也可以设置宽度和高度

4.

   if(canvas.getContext('2d')){
       //使用canvas绘制
}
else{
    alert('当前浏览器不支持')
}

5.2d上下文

2d上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0,0），所有坐标值都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下

6.填充和描边

填充：指定的样式（颜色，渐变或图像）填充图形；fillStyle

描边：就是只在图形的边缘画线；strokeStyle