39,084
社区成员
发帖
与我相关
我的任务
分享针对canvas clearrect清除不掉的解决方法（有缺点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.canvas{
/*background:lightgray*/
width:500px;
height:500px;
}
</style>
<script>
window.onload=function(){
var container=document.getElementById('cav');
var canvas=document.createElement("canvas");
//设置canvas的width/height属性，乘以二以防止像素点模糊问题
canvas.width=container.clientWidth*2;
canvas.height=container.clientHeight*2;
//设置realCanvas的样式width/height属性，填充满父元素
canvas.style.width=container.clientWidth+"px";
canvas.style.height=container.clientHeight+"px";
container.appendChild(canvas);
var ctx=canvas.getContext('2d');
ctx.translate(230,230);
//canvas.style.background='lightgray';
var num=0;
setInterval(function(){
num+=1;
drawArc(container,canvas,num);
//从内存中删除节点，进行擦查
container.removeChild(canvas);
container.appendChild(canvas);
},100);
}
function drawArc(container,canvas,num){
//通常我们还会在此执行下一步绘图操作
//开始绘制
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,container.clientWidth,container.clientWidth);
ctx.save();
ctx.translate(num,num);
ctx.beginPath();
ctx.fillStyle='red';
ctx.arc(0,0,15,0,2*Math.PI);
ctx.fill();
ctx.restore();
}
</script>
</head>
<body>
<div id="cav" class="canvas"></div>
</body>
</html>起始位置始终会存在一个扇形去不掉，求大神帮忙
...全文
请发表友善的回复…
发表回复
