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);
相关推荐
小二·25 分钟前
Python Web 开发进阶实战:无障碍深度集成 —— 构建真正包容的 Flask + Vue 应用
前端·python·flask
niucloud-admin8 小时前
web 端前端
前端
摘星编程11 小时前
React Native for OpenHarmony 实战:Linking 链接处理详解
javascript·react native·react.js
胖者是谁11 小时前
EasyPlayerPro的使用方法
前端·javascript·css
EndingCoder12 小时前
索引类型和 keyof 操作符
linux·运维·前端·javascript·ubuntu·typescript
liux352812 小时前
Web集群管理实战指南:从架构到运维
运维·前端·架构
沛沛老爹12 小时前
Web转AI架构篇 Agent Skills vs MCP:工具箱与标准接口的本质区别
java·开发语言·前端·人工智能·架构·企业开发
摘星编程12 小时前
React Native for OpenHarmony 实战:ImageBackground 背景图片详解
javascript·react native·react.js
小光学长12 小时前
基于Web的长江游轮公共服务系统j225o57w(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库
摘星编程13 小时前
React Native for OpenHarmony 实战:Alert 警告提示详解
javascript·react native·react.js