关于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>
Cats萌萌浏览 575回答 3
3回答
-
三国纷争
123456//函数clea修改下，加一句话就行//canvas会记录你moveTo的点，所以清空的时候要用beginPath来清空下路径function clea(){ pic.beginPath(); pic.clearRect(0,0,500,500);} -
慕仙森
1234567function clea(){ var canvas = document.getElementById('bo'); var context=canvas.getContext("2d"); context.clearRect(0,0,canvas.width,canvas.height); context.beginPath(); };/*试试这个效果，希望能帮到你*/
随时随地看视频慕课网APP
相关分类
Html5