关于HTML5清除canvas画布问题 10
从body开始复制，清除画布之后把鼠标移上还是出现原图，求具体方法<body><canvasid="bo"width="500"height="500">您的浏览器不支持...
从body开始复制，清除画布之后把鼠标移上还是出现原图，求具体方法
<body>
<canvas id="bo" width="500" height="500">您的浏览器不支持次应用，请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script>
var canvas = document.getElementById('bo');
var pic=canvas.getContext("2d");
pic.lineWidth=5;
pic.strokeStyle="red";
var con=false;
$("#bo").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
con=true;
pic.moveTo(mouseX,mouseY);
});
$("#bo").mouseup(function(e){
con=false;
})
$("#bo").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(con)
pic.lineTo(mouseX,mouseY);
pic.stroke();
})
function clea(){
pic.clearRect(0,0,500,500);
}
</script> 展开
<body>
<canvas id="bo" width="500" height="500">您的浏览器不支持次应用，请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script>
var canvas = document.getElementById('bo');
var pic=canvas.getContext("2d");
pic.lineWidth=5;
pic.strokeStyle="red";
var con=false;
$("#bo").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
con=true;
pic.moveTo(mouseX,mouseY);
});
$("#bo").mouseup(function(e){
con=false;
})
$("#bo").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(con)
pic.lineTo(mouseX,mouseY);
pic.stroke();
})
function clea(){
pic.clearRect(0,0,500,500);
}
</script> 展开
3个回答
展开全部
//函数clea修改下，加一句话就行
//canvas会记录你moveTo的点，所以清空的时候要用beginPath来清空下路径
function clea(){
pic.beginPath();
pic.clearRect(0,0,500,500);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function clea(){
var canvas = document.getElementById('bo');
var context=canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
context.beginPath();
};
/*试试这个效果，希望能帮到你*/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是啊，好奇怪呀。。。为什么呢。。。不过倒是可以投机取巧：
<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的浏览器不支持次应用，请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
var canvasInit = function(){
var canvas = document.getElementById('bo');
var pic=canvas.getContext("2d");
pic.lineWidth=5;
pic.strokeStyle="red";
var con=false;
$("#bo").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
con=true;
pic.moveTo(mouseX,mouseY);
});
$("#bo").mouseup(function(e){
con=false;
})
$("#bo").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(con)
pic.lineTo(mouseX,mouseY);
pic.stroke();
})
}
canvasInit();
function clea(){
var tmp = $('#bo').clone();
$('#bo').remove();
$('body').prepend(tmp);
canvasInit();
//pic.clearRect(0,0,500,500);
}
</script>
<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的浏览器不支持次应用，请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
var canvasInit = function(){
var canvas = document.getElementById('bo');
var pic=canvas.getContext("2d");
pic.lineWidth=5;
pic.strokeStyle="red";
var con=false;
$("#bo").mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
con=true;
pic.moveTo(mouseX,mouseY);
});
$("#bo").mouseup(function(e){
con=false;
})
$("#bo").mousemove(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
if(con)
pic.lineTo(mouseX,mouseY);
pic.stroke();
})
}
canvasInit();
function clea(){
var tmp = $('#bo').clone();
$('#bo').remove();
$('body').prepend(tmp);
canvasInit();
//pic.clearRect(0,0,500,500);
}
</script>
更多追问追答
追问
可是这样的话，清空了之后就没法再画了....
追答
可以啊，我都试过了。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
