文本和图片

绘制文本

• fillText()
• strokeText()

Canvas 提供了两种方法来渲染文本 fillText(text, x, y, maxWidth)和strokeText(text, x, y, maxWidth)

显而易见，前者绘制填充图形，后者绘制文本边框，看代码

const canvas = document.getElementById("demo7_1");
canvas.width = 300;
canvas.height = 120;
const ctx = canvas.getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
ctx.strokeText("Hello world", 10, 100);

文字样式控制

属性	含义	默认值	可选值
font	文字样式	10px sans-serif	同 CSS
textAlign	文本对齐	start	start end left right center
textBaseline	基线对齐	alphabetic	top hanging middle alphabetic ideographic bottom
direction	文本方向	inherit	ltr rtl inherit

测量文本

measureText()，此方法用于测量文本，返回对应文本的属性

ctx.font = "48px serif";
const rect  = ctx.measureText('Hello World')
console.log(rect.width) // 264

绘制图片

drawImage()

• 绘制图片很简单，首先就是获取图片对象
• 然后就是使用drawImage()函数将图片绘制到画布上，当然前提是浏览器得支持这种图片的图片格式。

那么怎么获取图片呢？

• HTMLImageELement 来自 new Image() 或者任何<img>元素
• HTMLVideoELement 可以使用一个 Video 作为图片源，抓取其中一帧图像作为图片源
• HTMLCanvasElement 可以使用另一个 Canvas 的 CanvasRenderConterxt2D 作为图片源
• ImageBitmap 这是一个高性能的位图接口通常由全局的createImageBitmap()方法来创建，支持 Promise 规范，当然也能作为图片源

注意当图片的 url 跨域的时候需要设置img.crossOrigin

话不多说，看代码

const canvas = document.getElementById("demo6_1");
const ctx = canvas.getContext("2d");
const img = new Image(); // 创建img元素
img.src = "https://www.gausszhou.top/static/image/learn/webgl/leaves.jpg"
img.crossOrigin = undefined;
img.onload = function () {
  // 执行drawImage语句
  ctx.drawImage(img, 0, 0); // 绘制在0,0位置，保持图片大小
};

使用此方法还可以对图片进行缩放和切片

切片示意图

看代码

const canvasCtx1 = document.getElementById("demo7_3_1").getContext("2d");
const canvasCtx2 = document.getElementById("demo7_3_2").getContext("2d");
const canvasCtx3 = document.getElementById("demo7_3_3").getContext("2d");
const img = new Image();
img.src = "https://www.gausszhou.top/static/image/learn/web/box-model.png";
img.crossOrigin = undefined;
img.onload = function () {
  canvasCtx1.drawImage(img, 0, 0); // 绘制
  canvasCtx2.drawImage(img, 0, 0, 300, 300); // 缩放
  // img sx sy sw sh dx dy dw dw
  canvasCtx3.drawImage(img, 300, 300, 300, 300, 0, 0, 300, 300); // 切片
};

看效果

绘制视频帧

看代码

const canvas = document.getElementById("demo7_4");
const videoEl = document.getElementById("video");
const btnEl = document.getElementById("button");
const ctx = canvas.getContext("2d");
btnEl.onclick = () => {
  ctx.drawImage(videoEl, 0, 0);
};

看效果