canvas的使用

廊坊吴彦祖

已于 2022-05-22 18:31:03 修改

阅读量1.3k

点赞数 3

分类专栏： html 文章标签：前端 canvas html5 html

于 2020-03-11 20:55:28 首次发布

本文链接：https://blog.csdn.net/weixin_45426836/article/details/104768771

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

canvas的使用

HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素，是众多广泛使用的网络 2D 图像渲染标准之一，可以用于绘制图表、制作图片构图或者制作动画
canvas 元素本身并没有绘制能力（仅仅是图形的容器），它公开了一个或多个渲染上下文，必须使用脚本来完成实际的绘图任务

canvas基本使用

相比于 img 元素，canvas 没有 src 和 alt 属性，实际上，canvas 只有 width 和 height 两个属性用来设置画布容器的宽和高（默认宽高为300px ×150px），canvas 是双标签元素，结尾的< /canvas >标签不能省略

<canvas id="myCanvas" width="300" height="300"></canvas>

与 img 元素不同的是，canvas 提供了替换内容，不支持 canvas 的浏览器将会忽略容器并在其中渲染替换内容

<canvas id="myCanvas" width="300" height="300">
	<!--替换内容--> 
</canvas>

getContext() 方法

canvas 的getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性，当前唯一的合法值是 2d，它指定了画布绘画类型为二维绘图，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
	//指定画布绘画类型为二维绘图
  	var ctx = myCanvas.getContext('2d');
else {
   	//不支持canvas的相关操作
}

绘制图形

canvas 只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段），所有其他类型的图形都是通过一条或者多条路径组合而成

绘制矩形：

x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标， width 和 height 指定了矩形的尺寸

fillRect(x, y, width, height)：绘制一个填充的矩形
strokeRect(x, y, width, height)：绘制一个矩形的边框
clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //以左上角坐标为10,10的位置绘制一个宽高为100px的黑色正方形
        ctx.fillRect(10, 10, 100, 100);
        //以左上角坐标为30,30的位置清除了一个宽高为60px的透明正方形
        ctx.clearRect(30, 30, 60, 60);
    }
    draw()
}

效果：
在这里插入图片描述

绘制路径：

图形的基本元素是路径，路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath()：闭合路径之后图形绘制命令又重新指向到上下文中
stroke()：通过线条来绘制图形轮廓
fill()：通过填充路径的内容区域生成实心的图形，可以设置填充规则，不填为默认值
- “nonzero”：默认值，非零环绕原则
- “evenodd”：奇偶环绕原则
moveTo(x, y)：将笔触移动到指定的坐标 x 以及 y 上
lineTo(x, y)：绘制一条从当前位置到指定 x 以及 y 位置的直线
arc(x, y, radius, startAngle, endAngle, anticlockwise)：画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle（单位以弧度表示）开始到 endAngle（单位以弧度表示）结束，按照 anticlockwise 给定的方向（默认为 false 顺时针，如果为 true 是逆时针）来生成
quadraticCurveTo(cp1x, cp1y, x, y)：绘制二次贝塞尔曲线，cp1x、cp1y 为一个控制点，x、y 为结束点
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：绘制三次贝塞尔曲线，cp1x、cp1y 为控制点一，cp2x、cp2y 为控制点二，x、y 为结束点
rect(x, y, width, height)：绘制一个左上角坐标为（x,y），宽高为 width 以及 height 的矩形

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //新建一条路径
        ctx.beginPath();
        //绘制一个以坐标75,75为圆心，半径为50px的圆
        ctx.arc(75,75,50,0,Math.PI*2,true);
        //将笔触移动到坐标110,75
        ctx.moveTo(110,75);
        //顺时针绘制一个以坐标75,75为圆心，半径为35px的圆弧
        ctx.arc(75,75,35,0,Math.PI,false); 
        //通过线条来绘制图形轮廓
        ctx.stroke();
        //新建一条路径
        ctx.beginPath();
        //绘制一个以坐标65,65为圆心，半径为5px的圆
        ctx.arc(60,65,5,0,Math.PI*2,true);
        ctx.moveTo(95,65);
        //绘制一个以坐标90,65为圆心，半径为5px的圆
        ctx.arc(90,65,5,0,Math.PI*2,true);
        //通过填充路径的内容区域生成实心的图形
        ctx.fill();
    }
    draw()
}

效果：
在这里插入图片描述

添加样式和颜色：

color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象，默认填充颜色和轮廓颜色均为黑色（#000000）

色彩：

fillStyle = color：设置图形的填充颜色
strokeStyle = color：设置图形轮廓的颜色

透明度：

globalAlpha = transparencyValue：这个属性影响到 canvas 里所有图形的透明度，有效的值范围是 0.0 （完全透明）到 1.0（完全不透明），默认是 1.0

线型：

lineWidth = value：设置线条宽度，必须为正数，默认是1.0
lineCap = type：设置线条末端样式，默认是 butt，值可以是：
- butt：线条末端正常
- round：线条末端端点处加上了半径为一半线宽的半圆
- square：线条末端端点处加上了等宽且高度为一半线宽的方块
lineJoin = type：设定线条与线条间接合处的样式，默认是 miter，值可以是：
- round：线条与线条间接合边角处为圆角，圆的半径等于线宽
- bevel：线条与线条间接合边角处为平角
- miter：线条与线条间接合边角处为尖角
miterLimit = value：限制当两条线相交时交接处最大长度，所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
getLineDash()：返回一个包含当前虚线样式，一个描述交替绘制线段和间距（坐标空间单位）长度的数组，长度为非负偶数，如果数组元素的数量是奇数，数组元素会被复制并重复
setLineDash(segments)：设置当前虚线样式，接受一个描述交替绘制线段和间距（坐标空间单位）长度的数组，如果数组元素的数量是奇数，数组的元素会被复制并重复，用来指定线段与间隙的交替
lineDashOffset = value：设置虚线样式的起始偏移量，偏移量是 float 精度的数字，初始值为 0.0

渐变：

createLinearGradient(x1, y1, x2, y2)：接受 4 个参数，表示渐变的起点 (x1,y1) 与终点 (x2,y2)，返回一个根据指定线路初始化的线性 CanvasGradient 对象
createRadialGradient(x1, y1, r1, x2, y2, r2)：接受 6 个参数，前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆，返回由两个指定的圆初始化的放射性 CanvasGradient 对象
gradient.addColorStop(position, color)：用来给创建出的 CanvasGradient 对象上色，接受 2 个参数，position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置（0.5 表示颜色会出现在正中间）

图案样式：

createPattern(image, type)：接受两个参数，image 可以是一个 image 对象的引用，或者另一个 canvas 对象，type 必须是下面的字符串值之一：repeat，repeat-x，repeat-y 和 no-repeat，返回描述模式的不透明对象

阴影：

shadowOffsetX = float：设定阴影在 X 轴的延伸距离，不受变换矩阵所影响的。负值表示阴影会左延伸，正值则表示会右延伸，阴影水平偏移距离的 float 类型的值，默认为 0
shadowOffsetY = float：设定阴影在 Y 轴的延伸距离，不受变换矩阵所影响的。负值表示阴影会上延伸，正值则表示会下延伸，阴影水平偏移距离的 float 类型的值，默认为 0
shadowBlur = float：设定阴影模糊程度的 float 类型的值，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0
shadowColor = color：设定阴影颜色效果，默认是全透明的黑色

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //创建一个CanvasGradient渐变对象
        var myGradient = ctx.createLinearGradient(10,10,10,100);
        //为CanvasGradient渐变对象上色
        myGradient.addColorStop(0, '#A7D30C');
        myGradient.addColorStop(1, '#019F62');
        //将渐变颜色设置为填充颜色
        ctx.fillStyle = myGradient;
        //设置阴影在X轴的延伸距离
        ctx.shadowOffsetX = 10;
        //设置阴影在Y轴的延伸距离
        ctx.shadowOffsetY = 10;
        //设置阴影模糊程度
        ctx.shadowBlur = 5;
        //设置阴影颜色效果
        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
        //设置绘制图形的透明度
        ctx.globalAlpha = 0.8;
        //以左上角坐标为10,10的位置绘制一个宽高为100px的正方形
        ctx.fillRect(10,10,100,100);
    }
    draw()
}

效果：
在这里插入图片描述

绘制文本：

fillText(text, x, y [, maxWidth])：在指定的 (x,y) 位置填充指定的 text 文本，绘制的最大宽度是可选的，如果指定了值，并且经过计算字符串的值比最大宽度还要宽，字体为了适应会水平缩放
strokeText(text, x, y [, maxWidth])：在指定的 (x,y) 位置绘制拥有边框的 text 文本（空心文本），绘制的最大宽度是可选的，如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体

文本样式：

font = value：绘制文本的样式，这个字符串使用和 CSS font 属性相同的语法，默认的字体是 10px sans-serif
textAlign = value：文本对齐选项，默认值是 start，可选的值包括：
- left：文本左对齐
- right：文本右对齐。
- center：文本居中对齐。
- start：文本对齐界线开始的地方（左对齐指本地从左向右，右对齐指本地从右向左）
- end：文本对齐界线结束的地方（左对齐指本地从左向右，右对齐指本地从右向左）
textBaseline = value：基线对齐选项，默认值是 alphabetic，可选的值包括：
- top：文本基线在文本块的顶部
- hanging：文本基线是悬挂基线
- middle：文本基线在文本块的中间
- alphabetic：文本基线是标准的字母基线
- ideographic：文字基线是表意字基线，如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部
- bottom：文本基线在文本块的底部，与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母
direction = value：文本方向，默认值是 inherit，可能的值包括：
- tr：文本方向从左向右
- rtl：文本方向从右向左
- inherit：根据情况继承 < canvas > 元素或者 Document

预测量文本宽度：

measureText(text)：将返回一个 TextMetrics 对象的宽度、所在像素，这些体现文本特性的属性，text 表示需要测量的文本

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //设置绘制文本的样式
        ctx.font = "22px serif";
        //在22,22位置填充指定文本
        ctx.fillText("廊坊吴彦祖", 22, 22);
        //在22,44位置绘制拥有边框的指定文本
        ctx.strokeText("廊坊吴彦祖", 22, 44);
    }
    draw()
}

效果：
在这里插入图片描述

使用图片：

canvas 可以把浏览器支持的任意格式的外部图片绘制到画布上

获得需要绘制的图片：

相同页面内的图片，可以通过获取图片元素 dom 对象作为图片源，也可以将同一个页面中其他 canvas 元素生成的图片作为图片源
可以绘制的图片源类型：

HTMLImageElement：这些图片是由 Image() 函数构造出来的，或者任何的 img 元素
HTMLVideoElement：用一个HTML的 video 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement：可以使用另一个 canvas 元素作为你的图片源
ImageBitmap：这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成

绘制图片：

使用 drawImage() 方法将获取到的图片源对象渲染到 canvas 里

drawImage(image, x, y)： image 表示 image 或者 canvas 对象，x 和 y 表示其在目标 canvas 里的起始坐标

缩放：

drawImage(image, x, y, width, height)：这个方法多了2个参数：width 和 height，这两个参数用来控制当向 canvas 画入时应该缩放的大小

切片：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)：第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用，后8个参数中，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小

控制图像的缩放行为：

mozImageSmoothingEnabled = false：Gecko 1.9.2 引入了该属性，值为 false 时，图像不会平滑地缩放，默认是 true

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //创建img元素
        var img = new Image();
        //设置img的src地址
        img.src = 'img.jpg';
        //onload事件响应函数中触发绘制
        img.onload = function(){
            //将img渲染到canvas里
            ctx.drawImage(img,10,10);
        }
    }
    draw()
}

效果：
在这里插入图片描述

canvas画布操作：

canvas 的状态就是当前画面应用的所有样式和变形的一个快照，canvas 状态存储在栈中，每当 save() 方法被调用后，当前的状态就被推送到栈中保存，可以调用任意多次 save() 方法，每一次调用 restore() 方法，上一个保存的状态就从栈中弹出，所有设定都恢复

状态的保存和恢复：

save()：保存画布(canvas)的所有状态，包括：
- 当前的变换矩阵
- 当前的剪切区域
- 当前的虚线列表
- 以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled
restore()：恢复画布(canvas)上一个保存的状态

移动：

translate(x, y)：用来移动 canvas 和它的原点到一个不同的位置，x 是左右偏移量，y 是上下偏移量

旋转：

rotate(angle)：用来以 canvas 的原点为中心旋转 canvas，angle 是旋转的角度，它是顺时针方向的，以弧度为单位的值

缩放：

scale(x, y)：用来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大，可以缩放画布的水平和垂直的单位，x 为水平缩放因子，y 为垂直缩放因子，如果比1小会缩小图形，如果比1大会放大图形，默认值为1，为实际大小

变形：

transform(m11, m12, m21, m22, dx, dy)：用来将当前的变形矩阵乘上一个基于自身参数的矩阵，允许对变形矩阵直接修改，如果任意一个参数是无限大，变形矩阵也必须被标记为无限大，否则会抛出异常，m11 表示水平方向的缩放，m12 表示水平方向的倾斜偏移，m21 表示竖直方向的倾斜偏移，m22 表示竖直方向的缩放，dx 表示水平方向的移动，dy 表示竖直方向的移动
setTransform(m11, m12, m21, m22, dx, dy)：用来将当前的变形矩阵重置为单位矩阵，然后用相同的参数调用 transform 方法，如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常，从根本上来说，该方法是取消了当前变形，然后设置为指定的变形，一步完成
resetTransform()：用来重置当前变形为单位矩阵，等同于 ctx.setTransform(1, 0, 0, 1, 0, 0);

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //设置绘制图形的填充颜色
        ctx.fillStyle = '#006BFF';
        //移动图形和它的原点
        ctx.translate(10,10)
        //以图形原点为中心旋转图形
        ctx.rotate(Math.PI*2/40)
        //缩放图形
        ctx.scale(1.2, 1.2);
        以左上角坐标为30,30的位置绘制一个宽高为50px的正方形
        ctx.fillRect(30, 30, 50, 50);
    }
    draw()
}

效果：
在这里插入图片描述

合成与裁剪：

canvas 不仅可以在已有图形后面再画新图形，还可以用来遮盖指定区域，清除画布中的某些部分（清除区域不仅限于矩形，像clearRect()方法做的那样）以及更多其他操作

遮盖：

globalCompositeOperation = type：设定在画新图形时采用的遮盖策略，其值是一个标识12种遮盖方式的字符串，type 值参考

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //设置绘制图形时采用的遮盖策略为screen
        ctx.globalCompositeOperation = "screen";
        //设置绘制图形的填充颜色
        ctx.fillStyle = "#006BFF";
        //以左上角坐标为10,10的位置绘制一个宽高为100px的正方形
        ctx.fillRect(10, 10, 100, 100);
        //设置绘制图形的填充颜色
        ctx.fillStyle = "#FED200";
        //以左上角坐标为50,50的位置绘制一个宽高为100px的正方形
        ctx.fillRect(50, 50, 100, 100);
    }
    draw()
}

效果：
在这里插入图片描述

裁切路径：

裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏不需要的部分，裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响，裁切路径创建之后所有出现在它里面的东西才会画出来
默认情况下，canvas 有一个与它自身一样大的裁切路径（也就是没有裁切效果）

clip()：将当前正在构建的路径转换为当前的裁剪路径，可以设置填充规则，不填为默认值
- “nonzero”：默认值，非零环绕原则
- “evenodd”：奇偶环绕原则

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
	    //指定画布绘画类型为二维绘图
        var ctx = myCanvas.getContext('2d');
        //绘制一个以坐标10,10为圆心，半径为60px的圆弧
        ctx.arc(10, 10, 60, 0, Math.PI*2, true);
        //将当前正在构建的路径转换为当前的裁剪路径
        ctx.clip();
        //以左上角坐标为10,10的位置绘制一个宽高为100px的正方形
        ctx.fillRect(10, 10, 100, 100);
    }
    draw()
}

效果：
在这里插入图片描述

动画：

动画的基本步骤：

清空 canvas：除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有，最简单的做法就是用 clearRect() 方法
保存 canvas 状态：如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下
绘制动画图形（animated shapes）：这一步才是重绘动画帧
恢复 canvas 状态：如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧

操控动画：

canvas 上绘制的内容只有在脚本执行结束后才能看见结果，为了实现动画，我们需要一些可以定时执行重绘的方法

setInterval(function, delay)：在设定好间隔时间后，函数会定期执行
setTimeout(function, delay)：在设定好的时间之后执行函数
window.requestAnimationFrame(callback)：告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画，该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行，callback 表示下一次重绘之前更新动画帧所调用的函数

像素操作：

ImageData对象中存储着 canvas 对象真实的像素数据，可以直接通过 ImageData 对象操纵像素数据，直接读取或将数据数组写入该对象中
ImageData 对象包含以下几个只读属性：

width：图片宽度，单位是像素
height：图片高度，单位是像素
data：Uint8ClampedArray类型的一维数组，可以被使用作为查看初始像素数据，包含着RGBA格式的整型数据，范围在0至255之间（包括255）

创建ImageData对象：

createImageData(width, height)：创建一个新的具体特定尺寸的 ImageData 对象，所有像素被预设为透明黑
createImageData(anotherImageData)：从现有的 ImageData 对象中，复制一个和其宽度和高度相同的对象，图像自身不允许被复制

得到场景像素数据：

getImageData(left, top, width, height)：获得一个包含画布场景像素数据的 ImageData 对象，会返回一个 ImageData 对象，它代表了画布区域的对象数据，此画布的四个角落分别表示为 (left, top)、(left + width, top)、(left, top + height)、(left + width, top + height) 四个点

在场景中写入像素数据：

putImageData(myImageData, dx, dy)：对场景进行像素数据的写入，dx 和 dy 表示在场景内左上角绘制的像素数据所得到的设备坐标

保存图片：

HTMLCanvasElement 提供一个toDataURL()方法，它返回一个包含被类型参数规定的图像表现格式的数据链接，用于图片的保存

canvas.toDataURL(‘image/png’)：默认设定，创建一个PNG图片
canvas.toDataURL(‘image/jpeg’, quality)：创建一个JPG图片，你可以有选择地提供从0到1的品质量，1 表示最好品质，0 基本不被辨析但有比较小的文件大小
canvas.toBlob(callback, type, encoderOptions)：创建一个在画布中的代表图片的 Blob 对象
- callback：回调函数，可获得一个单独的Blob对象参数
- type 可选：指定图片格式，默认格式为 image/png
- encoderOptions：可选，Number类型，值在0与1之间，当请求图片格式为 image/jpeg或者 image/webp 时用来指定图片展示质量，如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略

例如：

//获取canvas元素的dom对象
var myCanvas = document.getElementById('myCanvas');
//判断浏览器是否支持canvas
if(myCanvas.getContext) {
    function draw() {
        //......
        //创建一个PNG格式的数据链接
        var dataURL = myCanvas.toDataURL();
        console.log(dataURL);  //"data:image/png;base64,......"
    }
    draw()
}

点击区域和无障碍访问：

< canvas >标签只是一个位图，它并不提供任何已经绘制在上面的对象的信息，canvas 的内容不能像语义化的 HTML 一样暴露给一些协助工具

点击区域：

进行点击检测并把事件转发到DOM元素

addHitRegion(options) ：用来在 canvas 上添加一个点击区域，options 参数是可选的，当赋值时， Object 包含以下属性：
- path：Path2D 对象，描述点击区的区域范围，如果不给此属性赋值，则会使用当前的路径
- fillRule：遵循的填充规则（默认是“nonzero”）
- id：点击区的 id，在事件中可以引用此 id
- parentID：父区域的 id，为了光标回退或者辅助工具导航
- cursor：鼠标移动到点击区时的 cursor（默认是 “inherit”），继承父点击区域的光标，或者 canvas 元素的光标
- control：触发事件的元素（canvas的子孙元素），默认为 null
- label：如果没有 control 属性，文本标签作为辅助工具，用作点击区域的描述，默认为 null
- role：如果没有control属性，ARIA role 作为辅助工具，决定如何表示点击区域，默认为 null
removeHitRegion(id) ：用来从canvas上移除指定 id 的点击区域
clearHitRegions() ：用来移除 canvas 上的所有点击区域

焦点圈：

当用键盘控制时，焦点圈是一个能帮我们在页面上快速导航的标记

drawFocusIfNeeded(path, element) ：如果给定的元素获得了焦点，用来给当前路径或特定路径绘制焦点，element 表示是否需要设置焦点的元素，path 可选，表示使用的 Path2D 路径
scrollPathIntoView(path) ：把当前的路径或者一个给定的路径滚动到显示区域内，可以让一个元素获得焦点的时候在屏幕上可见（滚动到元素所在的区域），path 可选，表示使用的Path2D 路径

canvas的优化：

canvas 被广泛用于游戏及复杂的图像可视化中，随着网站和应用将 canvas 画布推至极限，便需要改善出现的一些性能问题

在离屏canvas上预渲染相似的图形或重复的对象
用整数取代浮点数的坐标点，避免浏览器为了达到抗锯齿的效果做额外的运算
不要在用 drawImage() 时缩放图像，在离屏 canvas 中缓存图片的不同尺寸
使用多层画布去画一个复杂的场景，用多个画布元素去创建不同层次，减少不必要的更新
用 CSS 设置大的背景图
用 CSS transforms 特性缩放画布，CSS transforms 特性由于调用GPU，因此更快捷
关闭透明度，把 alpha 选项设置为 false，帮助浏览器进行内部优化
```
var ctx = myCanvas.getContext('2d', { alpha: false });
```

参考文档：

MDN Canvas教程：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

廊坊吴彦祖

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
canvas的使用

canvas的使用HTML5 < canvas > 标签是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素，是众多广泛使用的网络 2D 图像渲染标准之一，可以用于绘制图表、制作图片构图或者制作动画canvas 元素本身并没有绘制能力（仅仅是图形的容器），它公开了一个或多个渲染上下文，必须使用脚本来完成实际的绘图任务canvas基本使用相比于 img 元...
复制链接

扫一扫