canvas学习笔记

canvas基础知识

是MDN的教程的学习笔记。

1 定义

利用 <canvas> 元素，通过脚本来完成图像的绘制

2 用法

2.1 绘制

创建画布

<canvas id="myCanvas" width="200" height="100"></canvas>

2.2 使用 JavaScript 来绘制图像

找到 <canvas> 元素：

var c=document.getElementById("myCanvas");

2.3 创建 context 对象

var ctx=c.getContext("2d");

//建议检测一下兼容性
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}

2.4 进行绘制

3 坐标系

坐标起点（0，0）左上角，x轴从左向右 →，y轴从上向下 ↓

4 常用工具

通过 ctx 的方法实现，ctx.method(params)；

不同于 SVG，canvas 只提供两种原始工具，rectangles 和 paths

4.1 形状

描述	方法	参数
画一个填充方形	fillRect(x, y, width, height) = rect(x, y, width, height) + fill()	x 左上角x坐标 y 左上角y坐标 width 宽度 height 长度
画一个描边方形	strokeRect(x, y, width, height) = rect(x, y, width, height) + stroke()	同上↑
清空一个方形区域	clearRect(x, y, width, height)	同上↑

4.2 路径

描述	方法	参数
创建一个新路径	beginPath()	无
路径方法	Path methods	……
结束一个路径	[closePath() +] stroke() fill()	无

路径方法

方法	描述	example
moveTo(x, y)	……	ctx.moveTo(110, 75);
lineTo(x, y)	……	ctx.lineTo(105, 25);
arc(x, y, radius, startAngle, endAngle, anticlockwise)	anticlockwise 逆时针，默认false顺时针	ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
arcTo(x1, y1, x2, y2, radius)		ctx.moveTo(200, 20);ctx.arcTo(200,130, 50,20, 40);
quadraticCurveTo(cp1x, cp1y, x, y)	二次贝塞尔曲线	ctx.moveTo(75, 25);ctx.quadraticCurveTo(25, 25, 25, 62.5);
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	三次贝塞尔曲线	ctx.moveTo(75, 40);ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);

4.3 文字

方法

fillText(text, x, y [, maxWidth]) - 填充文字

strokeText(text, x, y [, maxWidth]) - 描边文字

属性

font = value

textAlign = value

textBaseline = value

direction = value

example:

ctx.font = '48px serif';
ctx.textBaseline = 'hanging';
ctx.strokeText('Hello world', 0, 100);

4.4 图像

方法

drawImage(image, x, y) - 图像

drawImage(image, x, y, width, height) - 缩放图像

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) - 切割图像

属性

var img = new Image();
img.onload = function() {}
img.src = '';

5 常用属性

5.1 填充和描边 fill & stroke

fill 填充

fillStyle = color

stroke 描边

strokeStyle = color

transparent 透明度

globalAlpha = transparencyValue

line

lineWidth = value

lineCap = butt | round | square

lineJoin = round | bevel | miter

miterLimit = value

getLineDash()

setLineDash(segments)

lineDashOffset = value

shadows

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

5.2 渐变 gradient

linear gradient 线性渐变.

方法

var gradient = createLinearGradient(x1, y1, x2, y2)

radial gradient 径向渐变

方法

var gradient = createRadialGradient(x1, y1, r1, x2, y2, r2)

属性

gradient.addColorStop(position, color)

用法

赋值给 fillStyle 或 strokeStyle 使用

5.3 重复 patterns

方法

var pattern = createPattern(image, type)

属性

type: repeat | repeat-x | repeat-y | no-repeat

用法

赋值给 fillStyle 使用

5.4 变换 transform

save 保存

save()

restore 恢复

restore()

translate 移动

translate(x, y)

tip: 此处的移动指的是坐标系原点移动

rotate 旋转

rotate(angle)

tip: 此处的旋转指的是坐标系x轴旋转

scale 缩放

scale(x, y)

transform 变换

transform(a, b, c, d, e, f)

resetTransform()

5.5 剪切和合成 clip & mask

clip 剪切

clip()

用法类似 closePath

composite 合成

globalCompositeOperation = type

具体见 type

5.6 动画 animation

通过函数控制动画

setInterval(function, delay)

setTimeout(function, delay)

requestAnimationFrame(callback)

5.7 像素操纵

具体见 pixel