canvas 常用属性 -- 1

在使用Canvas前，用canvas.getContext来测试浏览器是否支持Canvas：

'use strict';

var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    console.log('你的浏览器支持Canvas!');
} else {
    console.log('你的浏览器不支持Canvas!');
}

# 使用

html中：

<div width = 500 height = 500 id = "canvas"></canvas>

js中：

var canvas = document.getElementBy('canvas'),
    ctx = canvas.getContext('2d'); //绘制2d图形
    //webGL绘制上下文时 'webgl' 绘制3d图形

ctx.moveTo(50,50); //把起始点移动到坐标位置
ctx.lineTo(100,50); //从当前点绘制直线到x,y点
ctx.lineTo(150,100);

ctx.lineWidth = 40; //设置线段宽度
ctx.strokeStyle = 'red'; //设置描边的颜色
ctx.fillStyle = 'green'; //设置填充颜色 默认黑色

ctx.closePath(); //闭合当前路劲 

ctx.stroke(); //描边绘制

ctx.fill(); //填充

ctx.beginPath(); // 开始另一路径 新的绘制

// 绘制矩形  =====================
//都是开始一个新的路径，不需要使用beginPath()这个方法
ctx.rect(x,y,w,h) //坐标x,y 矩形宽高
ctx.stroke();   //ctx.fill();

//绘制矩形可以简化为：
ctx.fillRect();    //填充矩形
ctx.strokeRect();   //描边矩形

//擦除一个区域(矩形)
ctx.clearRect(50,50,40,40); //坐标x,y 矩形宽高

//绘制圆弧========================
ctx.arc(坐标x,坐标y,半径,开始弧度,结束弧度,弧形方向[1/true逆时针 0/false顺时针])

//绘制圆角========================
ctx.arcTo(x1,y1,x2,y2,r) 详情见图理解

//贝塞尔曲线=======================
//二次贝塞尔曲线 x1 y1 控制的 x2 y2 结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)

//三次贝塞尔曲线 x1 y1 x2 y2控制点 ex ey结束点
ctx.bezierCurveTo(x1,y1,x2,y2,ex,ey)

//坐标轴转换=======================
ctx.translate(x,y) //重新映射画布上的(0,0)的位置
ctx.scale() //缩放当前绘图
ctx.rotate(Math.PI) // 旋转当前的绘图

ctx.setTransform(a,b,c,d,e,f) //先将之前坐标标轴转化的设置清空，再重新设置
ctx.transform(a,b,c,d,e,f) //在之前标轴轴转化的设置的基础上,直接设置
//参数：水平缩放，水平倾斜，垂直倾斜，垂直缩放，水平移动，垂直移动

ctx.save() //保存当前图形状态的一份拷贝
ctx.restore() //从栈中弹出存储的图形状态并恢复

//填充图案==========================
ctx.createPattern(img|canvas,'no-repeat|repeat |repeat-X|repeat-Y');
//要注意将这个填充进去 ctx.fillStyle = 上面

//渐变=============================
ctx.createLinearGradient(x1,y1,ex,ey) //线性渐变(开始坐标,结束坐标)

ctx.createRadialGradient(x1,y1,r1,x2,y2,r2) //径向渐变(圆1心坐标x,y,圆1半径,圆2心坐标x,y,圆2半径) 

---

重点：

1.fill和stroke方法都是作用在当前的所有子路径中；

2.完成一条路径后要重新开始另一条路径时，必须使用beginPath()方法开始新的一条路径。

---