Canvas

Canvas 简单使用

1. canvas 绘制图片文字等

<!-- canvas 中不应该使用 style 进行宽高的配置, 应该使用 width 属性和 height 属性进行设置, style中的宽高配置不会影响 canvas 中实际宽高 -->
<canvas id="canvas" width="920" height="584"></canvas>

// 获取 canvas 对象
// Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
// Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
// 参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
var canvas = document.getElementById('canvas')
// CanvasRenderingContext2D 接口是 Canvas API 的一部分，可为<canvas>元素的绘图表面提供 2D 渲染上下文。它用于绘制形状，文本，图像和其他对象。
// 参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
var ctx = this.canvas.getContext('2d')

// 绘制图片
// Image 参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement
var image = new Image()
// image 的跨域配置, 如果图片未跨域, 不用进行配置
// anonymous: 任意域(不携带cookie)
// use-credentials: 携带cookie
// ''(空字符串): 同 anonymous
// 参考链接 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin
image.crossOrigin = 'anonymous'
// 图片的 src
image.src = cardImg
// 图片加载完成事件, 渲染图片需要在此事件回调函数内
image.onload = function() {
    // 在 Canvas 上绘制图像
    // image: image 对象
    // dx, dy: 起始点(x轴和y轴)
    // dWidth, dHeight: 图片渲染宽高
    // sWidth, sHeight: 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度和高度
    // void ctx.drawImage(image, dx, dy);
    // void ctx.drawImage(image, dx, dy, dWidth, dHeight);
    // void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    // 参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage
    ctx.drawImage(image, 0, 0, 920, 584)
}

// 绘制文字
var ctx = this.canvas.getContext('2d')
// 设置当前上下文的字体
ctx.font = 'bold 28px Arial'
// 设置当前上下文的颜色
ctx.fillStyle = '#000000'
// 填充文字
// text: 要填充的文字内容
// x,y: 文字坐标
// maxWidth: 可选; 绘制的最大宽度。如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放（如果通过水平缩放当前字体，可以进行有效的或者合理可读的处理）或者使用小号的字体。
// void ctx.fillText(text, x, y, [maxWidth]);
ctx.fillText('姓名: 张三', 360, 235)
ctx.fillText('年龄: 18', 360, 288)
// 可以修改字体配置
ctx.font = 'bold 22px Arial'
ctx.fillText('生日: 2000-01-01', 360, 341)