关于HTML5清除canvas画布问题

从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>

//函数clea修改下,加一句话就行
//canvas会记录你moveTo的点,所以清空的时候要用beginPath来清空下路径
function clea(){
    pic.beginPath();
    pic.clearRect(0,0,500,500);
}

温馨提示:答案为网友推荐,仅供参考
第1个回答  2014-10-16
function clea(){
    var canvas = document.getElementById('bo');
    var context=canvas.getContext("2d");
    context.clearRect(0,0,canvas.width,canvas.height);
    context.beginPath();
    };
/*试试这个效果,希望能帮到你*/

第2个回答  推荐于2016-02-17
是啊,好奇怪呀。。。为什么呢。。。不过倒是可以投机取巧:

<body>
<canvas id="bo" width="500" height="500" style="border:1px solid">您的浏览器不支持次应用,请更新浏览器</canvas>
<input type="button" onclick="clea()" value="清空" />
<script src=""></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>追问

可是这样的话,清空了之后就没法再画了....

追答

可以啊,我都试过了。

追问

哥儿们,我想了个好办法..用 window.location.reload()........这个办法绝对可以...

追答

我早想到了。。。。。。这种只适合你这个场景,如果是包含其它内容,不能都刷新的。这不科学。

追问

那...canvas能不能生成图片之后上传啊?

追答

我也是canvas新人,一年半以前翻看了一下就再也没动过,一直没时间搞这个。

本回答被网友采纳

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网