HTML5画布清理，重绘，旧的线条也会出现 10
<!DOCTYPEhtml><html><head><title>HTLM5</title><metacharset="utf-8"/></head><body><br/...
<!DOCTYPE html>
<html>
<head>
<title>HTLM5</title>
<meta charset="utf-8"/>
</head>
<body>
<br/>
<canvas width="500px" height="500px" id="can1" style="border:1px solid red"></canvas>
<br/>
<div onclick="test()">test</div>
<div onclick="test2()">test2</div>
<div onclick="Clear()">Clear</div>
<script type="text/javascript">
var canvas=document.getElementById('can1');
var cxt=canvas.getContext("2d");
cxt.moveTo(30,0);
cxt.lineTo(30,40);
cxt.stroke();
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="#FF0000";
cxt.fill();
function Coord(x,y){
this.x=x;
this.y=y;
}
function test(){
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
}
function test2(){
cxt.moveTo(100,0);
cxt.lineTo(100,100);
cxt.stroke();
}
function Clear(){
cxt.clearRect(0,0,canvas.width,canvas.height);
}
</script>
</body>
</html>
点击Clear 再点test、test1画线，旧的线也会出现 展开
<html>
<head>
<title>HTLM5</title>
<meta charset="utf-8"/>
</head>
<body>
<br/>
<canvas width="500px" height="500px" id="can1" style="border:1px solid red"></canvas>
<br/>
<div onclick="test()">test</div>
<div onclick="test2()">test2</div>
<div onclick="Clear()">Clear</div>
<script type="text/javascript">
var canvas=document.getElementById('can1');
var cxt=canvas.getContext("2d");
cxt.moveTo(30,0);
cxt.lineTo(30,40);
cxt.stroke();
cxt.beginPath();
cxt.arc(100,100,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="#FF0000";
cxt.fill();
function Coord(x,y){
this.x=x;
this.y=y;
}
function test(){
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
}
function test2(){
cxt.moveTo(100,0);
cxt.lineTo(100,100);
cxt.stroke();
}
function Clear(){
cxt.clearRect(0,0,canvas.width,canvas.height);
}
</script>
</body>
</html>
点击Clear 再点test、test1画线，旧的线也会出现 展开
1个回答
展开全部
test和test2都需要重启一个路径，不然还是原来的，路径信息会先保存在内存里面，在调用stroke或者fill的时候，才会真正的绘制出来。因此，这两个方法都加上beginPath和closePath就行了，即
function test(){
cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(100,100);
cxt.stroke();
cxt.closePath();
}note. 一般修改canvas属性的时候，如fillStyle，先要save，绘制完成后再restore还原到初始状态，不然会影响到下一次的绘制。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
博思AIPPT是基于ai制作PPT的智能在线工具，它提供了4种AI制作PPT的方式，包括AI生成大纲、AI直接生成PPT、文本生成PPT、AI提炼文档生成PPT，一站式集成多种AI生成PPT的方式，可满足办公用户的不同需求和使用场景。ai生...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
