Canvas实现动态擦除效果的HTML5代码示例

本文档介绍了如何使用JavaScript和HTML5的Canvas API实现擦除效果在网页上动态交互。Canvas是HTML5提供的一种在网页上绘制图形的强大工具，它允许开发者直接操作每一个像素，从而创建出丰富的动态内容。 首先，HTML部分设置了基础结构，包含一个带有id为"canvas"的canvas元素，用于实际绘图，以及一个class为"content"的div，作为遮罩层，用于在擦除后显示内容。canvas的width和height属性设置为200x50，确保了图形绘制的正确尺寸。 JavaScript部分的核心是CanvasRenderingContext2D对象，这是一个内置的HTML5对象，通过`var ctx = canvas.getContext('2d')`获取。这个对象提供了丰富的绘图方法，如`rect()`和`fill()`，用于绘制矩形并填充颜色。初始时，绘制了一个覆盖整个canvas的黑色矩形，通过`ctx.rect(0, 0, canvas.width, canvas.height); ctx.fill();`实现。 擦除效果的实现依赖于鼠标事件监听。通过`addEventListener`函数，捕获了'mousedown'（鼠标按下）、'mouseup'（鼠标抬起）和'mousemove'（鼠标移动）事件。创建了一个布尔变量`mousedown`来跟踪鼠标的按下状态。 在`eventDown`函数中，阻止了浏览器的默认行为（例如阻止链接跳转），并将`mousedown`设置为true，表明擦除过程开始。而在`eventUp`函数中，当鼠标松开时，将`mousedown`重置为false，结束擦除状态。 `eventMove`函数负责处理鼠标移动，当`mousedown`为true时，它会清除鼠标下落区域的像素，实现擦除效果。这通常是通过调用`clearRect()`方法，传入鼠标位置和擦除区域的尺寸来完成的。 需要注意的是，由于canvas的像素操作，擦除的效果是实时的，用户可以在页面上看到实时的擦除效果。这种动态交互性使得Canvas在游戏开发、绘图应用等领域具有很高的实用价值。 本示例展示了如何利用HTML5 Canvas和JavaScript结合鼠标事件来创建一个简单的擦除功能，这对于理解和使用Canvas进行图形编程是一个很好的起点。