目录
（2）、globalCompositionOperation 属性的应用
1、 报错：canvas.getContext is not a function.
前言
无论是使用 HTML/CSS 还是 SVG，它们都属于声明式绘图系统，也就是我们根据数据创建各种不同的图形元素（或者 CSS 规则），然后利用浏览器渲染引擎解析它们并渲染出来。
但是 Canvas2D 不同，它是浏览器提供的一种可以直接用代码在一块平面的“画布”上绘制图形的 API，使用它来绘图更像是传统的“编写代码”，简单来说就是调用绘图指令，然后引擎直接在页面上绘制图形。这是一种指令式的绘图系统。
Canvas 能够直接操作绘图上下文，不需要经过 HTML、CSS 解析、构建渲染树、布局等一系列操作。因此单纯绘图的话，Canvas 比 HTML/CSS 和 SVG 要快得多。
Canvas 和 SVG 的使用也不是非此即彼的，它们可以结合使用。因为 SVG 作为一种图形格式，也可以作为 image 元素绘制到 Canvas 中。举个例子，我们可以先使用 SVG 生成某些图形，然后用 Canvas 来渲染。这样，我们就既可以享受 SVG 的便利性，又可以享受 Canvas 的高性能了。
一、canvas 的基本知识
HTML5 中 新增了 <canvas> 元素。<canvas> 元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态的在这个区域内绘制图形。
1、创建画布
使用 canvas 绘图必须先设置其 width 和 height 属性，来指定一个可以绘图的区域大小。
<canvas id="draw" width="200" height="200"></canvas><canvas> 元素与其他 HTML 元素一样，可以通过 CSS 为其添加样式，也可以用 JavaScript 修改其属性的值。
2、创建画笔
要在画布上绘图，需要通过调用 getContext(）取得绘图上下文对象。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var context = drawing.getContext("2d");
}在使用Canvas前，用 canvas.getContext 来测试浏览器是否支持Canvas。
二、绘制 2D 图形
1、绘制和清除矩形
（1）、绘制矩形
- fillStyle 属性：设置填充的背景颜色。
- strokeStyle 属性：设置边框颜色。
- fillRect(x, y, width, height) 方法：从点（x, y）开始绘制一个矩形，宽度和高度分别是 width 和 height。可以填充它的背景颜色。
- strokeRect(x, y, width, height) 方法：从点（x, y）开始绘制一个矩形框，宽度和高度分别是 width 和 height。可以指定其边框的颜色，但不能填充背景色。
（2）、清除矩形
clearRect(x, y, width, height) 方法：从点（x, y）开始清除一个宽度和高度分别为 width 和 height 的矩形区域。清除后的区域是透明的。
（3）、实例
var drawing = document.getElementById("draw");
if(drawing.getContext){
var context = drawing.getContext("2d");
// 绘制一个填充矩形（红色）
context.fillStyle = "#f00";
context.fillRect(10, 10, 50, 50);
// 绘制一个填充透明矩形（蓝色半透明）
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(30, 30, 50, 50);
// 绘制一个矩形框（绿色边框）
context.fillStyle = "#f00";// 红色（设置了也不会填充）
context.strokeStyle = "#0f0";// 设置边框颜色（绿色）
context.strokeRect(60, 60, 50, 50);
// 清除一个指定的矩形区域（白色的小块）
context.clearRect(40, 40, 10, 10);// 清除后形成一个白色的区域
}
2、绘制路径
（1）、开启绘制模式
beginPath() 方法：表示要开始绘制新路径了。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var context = drawing.getContext("2d");
// 开始绘制路径
context.beginPath();
}（2）、绘制路径的属性和方法
- moveTo(x, y) 方法：将绘图游标移动到（x, y）处，不画线。
- lineTo(x, y) 方法：从上一点开始绘制一条直线，到（x, y）为止。
- rect(x, y width, height) 方法：从点（x, y）开始绘制一个矩形，宽度和高度分别是 width 和 height。
- arc(x, y, radius, startAngle, endAngle, counterclockwise) 方法：以（x, y）为圆心，绘制一条弧线。弧线半径为 radius。起始和结束的角度（用弧度表示）分别为 startAngle 和 endAngle。counterclockwise 用来指定绘制的方向，默认值是 false，表示按顺时针方向绘制路径。
- arcTo(x1, y1, x2, y2, radius) 方法：从上一点开始绘制一条路径，到（x2, y2）为止，并且以给定的半径 radius 穿过（x1, y1）。
- bezierCurveTo(c1x, c1y, c2x, c2y, x, y) 方法：从上一点开始绘制一条路径，到（x, y）为止，并且以（c1x, c1y）和（c2x, c2y）为控制点。
- quadraticCurveTo(cx, cy, x, y) 方法：从上一点开始绘制一条二次曲线，到（x, y）为止，并且以（cx, cy）作为控制点。
- closePath() 方法：将路径与起点相连，形成封闭图形。
- fillStyle 属性：用来设置填充封闭图形的背景颜色。
- strokeStyle 属性：用来设置路径的颜色。
- stroke() 方法：用来给路径描边。
（3）、实例
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
// 开始绘制路径
ctx.beginPath();
// 画外圆
ctx.arc(100, 100, 99, 0, 2*Math.PI, false);
// 画内圆
ctx.moveTo(194, 100);// 创建路径的起始点
ctx.arc(100, 100, 94, 0, 2*Math.PI, false);
// 画分针
ctx.moveTo(100, 100);
ctx.lineTo(100, 15);
// 时针
ctx.moveTo(100, 100);
ctx.lineTo(35, 100);
// 描边
ctx.stroke();
}
3、绘制文本
- font 属性：表示文本的样式、大小及字体。用 CSS 的规则来指定，比如：“10px Arial”。
- textAlign 属性：表示文本的对齐方式。可选值有："start"、"end"、"left"、"right" 和 "center"。建议使用 "start"、"end"，不建议使用 "left"、"right"。
- textBaseline 属性：表示文本基线。可选值有："top"、"haging"、"middle"、"alphabatic"、"ideographic" 和 "bottom"。
- strokeStyle 属性： 用来指定路径的颜色。
- fillText() 方法：填充文本。可以接收四个参数：文本字符串、x 坐标、y 坐标 和（可选的）最大像素宽度。
- strokeText() 方法：通过路径描边实现文本。可以接收四个参数：文本字符串、x 坐标、y 坐标 和（可选的）最大像素宽度。
ctx.font = "bold 14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("12", 100, 20);
4、变换
（1）、变换的语法
- rotate(angle) 方法：围绕原点旋转图像 angle 弧度。
- scale(scaleX，scaleY) 方法：缩放图像。在 x 方向乘以 scaleX，在 y 方向上乘以 scaleX。scaleX 和 scaleY 的默认值都是 1。
- translate(x, y) 方法：将坐标原点移动到（x, y）处。
- transform(m1_1, m1_2, m2_1, m2_2, dx, dy) 方法：直接将修改变换矩阵，方式是乘以如下矩阵：
- m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1
- m1_1 m1_2 dx
- setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) 方法：将变换矩阵重置为默认状态，然后重新调用 transform() 方法。
（2）、变换的步骤
- 第一步是“变换原点”；
- 指定“变换弧度”；
- 绘制要变换的元素。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
// 开始绘制路径
ctx.beginPath();
// 画外圆
ctx.arc(100, 100, 99, 0, 2*Math.PI, false);
// 画内圆
ctx.moveTo(194, 100);// 创建路径的起始点
ctx.arc(100, 100, 94, 0, 2*Math.PI, false);
// 绘制文本
ctx.font = "bold 14px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("12", 100, 20);
// 变换原点
ctx.translate(100, 100);
// 旋转表针
ctx.rotate(1);
// 画分针
ctx.moveTo(0, 0);
ctx.lineTo(0, -85);
// 时针
ctx.moveTo(0, 0);
ctx.lineTo(-65, 0);
// 描边
ctx.stroke();
}顺序不能差，否则出不来下面的效果：
（3）、变换后的状态管理
如何保存当前状态？并在对上下文修改后，如何恢复到之前的状态呢？
有 2 个方法可以跟踪上下文的变化：
- save() 方法：将当前状态保存在栈中。只保存对绘图的设置和变换，不保存绘图的内容。
- restore() 方法：从栈中调用前一个状态。用来恢复到前一个状态。只恢复绘图的设置和变换，不恢复绘图的内容。
if(drawing.getContext){
var ctx = drawing.getContext("2d");
ctx.fillStyle = "#f00";
ctx.save();
ctx.fillStyle = "#0f0";
ctx.translate(50, 50);
ctx.save();
ctx.fillStyle = "#00f";
ctx.fillRect(0, 0, 100, 50);// 从（50, 50）开始绘制蓝色矩形
ctx.restore();
ctx.fillRect(20, 20, 100, 50);// 从（70, 70）开始绘制绿色矩形
ctx.restore();
ctx.fillRect(0, 0, 100, 50);// 从 (0, 0) 开始绘制红色矩形
} 
5、绘制图像
drawImage() 方法，用来把一个图像绘制到画布上。根据传入参数个数的不同，表现出来的效果也不相同。
drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height) 方法的参数分析：要绘制的图像、原图像的 x 坐标、原图像的 y 坐标、原图像的宽度、原图像的高度、绘制 canvas 对象的 x 坐标、绘制 canvas 对象的 y 坐标、绘制 canvas 对象的宽度 和 绘制 canvas 对象的高度。
（1）、原图绘制
drawImage(image, x, y) 时：要绘制的图像、绘制 canvas 对象的 x 坐标、绘制 canvas 对象的 y 坐标。
<body>
<img src="./image/666.png">
<canvas id="draw" width="200" height="200">您的浏览器不支持 HTML5 canvas 标签。</canvas>
</body>
<script type="text/javascript">
var drawing = document.getElementById("draw");
var image = document.images[0];
var ctx = drawing.getContext("2d");
ctx.drawImage(image, 10, 10);
</script> 
（2）、按指定大小绘制
drawImage(image, x, y, width, height) 时：要绘制的图像、绘制 canvas 对象的 x 坐标、绘制 canvas 对象的 y 坐标、绘制 canvas 对象的宽度 和 绘制 canvas 对象的高度。
<body>
<img src="./image/666.png">
<canvas id="draw" width="200" height="200">您的浏览器不支持 HTML5 canvas 标签。</canvas>
</body>
<script type="text/javascript">
var drawing = document.getElementById("draw");
var image = document.images[0];
var ctx = drawing.getContext("2d");
ctx.drawImage(image, 10, 10, 90, 100);
</script>
（3）、绘制图像的某一部分
drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height) 时：要绘制的图像、原图像的 x 坐标、原图像的 y 坐标、原图像的宽度、原图像的高度、绘制 canvas 对象的 x 坐标、绘制 canvas 对象的 y 坐标、绘制 canvas 对象的宽度 和 绘制 canvas 对象的高度。
<body>
<img src="./image/666.png">
<canvas id="draw" width="200" height="200">您的浏览器不支持 HTML5 canvas 标签。</canvas>
</body>
<script type="text/javascript">
var drawing = document.getElementById("draw");
var image = document.images[0];
var ctx = drawing.getContext("2d");
ctx.drawImage(image, 30, 30, 90, 100, 0, 0, 40, 60);
</script>
6、阴影
- shadowColor：用 CSS 颜色格式表示的阴影颜色，默认为黑色。
- shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认值为 0。
- shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认值为 0。
- shadowBlur：模糊的像素数，默认值为 0，即不模糊。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 3;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
ctx.fillStyle = "#00f";
ctx.fillRect(20, 20, 100, 50);
} 
7、渐变
渐变分为 线性渐变 和 径向渐变（也叫放射渐变）。
canvas 中的渐变由 CanvasGradient 实例表示：
- createLinerGradient() 方法：创建“线性渐变”。接收 4 个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标 和 终点的 y 坐标。
- createRadialGradient() 方法：创建“径向渐变”。接收 6 个参数：起点的 x 坐标、起点的 y 坐标、起点的半径、终点的 x 坐标、终点的 y 坐标 和 终点的半径。
无论是线性渐变还是径向渐变，创建渐变后，都需要使用 addColorStop() 方法来指定色标。
- addColorStop() 方法接收 2 个参数：色标位置（一个0~1之间的数值） 和 CSS 颜色值。
（1）、线性渐变
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
var gradient = ctx.createLinearGradient(30, 30, 70, 70);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillRect(30, 30, 50, 50);
}
上述代码中，需要注意的是：矩形和渐变对象的开始渐变的坐标必须匹配才行，即都是（30, 30），否则就会发生偏差，导致部分渐变。
确保渐变与形状对齐非常重要，可以考虑使用函数来确保坐标合适：
function createRectLinearGradient(context, x, y, width, height){
return context.createLinearGradient(x, y, x+width, y+height);
}（2）、径向渐变
可以把径向渐变想象成一个长圆桶，而这 6 个参数定义的正是这个桶的两个圆形开口的位置。如果把一个圆形开口定义的比另一个小一些，那这个圆桶就变成了圆锥体，而通过移动每个圆形开口的位置，就可以达到像旋转这个圆锥体一样的效果。
如果想从某个形状的中心点开始，创建一个向外扩散的径向渐变效果，就要将两个圆心定义为同心圆。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
var gradient = ctx.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
ctx.fillStyle = gradient;
ctx.fillRect(30, 30, 50, 50);
}
8、模式
模式就是重复的图像。可以用指定的图像来填充图形或描边图形。
createPattern() 方法：用来创建一个新的模式。该方法接收 2 个参数：一个 <img> 元素 和 一个表示如何重复图像的字符串。第二个参数的可选值与 CSS 的 background-repeat 的值相同："repeat"、"repeat-x"、"repeat-y" 和 "no-repeat"。
创建好模式后，将填充样式（fillStyle）设置为模式对象，表示：从画布的原点开始，在某个特定区域内，显示重复的指定图像。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
var imge = document.images[0];
var pattern = ctx.createPattern(imge, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(10, 10,150, 150);
}
另外，createPattern() 方法的第一个参数，也可以是一个 <video> 元素，或者是另一个 <canvas> 元素。
9、使用图像数据
2D 上下文可以通过 getImageData() 方法获取原始图像的数据。该方法接收 4 个参数：要取得其数据的画面区域的 x 坐标、要取得其数据的画面区域的 y 坐标、要取得其数据的画面区域的像素宽度 和 要取得其数据的画面区域的像素高度。
getImageData() 方法，返回一个 ImageData 对象的实例。每个 ImageData 对象的实例都有 3 个属性：width、height 和 data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。在 data 数组中，每一个像素 4 个元素来保存，分别是 “红、绿、蓝 和 透明度值”。因此，第一个像素的数据就保存在数组对的第 0 个到第 3 个元素中。数组中每个元素的值都介于 0 到 255 之间（包括 0 和 255）。
例如：要取得左上角坐标为（10, 5）、大小为 50x50 像素的区域的图像数据。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(5, 5, 50, 50);
var imgData = ctx.getImageData(10, 5, 50, 50);
var width, height, red, green, blue, alpha;
width = imgData.width;
height = imgData.height;
red = imgData.data[0];
green = imgData.data[1];
blue = imgData.data[2];
alpha = imgData.data[3];
console.log([width, height, red, green, blue, alpha]);// [50, 50, 255, 0, 0, 255]
}获取到图像数据后，可以通过操作原始像素值实现灰阶过滤功能，还可以实现其他的功能，具体请戳此链接：Learn
10、合成
以下两个属性，会直接影响整个 2D 上下文中的所有绘制操作：
- globalAlpha 属性：是一个介于 0 到 1 之间的值（包括 0 和 1），用于指定所有绘制的透明度。默认值为 0。
- globalCompositionOperation 属性：表示后绘制的图形怎样与先绘制的图像相结合。这个属性的值是字符串，可选的值如下：
- source-over：默认值。在目标图像上显示源图像。
- source-atop：在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
- source-in：在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
- source-out：在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
- destination-over：在源图像上方显示目标图像。
- destination-atop：在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
- destination-in：在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
- destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
- lighter：显示源图像 + 目标图像。
- copy：显示源图像。忽略目标图像。
- xor：使用异或操作对源图像与目标图像进行组合。
（1）、globalAlpha 属性的应用
如果所有的后续操作都基于一个相同的透明度，就可以先把 globalAlpha 设置为适当的值，然后绘制，最后再把它设置回默认值 0。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var ctx = drawing.getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(10, 10, 50, 50);
// 修改全局透明度
ctx.globalAlpha = 0.5;
ctx.fillStyle = "#00f";
ctx.fillRect(30, 30, 50, 50);
// 重置全局透明度
ctx.globalAlpha = 0;
}
（2）、globalCompositionOperation 属性的应用
globalCompositionOperation 属性表示后绘制的图形怎样与先绘制的图像相结合。
globalCompositionOperation 属性的应用，请戳此链接：https://www.jianshu.com/p/ddb3fc0b66a1
三、绘制 3D 图形
绘制 3D 图形，使用的上下文是 WebGL，该上下文与 2D 上下文不同，它不是 W3C 制定的标准，而是由 Khronos Group 制定的。WebGL 是基于他们推出的 OpenGL 来制定的。
WebGL 原生的API是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门比较困难。
【推荐可视化实现库】
Three.js 的学习资源：Three.js中文网
e-charts 的学习资源：Apache ECharts
antdV 的学习资源：AntV | 蚂蚁数据可视化
D3.js 的学习资源：D3.js 官网 和 D3.js 中文教程
SVG 的学习资源：SVG 教程 MDN 和 SVG 教程菜鸟
四、导出在 HTML 的 canvas 元素上绘制的图像
通过 toDataURL() 方法导出在 <canvas> 元素上绘制的图像。
默认情况下，导出的图像是 png 格式的，当然也可以另行指定导出的格式。
var drawing = document.getElementById("draw");
if(drawing.getContext){
var context = drawing.getContext("2d");
// 绘制一个填充矩形
context.fillStyle = "#f00";
context.fillRect(10, 10, 50, 50);
// 绘制一个填充透明矩形
context.fillStyle = "rgba(0, 0, 255, 0.5)";
context.fillRect(30, 30, 50, 50);
// 绘制一个矩形框
context.strokeRect(60, 60, 50, 50);
// 清除一个指定的矩形区域
context.clearRect(40, 40, 10, 10);
// 导出 canvas 上绘制的图像
var imgURI = drawing.toDataURL(context);
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
}
五、canvas 报错汇总
1、 报错：canvas.getContext is not a function.
在使用 canvas 创建画笔时，必须是基于 <canvas></canvas> 标签的。
<!-- 错误 -->
<div id="myCanvas"></div>你可以像下面这样使用 canvas：
<html>
<!-- 正确 -->
<canvas id="myCanvas" ></canvas>
</html>
<body>
<script>
const canvas = document.getElementById("myCanvas");
console.log('canvas: ', canvas);
const context = canvas.getContext("2d");
console.log('context: ', context);
</script>
</body>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
