清除画布JavaScript
Clear canvas JavaScript
本文关键字:JavaScript 清除 更新时间:2023-09-26
我正在尝试清除画布。我试着把小路封闭起来,但没有改变任何东西。此外,我也不太确定ctxBg.close();在正确的地方
非常感谢。
function drawGrid () {
drawGrid();
ctxBg.clearRect(0, 0, canvas.width, canvas.height);
function drawGrid () {
for (var i = 75; i <= canvasWidth-25; i+= 25) {
ctxBg.beginPath();
ctxBg.moveTo(-25 + i,55);
ctxBg.lineTo(-25 + i, canvasHeight - 55);
ctxBg.stroke();
}
for (var i = 25; i <= canvasHeight -75; i+= 25) {
ctxBg.beginPath();
ctxBg.moveTo(55,25 + i);
ctxBg.lineTo(canvasWidth-55, 25 + i);
ctxBg.stroke();
}ctxBg.close();
}
drawGrid()
函数有两个定义:
function drawGrid () {
...
function drawGrid () {
你只能有一个。接下来,上下文上没有close()
方法,只有closePath()
。然而,这在这里没有用处。closePath不会"结束"路径,而是连接路径中的第一个点和最后一个点,因此路径形状是闭合的。
当然,这对线条没有用处,而且在任何情况下,都必须在stroke()之前调用它。
第三,您正在(尝试)渲染网格,然后立即将其清除。这不会在画布上显示任何内容。您需要将这些操作分开。
这是一个建议的解决方案。两个功能,一个绘制网格,一个清除网格:
var canvas = document.querySelector("canvas"),
canvasWidth = canvas.width, canvasHeight = canvas.height,
ctxBg = canvas.getContext("2d");
ctxBg.translate(0.5, 0.5); // just to make the lines sharper
function drawGrid() {
ctxBg.beginPath(); // this can be placed here
for (var i = 75; i <= canvasWidth - 25; i += 25) {
ctxBg.moveTo(-25 + i, 55);
ctxBg.lineTo(-25 + i, canvasHeight - 55);
}
for (var i = 25; i <= canvasHeight - 75; i += 25) {
ctxBg.moveTo(55, 25 + i);
ctxBg.lineTo(canvasWidth - 55, 25 + i);
}
ctxBg.stroke(); // stroke all at once
// remove button code (ref. comments)
var button = document.querySelector("button");
button.parentNode.removeChild(button);
}
function clearGrid() {
ctxBg.clearRect(0, 0, canvas.width, canvas.height);
}
<button onclick="drawGrid()">Grid</button>
<button onclick="clearGrid()">Clear</button><br>
<canvas></canvas>
更新:如果需要删除的按钮是上面示例中的HTML按钮,则使用样式将其删除
// assumes the button element is stored in variable button:
button.style.display = "none";
或完全使用其parentNode
和removeChild()
:
button.parentNode.removeChild(button);
ctxBg.clearRect(0,0,canvas.width,canvas.height);
这样可以清除画布。
相关文章:
- 如何在Microsoft VirtualEarth 6.3中使用纯javascript清除整个形状层
- Javascript清除缓存以清除基本身份验证凭据
- 使用javascript清除Asp.NET FreeTextBox(RTF文本框)
- Javascript - 清除元素的属性
- 通过JavaScript清除浏览器
- 通过javascript清除并更新html5应用程序缓存
- 在webview-iphone中通过javascript清除cookie
- 使用JavaScript清除IE11中的文本框选择
- 如何在启动Offline应用程序时使用javascript清除缓存
- 如何使用JavaScript清除浏览历史记录
- 如何使用Javascript清除后退按钮历史记录
- 如何使用Javascript清除基于复选框的文本框
- 通过 JavaScript 清除 Google Maps API 标记
- 尝试使用 JavaScript 清除文本字段
- Vaadin @Javascript :清除更新的JS文件的缓存
- 如何使用 JavaScript 清除身份验证缓存
- 如何使用 JavaScript 清除 cookie 内容
- 如何强制浏览器/javascript 清除/忽略缓存文件
- Javascript 清除框架
- JavaScript 清除循环中的超时