在现实世界中，我们使用画笔在画板上进行绘画；
在html5 canvas中，我们同样可以使用canvas的画笔——CanvasRenderingContext2D对象在canvas上进行绘画。
众所周知，我们的画笔一般都会与橡皮擦配套使用，以便于纠正绘画过程中的错误并重新绘画。在html5 canvas中，CanvasRenderingContext2D对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()方法。
clearRect(x, y, width, height)
CanvasRenderingContext2D对象的clearRect()方法用于清除canvas内以指定坐标点(x,y)为左上角、宽度为width、高度为height的矩形区域中的所有图形像素。
下面，我们来看一个实际的例子。我们先绘制一个半径为50px的实心圆，然后使用橡皮擦clearRect()对其中的局部区域进行擦除。绘制圆形的原始html5代码如下：
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>使用HTML5 clearRect()擦除指定的矩形区域的入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->
<canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
ctx.arc(100,100,50,0,Math.PI *2,false);
//绘制并填充圆形内部
ctx.fill();
}
</script>
</body>
</html>
使用canvas绘制的实心圆
现在，我们使用clearRect()方法对实心圆中以圆心(100,100)为中心，周边各10px的矩形区域部分进行擦除。
<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if(canvas.getContext){
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//绘制一个以坐标点(100,100)为圆心、半径为50px的圆形
ctx.arc(100,100,50,0,Math.PI *2,false);
//绘制并填充圆形内部
ctx.fill();
//擦除矩形区域内的图形
ctx.clearRect(90,90,20,20);
}
</script>
使用clearRect()清除圆心矩形区域的图形
相关推荐
在html5 canvas中，CanvasRenderingContext2D对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()方法。 XML/HTML Code复制内容到剪贴板 clearRect(x, y, width, height) ...
在这个场景中，我们关注的是一个基于HTML5 Canvas的橡皮擦插件——jQuery.eraser。这个插件允许用户在Canvas元素上模拟橡皮擦功能，擦除已有的图形或者颜色，为用户提供更自由的创作空间。 首先，我们需要理解...
3. **擦除**：为了撤销或擦除部分签名，可以添加一个橡皮擦模式，此时线条颜色设为背景色，宽度增加，以便覆盖原有线条。 4. **保存和加载**：签名数据可以通过Canvas的`toDataURL()`方法以Base64编码的PNG图像格式...
为了实现橡皮擦功能，“我的画”项目使用了Canvas的clearRect方法，清除指定区域的颜色，模拟出橡皮擦的效果。填充功能则利用了fillRect或路径的fill方法，根据用户选择的颜色填充选定的闭合区域。 此外，项目可能...
5. **橡皮擦功能**：橡皮擦功能可以通过改变`strokeStyle`为透明色或使用`clearRect()`来实现。用户可以选择切换到橡皮擦模式，此时画出的线条将“擦除”掉画布上的颜色。 6. **颜色和线条粗细选择**：Sketchpad...
为了实现橡皮擦功能，可以创建一个额外的滑动条来控制画笔的透明度。当画笔的透明度为0时，实际上就是在擦除之前的线条。这可以通过设置`context.globalAlpha`的值来实现。 此外，我们还需要实现一个清除画板的功能...
- `clearRect`：清除画布的指定区域，实现橡皮擦效果。 - `beginPath`和`closePath`：开始和结束一个路径，用于绘制直线和曲线。 - `moveTo`和`lineTo`：设置路径的起点和终点，绘制线条。 - `strokeStyle`和`...
同时，程序还提供了橡皮擦功能，可以擦除画布上的内容。这通常通过设置Graphics对象的fillColor为背景色，然后执行clearRect()方法来达到擦除的效果。 保存功能是该应用的另一亮点。在Java中，图像文件的保存通常...
4. **动画效果**：添加动画，比如让线条绘制过程有动态效果，或者添加动态的橡皮擦擦除动画。 总的来说，刻画游戏是一个很好的实践项目，它涵盖了前端开发中的多个重要技术，包括HTML布局、CSS样式设计以及...
7. **动画效果**：如果想要添加更丰富的功能，如橡皮擦、填充颜色等，可以使用jQuery的`.animate()`方法实现平滑过渡效果，增加用户体验。 8. **保存和分享**：还可以扩展功能，允许用户保存他们的作品，例如，将...