JavaScript 知识量：26 - 101 - 483
在HTML中，<canvas>元素用于在网页上绘制图形。通过JavaScript，可以控制这个元素，设置其大小，绘制图形等。以下是如何使用JavaScript创建<canvas>元素并实现一些基本的画布功能：
首先，需要在HTML文件中创建一个<canvas>元素，但没有id或class属性，这样就可以通过JavaScript来引用它。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="500" height="500"></canvas> </body> </html>
然后，在JavaScript中，可以使用document.getElementById()方法来获取这个元素。
let canvas = document.getElementById('myCanvas');可以使用getContext()方法来获取一个绘图上下文。这个上下文是一个对象，它包含了用于绘图的函数和属性。例如，通过2d上下文就能够绘制基本的2D图形。
let context = canvas.getContext('2d');现在，就可以使用这个上下文来绘制图形了。以下是一些基本的函数：
fillRect(x, y, width, height)：填充一个矩形。
strokeRect(x, y, width, height)：绘制一个矩形边框。
fillText(text, x, y)：填充文本。
strokeText(text, x, y)：绘制文本。
arc(x, y, radius, startAngle, endAngle)：绘制一个圆弧。
drawImage(image, x, y)：绘制图像。
例如，以下代码将在画布上绘制一个红色的矩形：
context.fillStyle = 'red'; context.fillRect(50, 50, 100, 100);
通过以上步骤，就实现了基本的画布功能。
2D上下文有两个基本绘制操作：填充和描边。填充以指定样式（颜色、渐变或图像）自动填充形状，而描边只为图形边界着色。
以下是一个基本的例子，说明如何创建一个矩形并填充或描边它。
首先，需要一个HTML的canvas元素：
<canvas id="myCanvas" width="500" height="500"></canvas>
然后，可以使用以下代码来创建一个矩形并进行填充和描边：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 填充矩形
ctx.fillStyle = 'blue'; // 设置填充颜色为蓝色
ctx.fillRect(20, 20, 150, 100); // 填充一个矩形：x坐标=20, y坐标=20, 宽度=150, 高度=100
// 描边矩形
ctx.lineWidth = 5; // 设置线条宽度为5
ctx.strokeStyle = 'red'; // 设置描边颜色为红色
ctx.strokeRect(20, 20, 150, 100); // 描边一个矩形：x坐标=20, y坐标=20, 宽度=150, 高度=100这将创建一个蓝色的填充矩形，并有一个红色的描边。fillRect函数用于填充矩形，strokeRect函数用于描边矩形。这两个函数的前四个参数分别是矩形的x坐标，y坐标，宽度和高度。fillStyle和strokeStyle分别用于设置填充颜色和描边颜色。
矩形是唯一一个可以直接在2D绘图上下文中绘制的形状。与矩形有关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都接受4个参数：矩形的左上角的x坐标、矩形的左上角的y坐标、矩形的宽度和矩形的高度。
fillRect()方法用于在画布上绘制矩形并填充指定的颜色。填充样式通过fillStyle属性设置。
strokeRect()方法与fillRect()方法类似，也是在画布上绘制矩形，但这个方法会使用指定的颜色描边。描边样式通过strokeStyle属性定义。
clearRect()方法则用于清除画布上的矩形区域，将指定区域变透明。
以下是一个使用Canvas API绘制矩形的示例：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 设置填充样式
ctx.fillStyle = 'blue';
// 绘制矩形
ctx.fillRect(20, 20, 150, 100);这段代码将绘制一个左上角位于（20,20），宽度为150，高度为100的蓝色填充矩形。
可以使用Canvas API来绘制路径。路径可以由线段、曲线和其他基本图形组成，可以填充或描边。
以下是一个简单的示例，展示如何使用Canvas API在画布上绘制一个路径：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建路径
var path = new Path2D();
// 使用moveTo方法设置起始点
path.moveTo(50, 50);
// 使用lineTo方法添加线段
path.lineTo(100, 100);
// 使用bezierCurveTo方法添加贝塞尔曲线
path.bezierCurveTo(100, 150, 200, 250, 300, 300);
// 使用arcTo方法添加弧线
path.arcTo(300, 200, 400, 350, 50);
// 使用closePath方法结束路径
path.closePath();
// 设置线条颜色和宽度
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
// 描边路径
ctx.stroke(path);这个示例创建了一个包含线段、贝塞尔曲线和弧线的路径。然后，它设置线条颜色为红色，宽度为5像素，并使用stroke方法描边路径。描边的结果将显示在画布上。
可以使用Canvas API来绘制文本。以下是一个简单的示例，展示如何使用Canvas API在画布上绘制文本：
// 获取canvas元素
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 设置字体样式
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
// 绘制文本
ctx.fillText('Hello, World!', 10, 50);这段代码将绘制一段文本“Hello, World!”在画布上，字体样式为20像素 Arial，颜色为黑色。文本将从坐标（10,50）开始绘制。可以通过调整font和fillStyle属性来改变字体样式和颜色，通过调整fillText方法的参数来改变文本内容和位置。
2D绘图上下文提供了一组变换方法，可以操作绘制在画布上的图像，实现图像的位置、旋转、缩放和移动等变换。这些变换方法支持所有常见的绘制变换，包括平移、缩放、旋转和倾斜等。
在2D绘图上下文中，可以使用以下方法来实现图像的变换：
1. 平移（Translate）：通过指定平移距离，将图像在水平方向和垂直方向上移动。
context.translate(x, y);
2. 缩放（Scale）：通过指定缩放因子，对图像进行水平和垂直方向的缩放。
context.scale(scaleX, scaleY);
3. 旋转（Rotate）：通过指定旋转角度，将图像绕原点旋转一定角度。
context.rotate(angle);
4. 倾斜（Shear）：通过指定倾斜因子，对图像进行水平和垂直方向的倾斜。
context.shear(shearX, shearY);
这些变换方法可以在绘制过程中使用，以实现图像的变换效果。例如，可以使用translate方法将图像平移到指定位置，然后使用rotate方法将图像绕原点旋转一定角度，最后使用scale方法对图像进行缩放。
注意：这些变换方法将按照它们在代码中出现的顺序应用，并且变换效果将累积在一起。例如，如果先使用translate方法移动图像，然后再使用rotate方法旋转图像，那么旋转将以移动后的位置为基础进行。
drawImage() 是 Canvas API 中的一个方法，它允许将在画布上绘制现有的图像。这个方法需要三个参数：源图像，以及图像的源 x 和 y 坐标，以及目标画布上的 x 和 y 坐标。
这是一个 drawImage() 方法的基本示例：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image(); // 创建新的图像对象
img.onload = function() {
ctx.drawImage(img, 0, 0); // 在画布上从(0,0)位置开始绘制图像
};
img.src = 'myImage.png'; // 设置图像源路径在这个示例中，首先获取到画布和它的上下文，然后创建一个新的图像对象。设置了一个图像加载完成后会执行的函数，在这个函数中，使用 drawImage() 方法将图像绘制到画布上。最后，将图像的源路径设置为想要绘制的图像的路径。当这个图像加载完成后，它就会被绘制到画布上。
drawImage() 方法还可以接受更多的参数，允许进行更复杂的图像操作，例如裁剪、缩放和旋转等。
2D上下文可以使用以下属性来自动为已有形状或路径生成阴影：
shadowColor：设置阴影颜色。可以指定阴影颜色，例如黑色、灰色或彩色。
shadowBlur：设置阴影模糊级别。值越大，阴影边缘越模糊。
shadowOffsetX 和 shadowOffsetY：设置阴影偏移量。这些属性指定了阴影相对于形状或路径的位置偏移。正值将使阴影向右和向下偏移，负值将使阴影向左和向上偏移。
这些属性可以在绘制形状或路径之前设置，以自动生成相应的阴影效果。例如，可以使用以下代码在画布上绘制一个带有阴影的矩形：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(20, 20, 100, 100);
ctx.stroke();
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.stroke();在上面的代码中，首先使用beginPath()方法开始绘制矩形路径，然后使用rect()方法定义矩形的位置和大小。接下来，使用stroke()方法绘制矩形边框。然后，使用阴影相关的属性来设置阴影效果，并再次调用stroke()方法来应用阴影。
Canvas Gradient 是用于在 Canvas 上创建渐变的一种强大功能。渐变可以用于填充形状，或者在图像上绘制线性或径向颜色渐变。
以下是如何在 2D 上下文中创建一个新的线性渐变的示例：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 创建新的线性渐变
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
// 添加颜色停点
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'blue');
gradient.addColorStop(1, 'green');
// 使用渐变填充矩形
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100);在这个示例中：
createLinearGradient(x1, y1, x2, y2) 方法被用于创建一个新的线性渐变。参数 (x1, y1) 和 (x2, y2) 定义了渐变的方向线，也就是颜色开始和结束的地方。
addColorStop(offset, color) 方法被用于在渐变中添加颜色。offset 是一个介于 0 和 1 之间的值，表示颜色在渐变中的位置。例如，0 表示颜色开始的位置，0.5 表示颜色在渐变中间，1 表示颜色结束的位置。color 是要添加的颜色。
fillStyle 属性被设置为刚刚创建的渐变，然后 fillRect() 方法被用于填充一个矩形。这个矩形会使用创建的渐变进行填充。
createPattern() 是 Canvas API 中的一个方法，用于在画布上创建一个新的图案。这个方法需要两个参数：一个是用来定义图案的 Image 对象，另一个是定义如何重复（或平铺）该图像的字符串。
以下是如何使用这个方法的基本示例：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image(); // 创建新的图像对象
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat'); // 创建新的图案
ctx.fillStyle = pattern; // 将图案设置为填充样式
ctx.fillRect(0, 0, canvas.width, canvas.height); // 用图案填充整个画布
};
img.src = 'myImage.png'; // 设置图像源路径在这个示例中，首先获取到画布和它的上下文，然后创建一个新的图像对象。设置了一个图像加载完成后会执行的函数，在这个函数中，使用 createPattern() 方法将图像定义为新的图案，并通过 'repeat' 参数设置图像的重复方式。然后将这个图案设置为填充样式，并使用 fillRect() 方法将图案填充到画布的整个区域。当这个图像加载完成后，它就会被定义为新的图案，并被填充到整个画布。
2D上下文中的 getImageData() 方法是一种非常强大的能力，可以获取原始图像数据。通过这个方法，可以取得一个ImageData的实例，每个实例有3个属性：width、height和data。data属性是一个数组，保存着每个像素的数据。每个像素用4个元素来表示：红、绿、蓝和透明度。通过这个方法可以直接操作图像的元数据，实现各种复杂的效果，例如改变图像的颜色，或者将图像转换为黑白等。
以下是一个基本示例，说明如何使用 getImageData() 和 putImageData() 方法来改变图像的颜色：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image(); // 创建新的图像对象
img.onload = function() {
ctx.drawImage(img, 0, 0); // 在画布上绘制图像
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 获取图像数据
// 遍历每个像素，修改其颜色值
for (var i = 0; i < imageData.data.length; i += 4) {
var red = imageData.data[i];
var green = imageData.data[i + 1];
var blue = imageData.data[i + 2];
// 将每个像素的亮度降低50%
red = Math.floor(red / 2);
green = Math.floor(green / 2);
blue = Math.floor(blue / 2);
// 设置修改后的颜色值
imageData.data[i] = red;
imageData.data[i + 1] = green;
imageData.data[i + 2] = blue;
}
ctx.putImageData(imageData, 0, 0); // 将修改后的图像数据放回画布上
};
img.src = 'myImage.png'; // 设置图像源路径在这个示例中，首先加载一个图像，并在画布上绘制。然后使用 getImageData() 方法获取这个图像的数据，并遍历每个像素，将它们的颜色值降低50%。最后，使用 putImageData() 方法将修改后的图像数据放回画布上，实现了一种类似灰度处理的效果。但需要注意的是，修改图像数据需要考虑到像素的顺序和颜色值，因此这个过程可能比较复杂和耗时。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6