深入浅出，庖丁解牛——Canvas 图形与多媒体处理（终）

2023-12-07 20:55:44

文字绘制

文本绘制是canvas的另一项重要功能，我们可以在canvas上绘制出各种各样的文字内容。我们首先要提到的是fillText()和strokeText()方法，它们都可以在canvas上绘制文字，但fillText()是实心文字，而strokeText()是空心文字，通常用于描边效果。

fillText()和strokeText()方法都有两个参数，第一个参数是我们要绘制的文字内容，第二个参数是文字的坐标位置，我们可以通过measureText()方法来获取文字的宽度，从而计算出文字的绘制位置。

// 绘制实心文字
ctx.fillText('Hello World', 10, 50);

// 绘制空心文字
ctx.strokeText('Hello World', 10, 50);

我们还可以使用font属性来设置文字的字体，可以通过改变font-family、font-size、font-weight等属性来改变文字的样式。

// 设置字体
ctx.font = 'bold 20px Arial';

// 绘制实心文字
ctx.fillText('Hello World', 10, 50);

图像合成

canvas还支持图像合成，我们可以通过drawImage()方法在canvas上合成图像，我们可以将一张图像绘制到canvas上，也可以将canvas上的内容合成到另一张图像上。

drawImage()方法有两个必选参数，第一个参数是要合成的图像对象，第二个参数是图像的坐标位置，我们可以通过getImageData()方法获取canvas上指定区域的像素数据，从而实现图像的合成。

// 将图像绘制到canvas上
var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 10, 10);
};
image.src = 'image.png';

// 将canvas上的内容合成到另一张图像上
var image2 = new Image();
image2.onload = function() {
  var canvas2 = document.createElement('canvas');
  var ctx2 = canvas2.getContext('2d');
  ctx2.drawImage(canvas, 10, 10);
  ctx2.drawImage(image2, 0, 0);

  // 将canvas2上的内容保存为图像
  canvas2.toDataURL('image/png');
};
image2.src = 'image2.png';

动画制作

canvas还支持动画制作，我们可以通过requestAnimationFrame()方法来请求浏览器在下次重绘时调用指定的回调函数，从而实现动画的制作。

// 创建一个动画循环
function animate() {
  requestAnimationFrame(animate);

  // 在这里绘制动画的内容
}

// 启动动画循环
animate();

交互式画布

canvas还支持交互式画布，我们可以通过addEventListener()方法为canvas添加事件监听器，从而实现与用户的交互。

// 为canvas添加点击事件监听器
canvas.addEventListener('click', function(e) {
  // 获取鼠标点击的位置
  var x = e.clientX;
  var y = e.clientY;

  // 在canvas上绘制一个圆形
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, 2 * Math.PI);
  ctx.fill();
});

尺寸调整

canvas的尺寸可以通过width和height属性来调整，当我们调整canvas的尺寸时，canvas上的内容也会随之调整。

// 调整canvas的尺寸
canvas.width = 500;
canvas.height = 300;

形状与路径

canvas还支持形状和路径的绘制，我们可以通过beginPath()、moveTo()、lineTo()、quadraticCurveTo()、bezierCurveTo()等方法来绘制出各种各样的形状和路径。

// 绘制一个矩形
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.fill();

// 绘制一个圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2 * Math.PI);
ctx.fill();

// 绘制一条曲线
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.quadraticCurveTo(250, 250, 300, 200);
ctx.stroke();