一、基本用法
- 使用
<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,这两个属性的值可以是字符串、渐变对象或模式对象