Canvas学习与使用

最新推荐文章于 2024-05-27 08:51:51 发布

ZikM_0221

最新推荐文章于 2024-05-27 08:51:51 发布

阅读量533

点赞数

分类专栏： Web 文章标签：学习 css3 javascript

本文链接：https://blog.csdn.net/qq_43303906/article/details/124832699

版权

Web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Canvas学习与使用

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

<canvas> 只有两个可选的属性 width、heigth 属性，默认 width为300、height 为 150，单位都是 px

一、绘制形状的原理

栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位；图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qE99jQbX-1652886154694)(https://s2.loli.net/2022/05/17/1ak2LXOTDHJW8QS.png)]

二、渲染上下文

<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容

//设置一个宽500 高500的画布
<canvas id="canvas" width="500" height="500">你的浏览器不支持 canvas，请升级你的浏览器。</canvas>

// 获取画布
let canvas = document.getElementById('canvas');
// 创建上下文对象(画笔)
let ctx = canvas.getContext('2d');

三、绘制矩形

1、fillRect(x, y, width, height)：绘制一个填充的矩形。
2、strokeRect(x, y, width, height)：绘制一个矩形的边框。
3、clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

<canvas class="canvas" width="500" height="500">
    您的浏览器不支持 HTML5 canvas 标签。
</canvas>

// 获取画布元素
let canvas = document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');

// 默认的矩形是黑色
ctx.fillRect(0, 85, 150, 75);

// 设置填充颜色
ctx.fillStyle = "#2ecc71";
// 绘制一个矩形
ctx.fillRect(0, 0, 150, 75);

// 设置边框颜色
ctx.strokeStyle = '#3498db'
// 绘制一个矩形边框
ctx.strokeRect(160, 0, 150, 75);

// 清除指定矩形区域
ctx.clearRect(40, 30, 75, 25)

四、绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

使用路径绘制图形需要的步骤：

创建路径起始点
调用绘制方法去绘制路径
把路径封闭
一旦路径形成，通过描边或填充路径区域来渲染图形

方法：

beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y) 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath() 闭合路径之后，图形绘制命令又重新指向到上下文中
stroke() 通过线条来绘制图形轮廓
fill() 通过填充路径的内容区域生成实心的图形

五、绘制线段

示例1：绘制线段

<canvas class="canvas" width="500" height="500">暂不支持</canvas>

// 获取画布
let canvas =document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');
// 1. 新建一条路径
ctx.beginPath();
// 2. 将画笔移动到指定位置
ctx.moveTo(50,50);
// 3. 绘制一条从当前位置到指定坐标的直线
ctx.lineTo(100,50);
// 4.闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
// 5. 绘制路径
ctx.stroke();

示例2：绘制三角形

<canvas class="canvas" width="500" height="500">暂不支持</canvas>

// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.lineTo(200,200)
ctx.closePath(); //闭合路径
ctx.stroke();// 描边

示例3：填充三角形

<canvas class="canvas" width="500" height="500">暂不支持</canvas>

// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.fill(); // 填充闭合区域。如果path没有闭合，则fill()会自动闭合路径

六、绘制圆弧

1、arc(x, y, r, startAngle, endAngle, boolen): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。boolen 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

注意：

这里的度数都是弧度。

0 弧度是指的 x 轴正方向。

radians=(Math.PI/180)*degrees   //角度转换成弧度

2、arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。

示例1：

// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 40, 0,Math.PI, false);
ctx.stroke();

示例2：

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 50, 40, 0, Math.PI, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 50, 40, 0, Math.PI / 3, false);
ctx.stroke();

示例3：

ctx.beginPath();
ctx.arc(50, 150, 40, 0, Math.PI * 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 150, 40, 0, Math.PI / 2, true);
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 150, 40, 0, Math.PI / 3, true);
ctx.stroke();

示例4：

ctx.beginPath();
ctx.arc(50, 250, 40, 0, Math.PI * 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 250, 40, 0, Math.PI, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 250, 40, 0, Math.PI / 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 250, 40, 0, Math.PI / 3, false);
ctx.closePath(); //闭合路径·
ctx.stroke();

示例5：

ctx.beginPath();
ctx.arc(50, 350, 40, 0, Math.PI * 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 350, 40, 0, Math.PI, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 350, 40, 0, Math.PI / 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

ctx.beginPath();
ctx.arc(350, 350, 40, 0, Math.PI / 3, true);
ctx.closePath(); //闭合路径·
ctx.stroke();

示例6：💡

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    // 获取画布
    let canvas = document.querySelector('.canvas')
    // 创建画笔
    let ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(50, 50);
    //参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
    ctx.arcTo(200, 50, 200, 200, 100);
    ctx.lineTo(200, 200)
    ctx.stroke();
    ctx.beginPath();
    ctx.rect(50, 50, 10, 10);
    ctx.rect(200, 50, 10, 10)
    ctx.rect(200, 200, 10, 10)
    ctx.fill()
</script>

arcTo 方法的说明：

这个方法可以这样理解。绘制的弧形是由两条切线所决定。

第 1 条切线：起始点和控制点1决定的直线。

第 2 条切线：控制点1 和控制点2决定的直线。

其实绘制的圆弧就是与这两条直线相切的圆弧。

七、添加样式和颜色

1、设置填充颜色

fillStyle = color 设置图形的填充颜色

2、设置轮廓颜色

strokeStyle = color 设置图形轮廓的颜色

备注：⚠️

color 可以是表示 css 颜色值的字符串、渐变对象或者图案对象。
默认情况下，线条和填充颜色都是黑色。
一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

示例：

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
    <script>
        // 获取画布
        let canvas = document.querySelector('.canvas')
        // 创建画笔
        let ctx = canvas.getContext('2d');

        ctx.beginPath(); // 新建路径
        ctx.fillStyle ='#16a085'; // 填充颜色
        ctx.strokeStyle='#ff4757' // 轮廓颜色
        ctx.arc(50, 50, 40, 0, Math.PI /2, true); 
        ctx.closePath(); //闭合路径·
        ctx.stroke(); // 绘制轮廓
        ctx.fill(); // 填充内容

        ctx.beginPath();
        ctx.fillStyle ='#ff4757';
        ctx.strokeStyle='#16a085'
        ctx.arc(50, 50, 40, 0, Math.PI /2, false);
        ctx.closePath(); //闭合路径·
        ctx.stroke();
        ctx.fill();
    </script>

3、透明度

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

4、线宽

线宽。只能是正值。默认是 1.0。

起始点和终点的连线为中心，上下各占线宽的一半。

示例：

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    // 获取画布
    let canvas = document.querySelector('.canvas')
    // 创建画笔
    let ctx = canvas.getContext('2d');
    ctx.globalAlpha = 0.4; //透明度
    ctx.lineWidth = 10; // 设置轮廓宽度，上下各占线宽一半
    ctx.beginPath(); // 新建路径
    ctx.fillStyle = '#16a085'; // 填充颜色
    ctx.strokeStyle = '#ff4757' // 轮廓颜色
    ctx.arc(50, 50, 40, 0, Math.PI * 2, true);
    ctx.closePath(); //闭合路径·
    ctx.stroke(); // 绘制轮廓
    ctx.fill(); // 填充内容
</script>

5、线条末端样式

lineCap = type 线条末端样式

共有三个值：

butt：线段末端以方形结束
round：线段末端以圆形结束
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
    <script>
        // 获取画布
        let canvas = document.querySelector('.canvas');
        // 创建画笔
        let ctx = canvas.getContext('2d');
        // ==========================================
        ctx.lineWidth = 20; //1.线宽
        ctx.beginPath();
        ctx.lineCap = 'butt'; //2. 末端方形结束
        ctx.moveTo(20, 50);
        ctx.lineTo(100, 50);
        ctx.stroke();
        ctx.closePath();
        // =================================
        ctx.lineWidth = 20;
        ctx.beginPath();
        ctx.lineCap = 'round'; // 末端圆形结束
        ctx.moveTo(20, 80);
        ctx.lineTo(100, 80);
        ctx.stroke();
        ctx.closePath();

        // ======================================
        ctx.lineWidth = 20;
        ctx.beginPath();
        ctx.lineCap = 'square'; // 末端方形结束，但增加一个宽度和线段相同，高度是线段厚度一半的矩形区域
        ctx.moveTo(20, 110);
        ctx.lineTo(100, 110);
        ctx.stroke();
        ctx.closePath();
    </script>

6、线条接合处样式

lineJoin = type 同一个 path 内，设定线条与线条间接合处的样式。

共有 3 个值 round, bevel 和 miter：

round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。
bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。
miter(默认) 通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    // 获取画布
    let canvas = document.querySelector('.canvas')
    // 创建画笔
    let ctx = canvas.getContext('2d');
    let lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 20;
    for (let i = 0; i < lineJoin.length; i++) {
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();
    }
</script>

7、虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式。 setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量。

<canvas class="canvas" width="500" height="500">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <script>
        /** @type {HTMLCanvasElement} */
        // 获取画布元素
        let canvas = document.querySelector('.canvas');
        // 创建画笔
        let ctx = canvas.getContext('2d');

        // 设置边框颜色
        ctx.strokeStyle = '#3498db'
        ctx.setLineDash([20, 30]); // [实线长度，间隙宽度]
        ctx.lineDashOffset = 20; // 起始偏移量
        // 绘制一个矩形边框
        ctx.strokeRect(160, 10, 300, 200);
</script>

八、绘制文本

canvas 提供了两种方法来渲染文本:
1. fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
2. strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    function draw() {
        let canvas = document.querySelector('.canvas');
        let ctx = canvas.getContext("2d");
        if (!canvas.getContext) return;
        ctx.font = "100px sans-serif"
        ctx.fillStyle='#ff4757'; // 字体颜色
        ctx.fillText("I Love You", 10, 100);
        ctx.strokeStyle='#ff4757'; // 字体轮廓颜色
        ctx.strokeText("I Love You", 10, 200)
        
    }
    draw();
</script>

给文本添加样式
1. 1. font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。默认的字体是 10px sans-serif。
  2. textAlign = value 文本对齐选项。可选的值包括：start, end, left, right or center。默认值是 start。
  3. textBaseline = value 基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。。
  4. direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

九、绘制图片

注意：考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做，个别浏览器会抛异常。所以我们应该保证在 img 绘制完成之后再 drawImage。

绘图功能

ctx.drawImage(obj, x1, y1) obj 绘制的图片对象 x1, y1 绘制的起点坐标值原图没有被压缩超出画布部分不显示

ctx.drawImage(obj, x1, y1, width, height) width height 绘制图片的大小

ctx.drawImage(obj, sx, sy, sw, sh, x, y, w, h)

sx, sy 从图片的哪个地方开始裁剪

sw, sh 裁剪多大的区域

x, y 从画布的哪个位置开始绘图

w, h 绘制多大的图片

<img src="./img/img.webp" alt=" " width="300">
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext("2d");
    var img = document.querySelector("img");
    img.onload = function () {
        // ctx.drawImage(img, 0, 0); 
        // ctx.drawImage(img, 0, 0, 300, 300)
        ctx.drawImage(img, 200, 200, 200, 200, 100, 100, 200, 200);
    }
</script>

十、状态的保存与恢复

ave() 和 restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数

1、关于 save() ：Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

一个绘画状态包括：

当前应用的变形(即移动，旋转和缩放)
strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation 的值
当前的裁切路径(clipping path)

可以调用任意多次save方法(类似数组的push())

2、关于restore()：每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())

<canvas class="canvas" width="300" height="300"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector('.canvas')
        let ctx = canvas.getContext('2d');

        ctx.fillRect(0, 0, 150, 150) // 创建一个矩形
        ctx.save(); // 保存默认状态
        // 1. 此时是一个黑色矩形

        ctx.fillStyle = 'pink' // 在原有配置基础上对颜色做改变
        ctx.fillRect(15, 15, 120, 120); // 重新绘制一个矩形
        ctx.save(); // 保存当前状态
        // 2. 此时黑色矩形上面放了一个粉色盒子

        ctx.fillStyle = 'green'; //再次改变颜色配置
        ctx.fillRect(30, 30, 90, 90); //使用新的配置绘制一个矩形
        // 3. 此时黑色矩形里面放了一个粉色矩形，粉色矩形上面有一个绿色矩形

        ctx.restore(); // 重新加载之前的颜色状态
        ctx.fillRect(45, 45, 60, 60); // 使用上一次的配置绘制一个矩形

        ctx.restore(); // 加载默认颜色配置
        ctx.fillRect(60, 60, 30, 30); // 使用加载的配置绘制一个矩形
    </script>

十一、变形

translate

translate(x, y) 用来移动 canvas 的原点到指定的位置,x 是左右偏移量，y 是上下偏移量

注意：translate 移动的是 canvas 的坐标原点(坐标变换)。

<canvas class="canvas" width="500" height="500" >暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('.canvas');
    let ctx = canvas.getContext('2d');
    ctx.save(); // 保存坐标原点平移之前的状态
    ctx.translate(100,100); //更改坐标原点
    ctx.strokeRect(0,0,100,100); // 绘制矩形
    ctx.restore() // 恢复最初状态
    ctx.translate(220,220); // 更改坐标
    ctx.fillRect(0,0,100,100)
</script>

rotate

rotate(angle) 旋转坐标轴；这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。

旋转的中心是坐标原点。

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('.canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red' 
    ctx.save();
    ctx.translate(100, 100)  // 更改原点位置
    ctx.rotate(Math.PI / 180 * 45) // 旋转角度
    ctx.fillStyle = 'blue' //矩形颜色
    ctx.fillRect(0, 0, 100, 100) // 绘制填充矩形
    ctx.restore();  // 回复之前保存的状态
    ctx.translate(0, 0);  // 设置远端坐标位置
    ctx.fillRect(0, 0, 50, 50) // 绘制填充矩形
    ctx.restore(); // 回复之前保存的状态
</script>

scale

scale(x,y) 增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大

cale方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('.canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue' //矩形颜色
    ctx.scale(2,2) // 相当于将矩形放大2倍
    // ctx.scale(0.5,0.5) // 相当于将矩形缩小0.5倍
    ctx.fillRect(0, 0, 100, 100) // 绘制填充矩形
</script>

transform

变形矩阵 transform(a, b, c, d, e, f)

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector('.canvas');
        let ctx = canvas.getContext('2d');
        ctx.fillStyle = 'blue'
        ctx.fillRect(0,0,200,100)
        // transform(a, b, c, d, e, f)
        // a,d 代表缩放比例 相当于 scale()
        // e,f 代表移动原点 的偏移量
        // b,c 
        ctx.transform(1,0.5,-0.5,1,30,10)
        ctx.fillStyle = 'pink'
        ctx.fillRect(0,0,200,100)
    </script>

十二、合成

globalCompositeOperation = type

ctx.globalCompositeOperation = "source-over";

source-over 默认新图像会覆盖在原有图像
source-in 出现新图像与原来图像重叠的部分，其他区域都变成透明的
source-out 显示新图像与老图像没有重叠的部分，其余部分全部透明
source-atop 新图像仅仅显示与老图像重叠区域,老图像仍然可以显示
destination-over 新图像会在老图像的下面
destination-in 新老图像重叠部分的老图像被显示，其他区域全部透明
destination-out 显示老图像与新图像没有重叠的部分
destination-atop 老图像仅仅仅仅显示重叠部分，新图像会显示在老图像的下面
lighter 新老图像都显示，但是重叠区域的颜色做加处理
darken 保留重叠部分最黑的像素。(每个颜色位进行比较，得到最小的)
lighten 保证重叠部分最量的像素。(每个颜色位进行比较，得到最大的)
xor 重叠部分会变成透明
copy 只有新图像会被保留，其余的全部被清除(边透明)

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('.canvas');
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = 'blue'
    ctx.fillRect(0,0,200,200)
    ctx.globalCompositeOperation = "xor"; //全局合成操作
    ctx.fillStyle = 'red'
    ctx.fillRect(100,100,200,200)
</script>

十三、裁剪路径

clip()

把已经创建的路径转换成裁剪路径。
裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏。
**注意：**clip() 只能遮罩在这个方法调用之后绘制的图像，如果是 clip() 方法调用之前绘制的图像，则无法实现遮罩。

<canvas class="canvas" width="500" height="500">暂不支持</canvas>
<script>
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('.canvas');
    let ctx = canvas.getContext('2d');
    // clip()
    ctx.beginPath();
    ctx.arc(20,20,100,0,Math.PI *2);
    ctx.clip() // 按照 arc的路径进行裁剪
    ctx.fillStyle = 'pink';
    ctx.fillRect(20,20,100,100)
</script>

十四、动画

动画的基本步骤

清空 canvas 再绘制每一帧动画之前，需要清空所有。清空所有最简单的做法就是 clearRect() 方法。
保存 canvas 状态 如果在绘制的过程中会更改 canvas 的状态(颜色、移动了坐标原点等),又在绘制每一帧时都是原始状态的话，则最好保存下 canvas 的状态
绘制动画图形这一步才是真正的绘制动画帧
恢复 canvas 状态如果你前面保存了 canvas 状态，则应该在绘制完成一帧之后恢复 canvas 状态

定时执行重绘的三个方法：

setInterval()
setTimeout()
requestAnimationFrame()

ZikM_0221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas学习与使用

Canvas学习与使用<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。<canvas> 只有两个可选的属性 width、heigth 属性，默认 width为300、height 为 150，单位都是 px一、绘制形状的原理栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位；图中蓝色方形
复制链接

扫一扫