Canvas清除画布

一、简单填充

使用白色背景色简单地填充整个画布,可以清除当前内容。

复制代码
var context= getContext("2d");
context.fillStyle = 'white';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);

二、重置画布区域

当画布的宽或高被重置时,当前画布内容就会被移除。

复制代码
 var width = theCanvas.width;
 var height = theCanvas.height;
 theCanvas.width = width;
 theCanvas.height = height;

三、使用clearRect函数

clearRect() 函数指定起始点的x, y 位置以及宽度和高度来清除画布。

复制代码
var context= getContext("2d");
var width = theCanvas.width;
var height = theCanvas.height;
context.clearRect(0, 0, width, height);
相关推荐
gCode Teacher 格码致知几秒前
前端教学8:提高 CSS 选择器的优先级,有哪些方法?
前端·css·html5
u0111026756 分钟前
Canvas 导出 PNG 时 quality 参数为什么不起作用
前端·javascript·vue.js
众链网络12 分钟前
年卡跨淡旺季的有效期模型:不可用日期、次数与顺延规则
java·前端·数据库
2601_9498477516 分钟前
jose 跨端三方库仓颉适配全流程
前端·javascript·flutter
CappuccinoRose26 分钟前
滚动交互体系
前端·javascript·交互·html5·1024程序员节
时空节拍AI数字人30 分钟前
博物馆数字人讲解系统设计:知识库 schema、展项联动协议与时序控制
java·服务器·前端·人工智能·ai·语音识别
吴建旭 智宅焕30 分钟前
智能家居全国交付中前端工具与后端基础设施的系统集成架构:报价入口与交付兜底的闭环设计
前端·架构·智能家居
开开心心就好1 小时前
电脑小说阅读器,支持朗读和自定义皮肤
服务器·开发语言·javascript·算法·pdf·c#·音视频
夏天要喝冰可乐1 小时前
Codex 写 Three.js 大屏实录:800 行代码,和一条画反的弧线
前端·aigc
欣欣之王来了1 小时前
v-bind语法糖::属性名的简写方式
前端·学习·架构·项目·vue3教程