关于HTML5清除canvas画布问题

发布网友发布时间：2022-04-21 19:27

共4个回答

懂视网时间：2022-04-20 04:26

这次给大家带来H5有哪些清空画布方法，H5清空画布的注意事项有哪些，下面就是实战案例，一起来看一下。

总结以下三种清空canvas画布的方式：

1. 最简单的方法：由于canvas每当高度或宽度被重设时，画布内容就会被清空，因此可以用以下方法清空：

function clearCanvas<span style="font-family: Verdana, Arial, 宋体;">()</span> 
{ 
 var c=document.getElementById("myCanvas"); 
 var cxt=c.getContext("2d"); 
 c.height=c.height; 
}

2. 使用clearRect方法：

function clearCanvas() 
{ 
 var c=document.getElementById("myCanvas"); 
 var cxt=c.getContext("2d"); 
 cxt.clearRect(0,0,c.width,c.height); 
}

3. 类似于方法2，可以用某一特定颜色填充画布，从而达到清空的目的：

function clearCanvas() 
{ 
 var c=document.getElementById("myCanvas"); 
 var cxt=c.getContext("2d"); 
 
 cxt.fillStyle="#000000"; 
 cxt.beginPath(); 
 cxt.fillRect(0,0,c.width,c.height); 
 cxt.closePath(); 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

html5怎么实现图片转圈的动画效果

怎样用canvas实现自定义头像功能

热心网友时间：2022-04-20 01:34

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

热心网友时间：2022-04-20 02:52

function clea(){
    var canvas = document.getElementById('bo');
    var context=canvas.getContext("2d");
    context.clearRect(0,0,canvas.width,canvas.height);
    context.beginPath();
    };
/*试试这个效果，希望能帮到你*/

热心网友时间：2022-04-20 04:26

是啊，好奇怪呀。。。为什么呢。。。不过倒是可以投机取巧：

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

声明：本网页内容为用户发布，旨在传播知识，不代表本网认同其观点，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:11247931@qq.com

首页

热点资讯

义务教育

高等教育

出国留学

考研考公

关于HTML5清除canvas画布问题