用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

发布时间：2020-03-13 11:43:09 所属栏目：MySql教程来源：站长网

导读：这篇文章主要介绍了如何用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能,文中擦除页面某片区域使其显示出背景图的例子非常实用,需要的朋友可以参考下

对应的显示效果如下(是不是有点像一个铜钱？)。

2016315111914378.png (417×320)

页面上我们可以擦除一片页面上的区域，让其显示出背景图片。
下面的例子中我们擦除了矩形中的空白让其显示页面背景：

JavaScript Code复制内容到剪贴板

<!DOCTYPE html>

<head>

<title>clearRect()</title>

<style>

body { background: url("./images/bg2.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

</style>

</head>

<body>

你的浏览器居然不支持Canvas？！赶快换一个吧！！

</canvas>

</div>

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

var context = canvas.getContext("2d");

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

//清空画布

context.clearRect(0,0,canvas.width,canvas.height);

};

</script>

</body>

</html>

2016315111932638.jpg (1235×714)

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!