HTML按键删除旧画布
当我点击“空格”时，下面的代码应该会使画布出现。每次我点击“空间”，它就会删除旧的画布并绘制一个新的画布（位置在每次点击时从6种不同的可能性中选择） 我对代码有一个问题，因为它不会删除旧画布，并继续一个接一个地绘制它们。 我怎样才能解决这个问题HTML按键删除旧画布,html,canvas,keydown,Html,Canvas,Keydown,当我点击“空格”时，下面的代码应该会使画布出现。每次我点击“空间”，它就会删除旧的画布并绘制一个新的画布（位置在每次点击时从6种不同的可能性中选择） 我对代码有一个问题，因为它不会删除旧画布，并继续一个接一个地绘制它们。 我怎样才能解决这个问题 <html> <head> </head> <link rel="stylesheet" href="cssFiles/blackBackground.css"> <script
<html>
<head>
</head>
<link rel="stylesheet" href="cssFiles/blackBackground.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>
<script>
var circle = [[-350,-300],[-350,0],[-350,300],[350,-300],[350,0],[350,300]];
$(document).ready(function() {
document.addEventListener("keydown", function (e) {
if (e.keyCode === 32) { // space is pressed
var idx_circle = Math.floor(Math.random() * 6)
drawCircle(circle[idx_circle][0],circle[idx_circle][1],2.5,1);
}
});
})
function drawCircle(centerX,centerY, scaleX, scaleY){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 120;
// save state
context.save();
// translate context
context.translate(canvas.width/2 , canvas.height/2 );
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'white';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'white';
context.stroke();
}
</script>
</body>
</html>
变量圆=[-350，-300]，-350,0]，-350300]，[350，-300]，[350,0]，[350300]；
$（文档）.ready（函数（）{
文件.添加的文件列表器（“键控”，功能（e）{
如果（e.keyCode==32）{//按下空格
var idx_circle=Math.floor（Math.random（）*6）
拉丝圈（圈[idx_圈][0]，圈[idx_圈][1]，2.5,1）；
}
});
})
函数drawCircle（centerX、centerY、scaleX、scaleY）{
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var半径=120；
//拯救国家
context.save（）；
//翻译语境
context.translate（canvas.width/2，canvas.height/2）；
//画一个将被拉伸成椭圆形的圆圈
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
//恢复到原始状态
restore（）；
//应用样式
context.fillStyle='white'；
context.fill（）；
context.lineWidth=20；
context.strokeStyle='white'；
stroke（）；
}
context.clearRect(0, 0, canvas.width, canvas.height);
var循环=[
[-350, -300],
[-350, 0],
[-350, 300],
[350, -300],
[350, 0],
[350, 300]
];
文件.添加的文件列表器（“键控”，功能（e）{
如果（e.keyCode==32）{//按下空格
var idx_circle=Math.floor（Math.random（）*6）；
drawCircle（圆圈[idx_circle][0]，圆圈[idx_circle][1]，2.5,1）；
}
});
函数drawCircle（centerX、centerY、scaleX、scaleY）{
var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var半径=120；
//透明帆布
clearRect（0，0，canvas.width，canvas.height）；
//拯救国家
context.save（）；
//翻译语境
context.translate（canvas.width/2，canvas.height/2）；
//画一个将被拉伸成椭圆形的圆圈
context.beginPath（）；
弧（centerX，centerY，半径，0，2*Math.PI，false）；
//应用样式
context.fillStyle='red'；
context.fill（）；
context.lineWidth=20；
context.strokeStyle='black'；
stroke（）；
//恢复到原始状态
restore（）；
}