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);
相关推荐
一丝晨光29 分钟前
数值溢出保护?数值溢出应该是多少?Swift如何让整数计算溢出不抛出异常?类型最大值和最小值?
java·javascript·c++·rust·go·c·swift
小堃学编程41 分钟前
前端学习(3)—— CSS实现热搜榜
前端·学习
Wannaer1 小时前
从 Vue3 回望 Vue2:响应式的内核革命
前端·javascript·vue.js
不灭锦鲤1 小时前
xss-labs靶场基础8-10关(记录学习)
前端·学习·xss
Bl_a_ck1 小时前
--openssl-legacy-provider is not allowed in NODE_OPTIONS 报错的处理方式
开发语言·前端·web安全·网络安全·前端框架·ssl
懒羊羊我小弟1 小时前
手写符合Promise/A+规范的Promise类
前端·javascript
互联网搬砖老肖1 小时前
Web 架构之负载均衡会话保持
前端·架构·负载均衡
赵大仁1 小时前
React vs Vue:点击外部事件处理的对比与实现
javascript·vue.js·react.js
肥肥呀呀呀3 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter
Zero1017133 小时前
【React的useMemo钩子详解】
前端·react.js·前端框架