Canvas 笔记

# HTML5 画布(Canvas)元素

<canvas id="myCanvas" width="500" height="300"></canvas>
1

# 浏览器不支持画布(canvas)时的备案

<canvas id="myCanvas" width="500" height="300">
  your browser doesn't support canvas!
</canvas>
1
2
3

# 2d context

var context = canvas.getContext("2d");
1

# Webgl context (3d)

var context = canvas.getContext("webgl");
1

# 图形

# 绘制方形

context.rect(x, y, width, height);
context.fill();
context.stroke();
1
2
3

# 填充区域

context.fillRect(x, y, width, height);
1

# 绘制方形的边框

context.strokeRect(x, y, width, height);
1

# 绘制圆形

context.arc(x, y, radius, 0, Math.PI * 2);
context.fill();
context.stroke();
1
2
3

# 风格

# 填充

context.fillStyle = "red";
context.fill();
1
2

# 勾勒

context.strokeStyle = "red";
context.stroke();
1
2

# 线性渐变

var grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
context.fillStyle = grd;
context.fill();
1
2
3
4
5

# 径向渐变

var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");
context.fillStyle = grd;
context.fill();
1
2
3
4
5

# 图案

var imageObj = new Image();
imageObj.onload = function () {
  var pattern = context.createPattern(imageObj, "repeat");
  context.fillStyle = pattern;
  context.fill();
};
imageObj.src = "path/to/my/image.jpg";
1
2
3
4
5
6
7

# 交点

context.lineJoin = "miter|round|bevel";
1

# 线头

context.lineCap = "butt|round|square";
1

# 阴影

context.shadowColor = "black";
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
1
2
3
4

# Alpha (透明)

context.globalAlpha = 0.5; // between 0 and 1
1

# 颜色格式

# 字符串

context.fillStyle = "red";
1

# 16 进制

context.fillStyle = "#ff0000";
1

# 16 进制简写

context.fillStyle = "#f00";
1

# RGB

context.fillStyle = "rgb(255,0,0)";
1

# RGBA

context.fillStyle = "rgba(255,0,0,1)";
1

# 路径

# 开始路径

context.beginPath();
1

# 画线

context.lineTo(x, y);
1

# 弧形

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
1

# 二次曲线

context.quadraticCurveTo(cx, cy, x, y);
1

# 三次曲线

context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
1

# 关闭路径

context.closePath();
1

# 文本

# 写文字

context.font = "40px Arial";
context.fillStyle = "red";
context.fillText("Hello World!", x, y);
1
2
3

# 写镂空文字

context.font = "40pt Arial";
context.strokeStyle = "red";
context.strokeText("Hello World!", x, y);
1
2
3

# 粗体

context.font = "bold 40px Arial";
1

# 斜体

context.font = "italic 40px Arial";
1

# 对齐方式

context.textAlign = "start|end|left|center|right";
1

# 文字基线

context.textBaseline = "top|hanging|middle|alphabetic|ideographic|bottom";
1

# 获取文本宽度

var width = context.measureText("Hello world").width;
1

# 图片

# 画图

var imageObj = new Image();
imageObj.onload = function () {
  context.drawImage(imageObj, x, y);
};
imageObj.src = "path/to/my/image.jpg";
1
2
3
4
5

# 指定尺寸画图

var imageObj = new Image();
imageObj.onload = function () {
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = "path/to/my/image.jpg";
1
2
3
4
5

# 裁剪图片

var imageObj = new Image();
imageObj.onload = function () {
  context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
};
imageObj.src = "path/to/my/image.jpg";
1
2
3
4
5

# 状态存储

# 存储

context.save();
1

# 恢复

context.restore();
1

# 裁剪

// draw path here
context.clip();
1
2

# 动画

# 移动

context.translate(x, y);
1

# 扩大缩小

context.scale(x, y);
1

# 旋转

context.rotate(radians);
1

# 水平翻转

context.scale(-1, 1);
1

# 上下翻转

context.scale(1, -1);
1

# 自定义变换

context.transform(a, b, c, d, e, f);
1

# 设置变换

context.setTransform(a, b, c, d, e, f);
1

# 切割

context.transform(1, sy, sx, 1, 0, 0);
1

# 重置

context.setTransform(1, 0, 0, 1, 0, 0);
1

# Data URLs

# 获取 Data URL

var dataURL = canvas.toDataURL();
1

# 使用 Data URL 生成图像

var imageObj = new Image();
imageObj.onload = function () {
  context.drawImage(imageObj, 0, 0);
};

imageObj.src = dataURL;
1
2
3
4
5
6

# 图像数据

# 获取图像数据

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
1
2

# 遍历像素点

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var len = data.length;
var i, red, green, blue, alpha;

for (i = 0; i < len; i += 4) {
  red = data[i];
  green = data[i + 1];
  blue = data[i + 2];
  alpha = data[i + 3];
}
1
2
3
4
5
6
7
8
9
10
11

# 沿坐标遍历像素点

var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var x, y, red, green, blue, alpha;

for (y = 0; y < imageHeight; y++) {
  for (x = 0; x < imageWidth; x++) {
    red = data[(imageWidth * y + x) * 4];
    green = data[(imageWidth * y + x) * 4 + 1];
    blue = data[(imageWidth * y + x) * 4 + 2];
    alpha = data[(imageWidth * y + x) * 4 + 3];
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# 设置图像数据

context.putImageData(imageData, x, y);
1

# 合成

# 合成操作

context.globalCompositeOperation =
  "source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy";
1
2

# canvas 利用 clip 清除不规则区域

canvas 的 API 中,可以清除像素的就是 clearRect 方法,但是 clearRect 方法的清除区域矩形,如何清除不规则图形呢?

我们引入了剪辑区域这个强大的功能,也就是 clip 方法。用法很简单:

ctx.save();
ctx.beginPath();
ctx.arc(x2, y2, a, 0, 2 * Math.PI);
ctx.clip();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
1
2
3
4
5
6

上面那段代码就实现了圆形区域的擦除,也就是先实现一个圆形路径,然后把这个路径作为剪辑区域,再清除像素就行了。

有个注意点就是需要先保存绘图环境,清除完像素后要重置绘图环境,如果不重置的话以后的绘图都是会被限制在那个剪辑区域中。