基本概念

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于 2D 图形。而同样使用<canvas>元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

官方文档：Canvas - Web API 接口参考 | MDN (mozilla.org)

常用API

CanvasRenderingContext2D

CanvasRenderingContext2D顾名思义就是“Canvas 2D渲染上下文”，可以理解为下面代码中的context。

var canvas = document.querySelector('canvas'); 
var context = canvas.getContext('2d');

context暴露了大量的API属性和方法，可以用来绘制文本，图形以及像素处理等，可以说是2D Canvas应用的核心所在。

绘制矩形

CanvasRenderingContext2D.clearRect() 清除指定矩形区域内部所有的像素信息为初始色（通常为透明）。
CanvasRenderingContext2D.fillRect() 矩形填充，可以填充颜色，渐变，图案等。
CanvasRenderingContext2D.strokeRect() 矩形描边。

绘制文本

CanvasRenderingContext2D.fillText() 文字填充，可以填充纯色，渐变或者图案。 CanvasRenderingContext2D.strokeText() 文字描边。 CanvasRenderingContext2D.measureText() 文字测量。返回TextMetrics对象，该对象的width属性值就是字符占据的宽度。

线条样式

CanvasRenderingContext2D.lineWidth 线条宽度，主使用场景是描边，默认宽度是1.0，支持小数。
CanvasRenderingContext2D.lineCap 线条端点的样式。支持如下属性值：butt（默认值，断头，无端帽），round（圆形端帽），square（方形端帽）。 CanvasRenderingContext2D.lineJoin 线条转角的样式。支持如下属性值：miter（默认值，尖角），round（圆角），bevel（平角）。 CanvasRenderingContext2D.miterLimit 尖角限制比率。线条的尖角如果没有限制，在线条粗角度小的情况下会很长很长，因此，需要一个限制比率。默认是10。 CanvasRenderingContext2D.getLineDash() 返回当前虚线数值。返回值是一个偶数个数的数组
CanvasRenderingContext2D.setLineDash() 设置线条为虚线。 CanvasRenderingContext2D.lineDashOffset 设置虚线的起始偏移。

文本样式

CanvasRenderingContext2D.font 设置字体相关样式，包括字号，字体信息。默认值是10px sans-serif。
CanvasRenderingContext2D.textAlign 设置文本水平对齐方式。支持属性值有：start（默认值），end，left，right以及center。
CanvasRenderingContext2D.textBaseline 设置文本基线对齐方式。支持属性值有：top，hanging，middle，alphabetic（默认值），ideographic，bottom。 CanvasRenderingContext2D.direction 设置文本显示方向。支持属性值有：inherit（默认值），ltr和rtl。

填充和描边

CanvasRenderingContext2D.fillStyle 填充样式。默认值是#000000纯黑色。 CanvasRenderingContext2D.fill() 填充。
CanvasRenderingContext2D.strokeStyle 描边样式。默认值是#000000纯黑色。
CanvasRenderingContext2D.stroke() 描边。

渐变相关

Canvas中与渐变相关的方法就是创建线性渐变和径向渐变这两个方法。

CanvasRenderingContext2D.createLinearGradient() 创建线性渐变。 CanvasRenderingContext2D.createRadialGradient() 创建径向渐变。

图案相关

Canvas中与图案相关的方法就是创建图案对象方法。

CanvasRenderingContext2D.createPattern() 创建图案。图案内容可以是图片，可以是<canvas>元素，也可以是渐变。此方法返回CanvasPattern对象。

阴影相关

Canvas中与阴影相关的属性就是下面这些。

CanvasRenderingContext2D.shadowBlur 阴影模糊大小。默认值是0。 CanvasRenderingContext2D.shadowColor 阴影颜色。默认值是全透明黑色。 CanvasRenderingContext2D.shadowOffsetX 阴影水平偏移大小。默认值是0。 CanvasRenderingContext2D.shadowOffsetY 阴影垂直偏移大小。默认值是0。

绘制路径

下面的方法可以用来处理路径对象。

CanvasRenderingContext2D.beginPath() 开始一个新路径。 CanvasRenderingContext2D.closePath() 闭合一个路径。 CanvasRenderingContext2D.moveTo() 路径绘制起始点。 CanvasRenderingContext2D.lineTo() 绘制直线到指定坐标点。 CanvasRenderingContext2D.bezierCurveTo() 绘制贝赛尔曲线到指定坐标点。 CanvasRenderingContext2D.quadraticCurveTo() 绘制二次贝赛尔曲线到指定坐标点。
CanvasRenderingContext2D.arc() 绘制圆弧（包括圆）。 CanvasRenderingContext2D.arcTo() 绘制圆弧，和之前的点以直线相连。 CanvasRenderingContext2D.rect() 绘制矩形路径。 CanvasRenderingContext2D.ellipse() 绘制椭圆路径。 CanvasRenderingContext2D.clip() 创建剪裁路径，之后绘制的路径只有在里面的才会显示。

位置检测

CanvasRenderingContext2D.isPointInPath() 当前点是否在指定路径内。 CanvasRenderingContext2D.isPointInStroke() 当前点是否在指定路径描边上。

变换

旋转缩放等变换方法。

CanvasRenderingContext2D.rotate() 旋转。 CanvasRenderingContext2D.scale() 缩放。 CanvasRenderingContext2D.translate() 位移。 CanvasRenderingContext2D.transform() 当前矩阵变换基础上再次矩阵变换。 CanvasRenderingContext2D.setTransform() 直接重置为当前设置的矩阵变换。

透明度和层级

一个是控制全局透明度，另外一个可以改变层级关系，设置混合模式，以及实现遮罩效果等。

CanvasRenderingContext2D.globalAlpha 全局透明度。 CanvasRenderingContext2D.globalCompositeOperation 设置图形叠加时候的混合方式，可以用来改变绘制元素上下叠加关系，也就是层级。

图片与像素

绘制图片和图像像素信息处理方法。

CanvasRenderingContext2D.drawImage() 图片绘制在画布上。 CanvasRenderingContext2D.createImageData() 创建一个新的空白的ImageData对象。 CanvasRenderingContext2D.getImageData() 获取Canvas画布的设定区域的ImageData对象。 CanvasRenderingContext2D.putImageData() 给定的ImageData对象应用在Canvas画布上。

Canvas状态

Canvas状态管理几个方法。

CanvasRenderingContext2D.save() 存储当前Canvas的状态。 CanvasRenderingContext2D.restore() 恢复Canvas到前一次存储的状态。 CanvasRenderingContext2D.canvas 反向识别当前上下文源自哪个HTMLCanvasElement。

其他方法

其他一些不常用的API方法。

CanvasRenderingContext2D.drawFocusIfNeeded() 如果给定元素被聚焦，则该方法在当前路径周围绘制焦点环。 CanvasRenderingContext2D.scrollPathIntoView() 将当前路径或给定路径滚动到视图中。

drawImage

canvas与web结合使用最频繁的的方法，一般用来图像的相关处理，如图片压缩，水印合成等等

语法

context.drawImage(image, dx, dy); 
context.drawImage(image, dx, dy, dWidth, dHeight); context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

参数说明

  • image,
  • sx, 图片元素绘制在Canvas画布上起始横坐标。
  • sy, 图片元素绘制在Canvas画布上起始纵坐标
  • sWidth, 图片本身绘制在canvas上的长度
  • sHeight, 图片本身绘制在canvas上的高度
  • dx, 左上角横坐标
  • dy, 左上角纵坐标
  • dWidth, 绘制图片容器区域的宽度
  • dHeight 绘制图片容器区域的高度

示例

const canvas = document.querySelector("#canvas"); 
let [width, height] = [window.innerWidth, window.innerHeight]; canvas.width = width; 
canvas.height = height; 
const img = new Image(); 
img.src = "./images/dog.jpg"; 
img.onload = function () { 	
	let cxt = canvas.getContext("2d"); 	
	// cxt.drawImage(img, 0, 0); 				
	// cxt.drawImage(img, 0, 0, 50, 50); 	
	cxt.drawImage(img, 0, 0, 100, 100, 0, 0, 250, 250); 
};

createImageData

方法可以创建一个全新的空的ImageData对象。该对象中的所有像素信息都是透明黑。

语法

context.createImageData(width, height); 
context.createImageData(imagedata);

参数说明

width Number

  • ImageData对象包含的width值。如果ImageData对象转换成图像，则此width也是最终图像呈现的宽度。
    height Number
  • ImageData对象包含的height值。如果ImageData对象转换成图像，则此height也是最终图像呈现的高度。
    imagedataObject
  • 一个存在的ImageData对象，只会使用该ImageData对象中的width和height值，包含的像素信息会全部转换为透明黑。

TIps: 生成的ImageData里面的data值为一个数组 其中四个值组成一个像素点的值

putImageData

将给定ImageData对象的数据绘制到位图上。 如果提供脏矩形，则仅绘制该矩形的像素。 此方法不受画布变换矩阵的影响。

语法

context.putImageData(imagedata, dx, dy); 
context.putImageData(imagedata, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);

参数

  • imagedata,
  • dx, 绘制在Canvas画布上起始横坐标。
  • dy, 绘制在Canvas画布上起始纵坐标
  • dirtyX, 图像数据渲染区域的左上角横坐标。默认值是0
  • dirtyY, 图像数据渲染区域的左上角纵坐标。默认值是0
  • dirtyWidth, 图像数据渲染区域的宽度 dirtyHeight, 图像数据渲染区域的高度

getImageData

返回一个ImageData对象，其中包含Canvas画布部分或完整的像素点信息。

语法

context.getImageData(sx, sy, sWidth, sHeight);

参数

  • sx Number 需要返回的图像数据区域的起始横坐标。
  • sy Number 需要返回的图像数据区域的起始纵坐标。
  • sWidth Number 需要返回的图像数据区域的宽度。
  • sHeight Number 需要返回的图像数据区域的高度。

HTMLCanvasElement.toBlob()

语法

void canvas.toBlob(callback, mimeType, quality);

参数

  • callback Function toBlob()方法执行成功后的回调方法，支持一个参数，表示当前转换的Blob对象。
  • mimeType（可选）String mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
  • quality （可选）Number quality 表示转换的图片质量。范围是0到1。由于Canvas的toBlob()方法转PNG是无损的，因此，此参数默认是没有效的，除非，指定图片mimeType是image/jpeg或者image/webp，此时默认压缩值是0.92。

示例

canvas.toBlob(function (blob) { 			
	const a = document.createElement("a"); 			
	let url = window.URL.createObjectURL(blob); 			
	a.href = url; 			
	a.download = "图片"; 			
	a.click(); 			
	window.URL.revokeObjectURL(url); 		
});

HTMLCanvasElement.toDataURL()

Canvas本质上就是一个位图图像，因此，浏览器提供了若干API可以将Canvas图像转换成可以作为IMG呈现的数据，其中最老牌的方法就是HTMLCanvasElement.toDataURL()，此方法可以返回Canvas图像对应的data URI，也就是平常我们所说的base64地址。

语法

canvas.toDataURL(mimeType, quality);

参数

  • mimeType（可选）String
    mimeType表示需要转换的图像的mimeType类型。默认值是image/png，还可以是image/jpeg，甚至image/webp（前提浏览器支持）等。
  • quality（可选）Number
    quality表示转换的图片质量。范围是0到1。此参数要想有效，图片的mimeType需要是image/jpeg或者image/webp，其他mimeType值无效。默认压缩质量是0.92。根据自己的肉眼分辨，如果使用toDataURL()的quality参数对图片进行压缩，同样的压缩百分比呈现效果要比Adobe Photoshop差一些