单击按钮时如何清除画布[重复]
Posted
技术标签:
【中文标题】单击按钮时如何清除画布[重复]【英文标题】：How can I clear the canvas when I click a button [duplicate] 【发布时间】：2017-05-17 17:28:49 【问题描述】：如何在单击按钮时清除画布
我试过了：
cx.fillRect()
但是： 它对我不起作用，我只需要重新加载画布而不是页面。
这是我的代码：
var canvas = document.getElementById('canvas');
var cx = canvas.getContext('2d');
canvas.height = 300;
canvas.width = 600;
function branch(length, angle, scale)
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
cx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
cx.fill();
cx.fillRect(0, 0, 1, length);
if (length < 8) return;
cx.save();
cx.translate(0, length);
cx.rotate(-angle);
branch(length * scale, angle, scale);
cx.rotate(2 * angle);
branch(length * scale, angle, scale);
cx.restore();
cx.translate(300, 2);
function change()
a = Math.random();
branch(60, a, 0.8);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*
margin: 0;
padding: 0;
canvas
margin: 100px auto;
position: absolute;
left: 0;right: 0;
top: 0;bottom: 0;
border: 1px solid #ccc;
background-color: #ECEFF1;
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<button onclick="change()">Change</button>
<script src="main.js"></script>
</body>
</html>这是我运行代码并单击按钮时的屏幕：
here
【问题讨论】：
应该关闭：在谷歌搜索canvas clear 给了我答案的 SO 页面。
【参考方案1】：
你可以试试：
cx.clearRect(0, 0, 300, 600)
【讨论】：
通常你应该在你的代码中发布一个关于它是如何工作的解释。这有助于新开发人员了解您在做什么。以上是关于单击按钮时如何清除画布[重复]的主要内容，如果未能解决你的问题，请参考以下文章