查看: 38|回复: 0

扣丁学堂简述HTML5清空画布的方法有哪些

发表于 2018-8-10 11:39:13

如今加入到HTML5领域的人越来越多,今天扣丁学堂HTML5培训小编和大家分享一下HTML5清空画布的方法,对HTML5开发感兴趣的小伙伴就随小编一起来了解一下吧。


总结以下三种清空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();  
}  
以上就是扣丁学堂HTML5在线学习小编给大家分享的HTML5清空画布的方法,希望对小伙伴们有所帮助,想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。想要学好HTML5开发小编给大家推荐口碑良好的扣丁学堂,扣丁学堂有专业老师制定的HTML5学习路线图辅助学员学习,此外还有与时俱进的HTML5课程体系和大量的HTML5视频教程供学员观看学习,想要学好HTML5开发技术的小伙伴快快行动吧。扣丁学堂H5技术交流群:559883758。


文章转载自:扣丁学堂http://www.codingke.com/


回复

使用道具 举报