Canvas

简介

最初由 Apple 使用在 Safari 中，后来 Firefox/Chrome 分别实现，经过一段时间发展，成为 H5 标准。 Canvas 可理解为画布，栅格化的。

使用场景

小游戏、头像裁剪、Charts

基本知识

坐标系、API、属性

API

接口	作用	获取
HTMLCanvasElement	Style、Context	getElementById('myCanvas')
CanvasRenderingContext2D	Draw	canvas.getContext('2d')
ImageData	像素操作	ctx.createImageData(x, y) ctx.getImageData(sx, sy, sw, sh)
TextMetrics	计算宽度	ctx.measureText(text)
CanvasGradient	渐变的不透明对象	ctx.createLinearGradient() ctx.createRadialGradient()
CanvasPattern	基于(image, canvas 或 video）的不透明对象	ctx.createPattern()
Path2D(实验特性)	可以保留并重用的路径	new Path2D(?path, ?d) new Path2D(otherPathObj)

Property

分类	类别	方法名	作用	备注
Style	Line	lineWidth	线宽
		lineCap	线尾	"butt" || "round" || "square"
		lineJoin	线相交	"bevel" || "round" || "miter"
		miterLimit	斜接头
		getLineDash()	虚线	返回：Array
		setLineDash()	设置虚线
		lineDashOffset	虚线偏移
	Text	font	字体	默认：10px sans-serif
		textAlign	对齐方式	start (默认), end, left, right, center
		textBaseline	基线对齐方式	top, hanging, middle, alphabetic (默认), ideographic, bottom
		direction	方向	ltr, rtl, inherit (默认)
	Fill	fillStyle	填充样式	默认：#000，支持rgb、rgba、black等
	Stroke	strokeStyle	描边样式	默认：#000，支持rgb、rgba、black等
	Shadows	shadowBlur	模糊等级	默认：0
		shadowColor	阴影色	默认：透明，支持rgb、rgba、black等 被fillStyle/strokeStyle影响
		shadowOffsetX	水平方向偏移
		shadowOffsetY	垂直方向偏移
	Compositing	globalAlpha	透明度	默认：1
		globalCompositeOperation	合成类型	可选值(12种)：source-over、source-in、source-out、 source-atop、destination-over、destination-in、 destination-out、destination-atop、lighter、copy、 xor、multiply、screen、overlay、darken、lighten、 color-dodge、color-burn、hard-light、 soft-light、difference、exclusion、hue、 saturation、color、luminosity

Method

分类	类别	方法名	作用	备注
路径	Path	beginPath()	开始路径
		closePath()	结束路径
		moveTo(x, y)	移动画笔
		lineTo(x, y)	直线路径
		quadraticCurveTo(cp1x, cp1y, x, y)	二次贝塞尔曲线	cp1x,cp1y为一个控制点，x,y为结束点
		bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)	三次贝塞尔曲线	cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点
		arc(x, y, radius, startAngle, endAngle, [, anticlockwise])	以（x,y）为圆心的以radius为半径的圆弧（圆）	anticlockwise 默认false 顺时针
		arcTo(x1, y1, x2, y2, radius)	给定的控制点和半径画一段圆弧，再以直线连接两个控制点
		ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise])	椭圆
		rect(x, y, width, height)	矩形
绘制	Path	fill()	填充
		stroke()	描边
		drawFocusIfNeeded([path], element)	聚焦的元素绘制路径
		scrollPathIntoView([path])	滚动至路径
		clip([path, fillRule])	裁剪	路径裁剪 fillRule: nonzero(默认) evenodd(奇偶)
		isPointInPath([path], x, y [, fillRule])	点是否在路径内	路径裁剪 fillRule: nonzero(默认) evenodd(奇偶)
		isPointInStroke([path], x, y)	点是否在描边路径内	路径裁剪 fillRule: nonzero(默认) evenodd(奇偶)
	Rect	fillRect(x, y, width, height)	填充
		strokeRect(x, y, width, height)	描边
		clearRect(x, y, width, height)	清除
	Text	fillText(text, x, y [, maxWidth])	填充文本
		strokeText(text, x, y [, maxWidth])	描边文本
		measureText(text)	测量文本	返回：TextMetrics {width ...}
	Image	drawImage(image, dx, dy) drawImage(image, dx, dy, dWidth, dHeight) drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)	绘制图片	image: CanvasImageSource, 包含： HTMLImageElement SVGImageElement HTMLVideoElement HTMLCanvasElement ImageBitmap OffscreenCanvas
	Transformations	getTransform()	当前变换矩阵	返回：DOMMatrix
		rotate(angle)	旋转
		scale(x, y)	缩放	默认缩放中心点(0, 0)
		translate(x, y)	平移
		transform(a, b, c, d, e, f)	变换
		setTransform(a, b, c, d, e, f) setTransform(matrix)	设置变换
其他	Pixel manipulation	createImageData(width, height) createImageData(imagedata)	创建ImageData
		getImageData(sx, sy, sw, sh)	获取图片数据	返回：ImageData
		putImageData(imageData, dx, dy) putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)	设置ImageData
	State	save()	保存当前样式状态
		restore()	恢复保存的样式状态(栈顶)

样式

上色：填充、描边

fillStyle
strokeStyle

颜色支持 5 种类型

yellow
#FFA500
rgb(255,165,0)
rgba(255,165,0, 0.5)
hsl(45, 100%, 50%)
hsla(45, 100%, 50%, 0.5)
CanvasGradient
CanvasPattern

画笔

lineWidth

形状

概念：路径

# 开始新的路径
beginPath()
# 闭合当前路径
closePath
# 可创建子路径
ctx.moveTo(300, 0)

线

ctx.lineTo(200, 300)

矩形: Rect

创建矩形有 2 种方式：

# 1. fillRect / strokeRect
ctx.fillRect(0, 0, 200, 200)
# 2. Path2D
Path2D.rect(0, 0, 200, 200)

弧：Arc

圆、椭圆

曲线 ：Bezier

fillRule

变换

文字

水平、垂直方向

图片

图片绘制支持多种来源

动画

优化