javaScript canvas从入门到骨灰级玩家（基础篇）

前言

本文针对有一点前端基础的同学，字数2684字，预计阅读5分钟。
如果你不认为自己的canvas水平能吊打大部分职业玩家，建议就不要放进收藏夹里吃灰了。

吃个包子的时间就能看完，这点信息量还能给你撑死？

基本用法

毋庸置疑，在HTML结构中肯定是要有一个DOM元素对象承接绘图上下文的。

<canvas id="drawing" width="300" height="300">draw a falleg picture</canvas>

通过js获取绘图上下文和绘图上下文的引用（这两者是不一样的，请看代码）。在调用的时候一定要先检测getContext()方法是否存在，有些浏览器会为HTML规范外的元素创建默认的HTML元素对象。

//获取绘画上下文
var falleg = document.getElementById("falleg");
if(falleg.getContext){//获取绘画上下文的引用，也可以说是创建一块2d画布var context = falleg.getContext("2d");
}

使用toDataURL()方法，可以导出在< canvas>元素上绘制的图像。这个方法接受一个参数，即图片的MIME类型格式，适合用于创建图像的任何上下文。但注意toDataURL()是canvas对象的方法，不是上下文对象的方法。如：

var falleg = document.getElementById("falleg");
//确定浏览器支持<canvas>元素
if(falleg.getContext){var imgURL = falleg.toDataURL("image/png");var image = document.createElement("img");image.src = imgURL;document.body.appendChild(image);
}

2D上下文

可以绘制简单的2D图形，比如矩形、弧形和路径，坐标始于< canvas>左上角，原点坐标（0，0）。本篇比较简单，主要列举操作的方法，不细节展开。大致扫一遍就行，加深印象。

填充和描边

方法：
fillStyle() ：填充
strokeStyle() ：描边
+++++++++++++++
这两属性的值可以是字符串、渐变对象或模式对象。设置之后所有涉及描边和填充的操作都将使用这两个样式。默认"#000000"。

绘制矩形

方法：
fillRect() ：填充满的矩形
strokeRect() ：描边矩形
clearRect() ：清除矩形区域
++++++++++++++++++++
矩形是唯一一种可以直接在2D上下文中绘制的形状。这三个方法都能接受4个参数：矩形的x,y坐标、宽度和高度。填充颜色可由前面填充描边的方法指定。描边线条的宽度由lineWidth属性控制，该属性的值可以是任意整数。通过lineCap属性可以控制线条末端的形状是平头、圆头还是方头。lineJoin属性控制线条相交方式是圆交、斜交还是斜接。

绘制路径

方法：
arc(x, y, radius, startAngle, endAngle, counterclockwise) ：以（x,y）为圆心绘制弧线
arcTo(x1, y1, x2, y2, radius) ：从上一点开始绘制弧线
bezierCurveTo(x1, y1, x2, y2, x, y) ：从上一点开始绘制曲线
lineTo(x, y) ：从上一点开始绘制直线
moveTo(x, y) ：将绘图游标移到(x, y)，不画线
quadraticCurveTo(cx, cy, x, y) ：从上一点画二次曲线
rect(x, y, width, height)，不同于strokeRect() ：绘制矩形路径
beginPath() ：开始路径
closePath() ：闭合路径
fill() ：结束后填充，fillStyle()是结束前填充
stroke() ：结束后描边，strokeStyle()是结束前描边
clip() ：剪切区域

绘制文本

方法：
fillText() ：充满
strokeText() ：描边
measureText() ：确定文本大小

变换

方法：
rotate(angle) :围绕原点旋转图像angle
scale(scaleX, scaleY) :缩放图像
translate(x, y) :移动坐标原点到某个位置
transform(m1_1, m1_2, m2_1, m2_2, dx, dy) :修改变换矩阵，缩放、旋转、移动并倾斜当前的环境
setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) ：重置变换矩阵

绘制图像

方法：
drawImage(image, x1, y1)、drawImage(image, x1, y1, w, h)、drawImage(image, x1, y1, x2, y2, x3, y3, w, h) ：绘制图像，图像不能来自其他域

阴影

方法：
shadowColor() ：阴影颜色
shadowOffsetX() ：x轴偏移
shadowOffsetY() ：y轴偏移
shadowBlur() ：模糊像素数

渐变

方法：

CanvasGradient实例表示

createLinearGradient(bx, by, ex, ey) ：创建线性渐变
addColorStop() ：指定色标
createRadialGradient(bx, by, r1, ex, ey, r2) ：创建径向（放射）渐变

模式

方法：
createPattern(img, mode) ：也就是重复图像的方式，可接受video元素

使用图像数据

方法：
getImageData(x, y, w, h) ：取得图像原始数据,返回对象为imageData的实例。
putImageData(imageData, x, y) ：把图像数据绘制到画布上

合成

方法：
globalAlpha ：属性值，表示全局透明度
globalCompositionOperation ：属性值，后面绘制的图形与先绘制图形的结合方式（source-over、source-in、source-out、source-atop、destination-over、destination-in、destination-out、destination-atop、lighter、copy、xor）