笔记-Canvas-画笔的存储与恢复机制学习

最新推荐文章于 2024-11-16 21:44:34 发布
原创 最新推荐文章于 2024-11-16 21:44:34 发布 · 488 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#canvas画笔 #save #restore

本文探讨了Canvas中save()和restore()方法在画笔状态管理中的作用。通过示例说明save()用于保存当前画笔状态，restore()恢复到保存的状态，二者结合可以避免画笔全局污染。同时，解释了画笔状态实际上是一个栈，遵循先进后出的原则，save()对应push()，restore()对应pop()，并且每次restore()只能恢复最近一次save()的状态。

save()和restore()

1.画笔的两种状态方法,保存和恢复

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
    }
)();

这里是画完一条红线之后继续补充了一条垂直线,虽然save()过了,但是描边之后,颜色依旧,这样其实也能看出来,画笔也是有全局污染的所以我们可以把不同的图像放到不同的函数中,减少画笔的全局污染.

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        ctx.lineWidth='4';
        ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
    }
)();

这里我忽视了beginPath()的重要性,当我第二次描边的时候,画笔讲三点两线都进行了绘制,使得第一条线变成了红色和绿色的混色
代码结果
所以重新增加ctx.beginPath()之后,

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //开始新的绘画路径
        ctx.beginPath();
        //起始点
        ctx.moveTo(60,20);
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        // ctx.lineWidth='4';
        // ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
    }
)();

save()之后同样还是2px红线,然后取消对新画笔代码部分的注释之后,就能得到一条4px的绿色直线.

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //开始新的绘画路径
        ctx.beginPath();
        //起始点
        ctx.moveTo(60,20);
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        ctx.lineWidth='4';
        ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
        //第三条直线开始绘制
        ctx.beginPath();
        //恢复之前保存的画笔样式
        ctx.restore();
        //起点
        ctx.moveTo(60,60);
        //终点
        ctx.lineTo(20,60);
        //描边
        ctx.stroke();
    }
)();

我在路径一开始就恢复了之前保存的画笔状态,所以得到了一条2px的红色直线
尝试着注释掉恢复方法,可以看到直线变成了之前的4px绿色直线,
然后再执行一次画笔样式的修改和恢复之后

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //开始新的绘画路径
        ctx.beginPath();
        //起始点
        ctx.moveTo(60,20);
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        ctx.lineWidth='4';
        ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
        //第三条直线开始绘制
        ctx.beginPath();
        //恢复之前保存的画笔样式
        //第一次恢复
        ctx.restore();
        //起点
        ctx.moveTo(60,60);
        //终点
        ctx.lineTo(20,60);
        //描边
        ctx.stroke();
        //第四条直线开始绘制
        ctx.beginPath();
        //先修改一下样式,如果能恢复,则会被顶替
        ctx.lineWidth="10";
        ctx.strokeStyle="#00f";
        //恢复之前保存的画笔样式
        //第二次恢复
        ctx.restore();
        //起点
        ctx.moveTo(20,60);
        //终点
        ctx.lineTo(20,20);
        //描边
        ctx.stroke();

    }
)();

我们得到了一条新的10px的蓝色直线,然后我们在第三条结束之后,执行ctx.save(),可以发现直线又成了2px的红色.
所以我们可知恢复操作只能恢复一次,然后我们来尝试save(),
根据恢复的结论,我们可以先反推save也只能保存一种,最新的会顶替之前的,可以看成是只有一个位置的队列,有新人来了,旧的人就离开了队伍

(
    ()=>{
        //获取画布元素
        let canvas = document.getElementById('demo2');
        //获取画笔
        let ctx = canvas.getContext('2d');
        //开始绘画路径
        ctx.beginPath();
        //2px的红色直线
        ctx.lineWidth='2';
        ctx.strokeStyle="#f00";
        //长40,y轴上20的水平直线
        ctx.moveTo(20,20);
        ctx.lineTo(60,20);
        //描边
        ctx.stroke();
        //保存画笔的状态
        ctx.save();
        //开始新的绘画路径
        ctx.beginPath();
        //起始点
        ctx.moveTo(60,20);
        //重新定义画笔的宽度和颜色
        //4px的宽度和绿色
        ctx.lineWidth='4';
        ctx.strokeStyle="#0f0";
        //然后画一条线
        ctx.lineTo(60,60);    
        //描边
        ctx.stroke();
        ctx.save();
        //第三条直线开始绘制
        ctx.beginPath();
        //恢复之前保存的画笔样式
        //第一次恢复
        ctx.restore();
        //起点
        ctx.moveTo(60,60);
        //终点
        ctx.lineTo(20,60);
        //描边
        ctx.stroke();
        //第四条直线开始绘制
        ctx.beginPath();
        //先修改一下样式,如果能恢复,则会被顶替
        ctx.lineWidth="10";
        ctx.strokeStyle="#00f";
        //恢复之前保存的画笔样式
        //第二次恢复
        ctx.restore();
        //起点
        ctx.moveTo(20,60);
        //终点
        ctx.lineTo(20,20);
        //描边
        ctx.stroke();
    }
)();

…结果有点不尽如人意,画笔的状态是一个栈,先进后出,我分别对第一二条线的画笔做了保存,然后读取了两次恢复,第三条线是绿色的(与第二条线一致),第四条线是红色的(与第一条线一致);
这个换成js的话可以理解为这是一个画笔状态的数据,save()执行的就是push()操作,restore()执行的就是pop()操作,所以只有一次save的时候restore只能执行一次,因为第二次pop()只能获得undefined.

最后我们对这几条直线进行一个自调用的闭包封装;
封装
看起来方便了一点…

vue2 - 详细实现网页用鼠标进行涂鸦写字签名画板功能，在画布上实现绘制涂抹并且流畅书写，可调整画笔颜色/粗细大小/笔形状，某个div区域或页面全屏生效、键盘快捷键撤销/恢复等（示例源码，复制运行）
高级前端工程师
12-26 6051
vue2，nuxt2，涂鸦画板，vue如何实现涂鸦功能，画板画布自由绘制，canvas简单的实现画笔功能，vue用canvas实现画笔画笔颜色粗细，vue 使用 canvas 实现手写电子签名，canvas实现画板功能，包括画笔颜色，粗细，圆滑曲线，橡皮擦，撤回上一步，清空画板，画笔颜色、粗细，记录撤回，vue+canvas实现手写签字画板，vue移动端或web端手写签，电子画板涂鸦，Html5 canvas 简单画布画板涂鸦例子，vue如何实现涂鸦功能，创建画布元素，详细代码，手机网页，pc端页面，前端c
python3 pyside6图形库学习笔记及实践（四）
qq_27489877的博客
08-05 1172
本系列文章为b站PySide6教程以及官方文档的学习笔记。本文内容包括列表控件、图形视图框架。
如何用localstorage保存画板中画笔路径
快乐的温大博客
10-12 400
小时候买小画板玩儿，现在自己也可以用代码实现。但是一开始保存不了所画的路径数据，经过自学localstorage和canvas后可以实现这种效果，为此跟大家分享一下。 画板 *{margin: 0;padding: 0;} 重新画 (function () { var mycanvas=document.get
canvas画布
HBF__cg的博客
02-06 589
canvas的基本使用 canvas是一个标签，必须设置宽高，画布是canvas的属性 在绘制之前，先通过标签获取画布，通过画布调用绘制方法 获取画布：canvas.getContext("2d") ...
canvas之save、restore、restoreToCount详解
记录与收集
01-29 1623
Canvas（画布） save和restore保存和恢复对象都是Canvas 。不要误以为是画图，画到一半，保存，再画的意思，它的作用是保存画布的设置信息。例如canvas.translate，canvas.rotate()之类的。Canvas的方法 Canvassave，把Canvas的信息保存，压入栈。 Canvasrestore ，恢复到最近的一个保存点。出栈。 restoreToCount恢复到特定的保存点。 解释 Canvas的save()、restore()这两...
带你快速玩转canvas（7）保存画笔状态和恢复画笔状态
qq20004604的博客
12-21 2790
9. 保存画笔状态和恢复画笔状态解释：1. 简单来说，就是保存当前ctx设置的各种属性，在需要时，可以恢复到保存时的属性； 2. 保存api是无返回值的，这说明不能保存多种不同的状态； 3. 只能恢复一次，如果恢复后还需要保存，则需要再次调用保存的api； ctx.save()1. 保存的api，无返回值； 2. 保存状态只能恢复一次； 3. 也可以说是保存ctx的上下文环境； 4. 根据MDN的说
Canvas——画笔状态的保存与恢复
mantou_riji的博客
01-17 557
/ 获取画笔(这里是2d画笔)
Android高级应用源码-橡皮擦与画笔的demo.zip
12-17
在Android开发中，实现橡皮擦与画笔功能是创建绘图应用或手写笔记类应用的关键部分。这个"Android高级应用源码-橡皮擦与画笔的demo.zip"包含了一个名为DrawDemo01的项目，它为开发者提供了一个实践橡皮擦和画笔功能...
安卓自定义View进阶-Canvas之图片文字
热门推荐
GcsSloop
02-12 1万+
在上一篇文章 Canvas 之画布操作中我们了解了画布的一些基本操作方法，本次了解一些绘制图片文字相关的内容。如果你对前几篇文章讲述的内容熟练掌握的话，那么恭喜你，本篇结束之后，大部分的自定义 View 已经难不倒你了，当然了，这并不是终点，接下来还会有更加炫酷的技能。
vue3中使用 HTML5 Canvas 做一个案例总结笔记
最新发布
weixin_43483590的博客
11-16 1445
​ 这篇文章记录了在vue3中如何使用HTML5 Canvas做一个时钟的案例, 当然主要是HTML5 Canvas, 如何需要了解更多关于vue的知识前面也已经写过好几篇了,辛苦翻一下的..
uniapp vue3 使用canvas绘制图片
初遇你时动了情
07-29 1358
需要注意如果使用popup这种控制显示隐藏的话，canvas只有第一次才会显示，第二次popup显示后canvas不显示了解决方案使用v-if控制canvas显示。
Canvas学习：save()和restore()
wulixiaoxiao1的博客
03-18 2522
本来今天想开始学习怎么在Canvas中绘制矩形。但昨天发朋友圈，聊到Canvas。有网友提醒我将所有绘制的东西放在ctx.save()和ctx.restore()，能起到保存绘制状态和防止污染状态栈。养成一个良好的习惯。 此时一脸蒙逼！因为我并不知道这两个东东是什么意思，怎么使用？ 后来翻了书，也只是提到了在Canvas中有save()和restore()两个方法，它们都是属于Canv
canvas 实现画板（三）（保留之前画的矩阵）(2021/5/11)
weixin_41033048的博客
05-12 363
实现思路：把所有的画面内容保存起来，然后清除页面，再重新描绘 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt.
vue3中canvas使用成组件不展示
m0_61848095的博客
01-10 922
修改this的箭头指向。
发现一个会导致HTML5 canvas的save和restore失效的情况
12-17 753
今天写代码出了一点bug，结果是canvas的save和restore失效。 [code="javascript"] ctx.save(); ctx.translate(pos_.x(), pos_.y()); ctx.rotate(angle_); ctx.drawImage(image_, -width_ / 2, -height_...
canvas滚动 vue_Vue + Canvas项目总结__Vue.js__Canvas
weixin_39631899的博客
12-19 779
演示地址演示地址PC端的项目啦，需要在电脑上看哦,而且最好用Chrome打开引言这是今年三月份帮学长做的一个项目，陪我度过了两个月的春招生活，整个项目做下来也是学到了很多东西，下面就开始我的分享啦，包括一些知识点总结和遇到的坑，dalao莫笑哈。项目概述主要功能如上图，左边是图形工具栏，右边是canvas，上面是清除、删除、旋转、切换格子背景、保存并下载图片的操作。代码是基于vue-cli码的，所...
canvas之刮刮乐
WHTGS的博客
04-04 337
利用canvas简单实现一个在线刮奖的模拟效果。主要利用了canvas中的save() restore() 以及裁切clip() 实现思路： 给画布填充一个背景色，遮住图片，达到一个蒙层效果，然后利用clip不断去裁切画布，并且使用save 和 restore去保存记录每一次的结果，最终就可以实现这个效果啦 <canvas width="400" height="200"></c...
Android绘图之Canvas状态保存和恢复（7）
lidongxiu0714
12-21 7968
1 Canvas 状态保存和恢复 前面讲canvas概念理解时 已经讲解了save和savelayer，saveLayerAlpha函数，这里进行canvas状态保存和恢复的详细讲解。 Canvas 调用了translate,scale,rotate,skew,concat or clipRect等变换后，后续的操作都是基于变换后的Canvas，都会受到影响，对于后续的操作很不方便。 Canvas...
canvas重置scale设置
gaidandan的专栏
10-29 2006
canvas.width = canvas.width // or canvas.height = canvas.height 当我们重新设置canvas的宽（高也一样）的时候，不仅会清空canvas的画布内容，同时还会把绘图状态重置到最原始的状态，原始状态下画笔的缩放比例是1，缩放比例值会被重置为1，因而导致绘制效果错乱。 ...
J2ME API 学习笔记：核心类与异常处理
8. **其他类**：如Hashtable（键值对存储）、Font（字体管理）、Graphics（用于在Canvas上绘图的虚拟画笔）、Control 和 Controllable（控制和交互对象）以及CustomItem（自定义UI元素）等。 这些是J2ME API的核心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值