canvas用途

游戏小游戏
图表报表如 Charts插件
炫酷效果 banner
模拟器、图形编辑器等

兼容性

IE9以上和其他浏览器

canvas 标签

属性

width
height

方法

getContext() 参数 2d/webgl

注意

css设置的宽高跟width/height设置的宽高不同

Context环境

通过 getContext方法获取绘图环境（绘图上下文）（对象）
绘制图形通过该对象提供的方法/属性

基本绘图

路径

moveTo() 起始位置
lineTo() 直线，如果没有moveTo() 第一个lineTo()替代 moveTo()

路径的开始和关闭

beginPath() 开启路径
closePath() 关闭路径结束当前的路径，自动闭合
注意：复杂的图形，一定要开启和关闭路径

描边 stroke()

stroke() 方法
strokeStyle 设置描边颜色
lineWidth 设置描边的粗细

填充

fill() 填充
fillStyle 设置填充颜色

快速矩形工具

rect(x, y, width, height) 绘制矩形路径
strokeRect(x, y, width, height) 描边矩形
fillRect(x,y,width,height) 填充矩形
clearRect(x,y,w,h) 清除矩形（矩形范围内的内容会被擦除）

圆形(圆弧)

arc(x,y,r,start, end, wise) 绘制圆弧
start/end是起始位置单位是弧度， 360角度 = 2PI， 180角度 = PI
最后一个参数顺时针(false)/逆时针(true) 默认false

内容

文字方法

strokeText(text, x, y) 描边写字
fillText(text, x, y) 填充写字
measureText(text) 返回对象包换文本的宽度
font 属性设置大小、字体如 cxt.fon="100px MicrosoftYaHei";
textAlign 属性水平对齐方式 start(默认)/end/center/left/right
textBaseline 属性垂直对齐方式 alphabetic(默认)/top/bottom/middke/hanging/ideographic

绘制图片（插入图片）

插入图片

drawImage(img, x, y)

img image的dom元素
x,y 插入到画布的位置坐标

插入图片并改变大小

drawImage(img, x, y, width, height)

插入裁剪后的图片

drawImage(img, sx,sy,swidth,sheight, x, y, width, height)

sx/sy: 图片上开始裁剪的位置
swidth/sheight : 裁剪图片的大小

阴影

shadowColor 阴影颜色
shadowBlur 阴影的模糊值
shadowOffsetX 阴影的左偏移量
shadowOffsetY 阴影的右偏移量

渐变

线性渐变

var grd = cxt.createLinearGradien(x, y, x1, y1);
//参数：x,y起始坐标，x1,y1结束坐标
例如：
//创建线性渐变的对象，
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black"); //添加一个渐变颜色，第一个参数介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
grd.addColorStop(1,"white"); //添加一个渐变颜色
ctx.fillStyle =grd; //关键点，把渐变设置到填充的样式

径向渐变

createRadiaGradient(x1, y1, r1, x2, y2, r2)
addColorStop()

把背景图片作为填充

createPattern(imgDom, repeate)
第二个参数 repeate/ repeat-x / repeat-y / no-repeat

变换

缩放

sacle(x, y)

位移

translate(x, y)

旋转

rotate(angle)

环境的保存和恢复

save()
restore()

设置透明

globalAlpha = number 设置不透明度
全局设置是对整个画布（绘图环境）进行设置

限定绘图区域

clip()

输出base64编码

canvas.toDataURL(type, encoder)
type为mime类型 image/jpeg image/gif image/png image/webp

画布渲染画布

把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段

设置线条

lineCap 属性设置线条两端的形状 butt/round/square
lineJoin 属性设置线条夹角 miter/bevel/round
miterLimit 属性设置夹角斜角的最大长度一般默认 10

HTML5 canvas画布