canvas系列—canvas常⽤API介绍
1. Canvas API
Canvas API 提供了⼀个通过JavaScript 和 HTML的<canvas>元素来绘制图形的⽅式。它可以⽤于动画、游戏画⾯、数据可视化、图⽚编辑以及实时视频处理等⽅⾯。
在html⾥的形式是：
<canvas id="canvas"></canvas>
js⾥：
的context——图像稍后将在此被渲染。
2. <canvas>
<canvas>元素可被⽤来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。
canvas元素的属性：
属性名含义值
height该元素占⽤空间的⾼度以 CSS 像素（px）表⽰，默认为 150
width该元素占⽤空间的宽度以 CSS 像素（px）表⽰，默认为 300
getContext()
toDataURL(type, encoderOptions)返回⼀个数据URL，该URL包含由类型参数指定
的格式的图像（默认为png）
encoderOptions在指定图⽚格式为 image/jpeg 或 image/webp的情况
下，可以从 0 到 1 的区间内选择图⽚的质量
toBlob(callback, type,
encoderOptions)
回调函数，可获得⼀个单独的Blob对象参数其余两个参数含义同上注意
1. 需要有闭合标签
2. 直接在html标签中设置width和height属性或者使⽤JavaScript来指定画布尺⼨
3. 使⽤CSS的width和height以在渲染期间缩放图像以适应样式⼤⼩，只是让画布缩放⽽已。
3. CanvasRenderingContext2D
通过Context('2d')⽅法可以获得CanvasRenderingContext2D对象；
可为<canvas>元素的绘图表⾯提供2D渲染上下⽂。 它⽤于绘制形状，⽂本，图像和其他对象。
// html
<canvas id="my-house" width="300" height="300"></canvas>
// js
const canvas = ElementById('my-house');
const ctx = Context('2d');// CanvasRenderingContext2D对象
有了CanvasRenderingContext2D上下⽂对象，就可以绘制⾃⼰想要的内容了
canvas动画先来回顾⼀下最常⽤最简单的属性和⽅法：
线条相关
属性名作⽤默认值
lineWidth线的宽度1
属性名作⽤默认值
lineCap线末端的类型butt, round , square(以正⽅形结尾，视觉上⽐butt长⼀点)
lineJoin两线相交拐点类型miter, round，bevel
miterLimit斜接⾯限制⽐例10
setLineDash([])设置当前的线段样式数组⾥的值依次对应虚线的线段和空⽩的长度，依次重复lineDashOffset(offset)从哪⾥开始绘制线
绘制矩形
属性名作⽤默认值
clearRect擦除指定矩形区域的内容
fillRect(x, y, width, height)绘制填充矩形
strokeRect(x, y, width, height)使⽤当前的绘画样式，描绘⼀个矩形
路径
属性名作⽤默认值beginPath()清空路径列表，开始⼀个新的路径
closePath()使笔点返回到当前⾃路径的起始点
moveTo(x, y)将⼀个新的⼦路径的起始点移动到指定坐标
lineTo(x, y)链接到指定坐标
arc(x, y, r, startAngle, endAngle, 是否逆时针)绘制⼀段圆弧
arcTo(x1, y1, x2, y2, r)绘制两个点之间半径为r的圆弧
rect(x, y, width, height)绘制⼀个矩形，可以通过fill或者stroke来填充或描边
bezierCurveTo()贝塞尔曲线
绘制路径
属性名作⽤默认值
fill()填充路径
stroke()描边路径
clip()将当前创建的路径设置为当前剪切路径的⽅法
填充和描边
属性名作⽤默认值
fillStyle
strokeStyle
渐变
返回的CanvasGradient对象的addColorStop(offset, color)添加渐变颜⾊
属性名作⽤默认值
创建⼀个沿参数坐标指定的直线的渐变。该⽅法返回⼀个线性 对返回值可以作为描边或者填充的值使
createLinearGradient(x0, y0, x1, y1)象⽤
createRadialGradient(x0, y0, r0, x1, y1,
r1)确定两个圆的坐标，放射性渐变
属性名作⽤默认值
图案
返回CanvasPattern对象，可以把此模式赋值给当前的fillStyle等，在 canvas 上绘制出效果
属性名作⽤默认值
createPattern(image,
repetition)⽤指定的图⽚
创建图案
image可以是图⽚，视频，canvas的Element，或者canvas上下⽂，ImageData,Blob, ImageBitmap;
repetition是重复⽅式，跟css⾥的背景图⽚重复参数⼀样
绘制⽂本
属性名作⽤默认值fillText(text, x, y,[maxWidth])在指定位置填充绘制⽂本，最⼤宽度可选
strokeText(text, x, y,[maxWidth])在指定位置描边绘制⽂本，最⼤宽度可选
measureText(text)返回TextMetrics 对象： width,…⽂本样式
属性名作⽤默认值
font 设置字体 格式跟
css的font⼀样
关于字体的样式都是在这⾥⼀起设置的
textAlign⽂本对齐⽅式start, end , left, right, center；这⾥的textAlign="center"⽐较特殊。textAlign的值为center时候⽂本的居中是基于你在fillText的时候所给的x的值，也就是说⽂本⼀半在x的左边，⼀半在x的右边
textBaseline基线对齐⽅式top, hanging, middle, alphabetic (默认),ideographic, bottom.
direction⽂本⽅向ltr, rtl, inherit (默认)
阴影
属性名作⽤默认值shadowColor阴影颜⾊
shadowBlur阴影模糊程度
shadowOffsetX阴影⽔平偏移量
shadowOffsetY阴影垂直⽅向偏移量
变换
属性名作⽤默认值rotate(deg)坐标系顺势转旋转指定⾓度
scale(x, y)canvas每个单位添加缩放变换
translate(x, y)对当前坐标系平移
transform()
setTransform()
resetTransform()
合成
属性名作⽤默认值globalAlpha合成到canvas之前，设置图形和图像的透明度
globalCompositeOperation设置如何在已经存在的位图上绘制图形和图像
绘制图像
属性名作⽤默认值
drawImage()绘制
图像
ctx.drawImage(image, dx, dy); 或者ctx.drawImage(image, dx, dy, dWidth, dHeight); 或者 ctx.drawImage(image, sx, sy,
sWidth, sHeight, dx, dy, dWidth, dHeight);
像素控制
属性名作⽤默认值
createImageData(width, height 或者 imagedata)创建⼀个新的、空⽩的、指定⼤⼩的imageData对象
从现有的 ImageData 对象中，复制⼀个和其宽度和⾼度相同的对
象。图像⾃⾝不允许被复制。
getImageData(sx, sy,
sw, sh)⽤来描述canvas区域隐含的像素数据，这个区域通过矩形表⽰，起始点为(sx, sy)、宽为sw、⾼为sh
putImageData()
ctx.putImageData(imagedata, dx, dy)；或
ctx.putImageData(imagedata, dx, dy, dirtyX, dirtyY,
dirtyWidth, dirtyHeight);
canvas状态
属性名作⽤默认值save()使⽤栈保存当前的绘画样式状态，你可以使⽤ restore() 恢复任何改变
restore()恢复到最近的绘制样式状态，此状态是通过 save() 保存到”状态栈“中最新的元素
canvas
以前做过⼀个合成视频的需求，学习和使⽤了⼀些canvas的知识；所以根据实际遇到的canvas的场景总结了⼏篇⽂档：
1.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。