JS学习专栏——使用Canvas画图

一、基本用法

• 使用<canvas>，必须先设定其width和height值，指定可以绘图的区域大小

<canvas id="drawing" width="200" height="200">如果浏览器不支持canvas，将会显示这里</canvas>

• 取得绘图上下文对象的引用：调用getContext()方法并传入上下文的名字

var drawing = document.getElementById("drawing");
if(draw.getContext){
     //确定浏览器支持canvas元素
    var context = drawing.getContext("2d");
}

• 2D上下文的坐标开始于<canvas>元素的左上角，原单坐标是（0，0），所有的坐标都基于这个原点计算。默认情况下，width和height表示水平和垂直两个方向上可用的像素数目。

二、2D上下文

1.填充和描边

• fillStyle和strokeStyle，这两个属性的值可以是字符串、渐变对象或模式对象