在实际全球中,大家应用画笔在画板勤奋行美术绘画;在html5 canvas中,大家一样可使用canvas的画笔——CanvasRenderingContext2D目标在canvas勤奋行美术绘画。大家都知道,大家的画笔1般都会与橡皮擦配套应用,便于于改正美术绘画全过程中的不正确并再次美术绘画。在html5 canvas中,CanvasRenderingContext2D目标也一样给大家出示了1个能够始终反复应用的橡皮擦——clearRect()方式。
XML/HTML Code拷贝內容到剪贴板
- clearRect(x, y, width, height)
CanvasRenderingContext2D目标的clearRect()方式用于消除canvas内以特定座标点(x,y)为左上角、宽度为width、高宽比为height的矩形框地区中的全部图型像素。
下面,大家看来1个具体的事例。大家先绘图1个半径为50px的实心圆,随后应用橡皮擦clearRect()对在其中的部分地区开展擦除。绘图圆形的初始html5编码以下:
JavaScript Code拷贝內容到剪贴板
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF⑻">
- <title>应用HTML5 clearRect()擦除特定的矩形框地区的新手入门示例</title>
- </head>
- <body>
-
- <!-- 加上canvas标识,并再加鲜红色边框便于于在网页页面上查询 -->
- <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
- 您的访问器不适用canvas标识。
- </canvas>
-
- <script type="text/javascript">
-
- var canvas = document.getElementById("myCanvas");
-
- if(canvas.getContext){
-
- var ctx = canvas.getContext("2d");
-
-
- ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
-
-
- ctx.fill();
- }
- </script>
- </body>
- </html>
对应的显示信息实际效果以下:
如今,大家应用clearRect()方式对实心圆中以圆心(100,100)为管理中心,附近各10px的矩形框地区一部分开展擦除。
JavaScript Code拷贝內容到剪贴板
- <script type="text/javascript">
-
- var canvas = document.getElementById("myCanvas");
-
- if(canvas.getContext){
-
- var ctx = canvas.getContext("2d");
-
-
- ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
-
-
- ctx.fill();
-
-
- ctx.clearRect(90, 90, 20, 20);
- }
- </script>
对应的显示信息实际效果以下(是否有点像1个铜钱?)。
网页页面上大家能够擦除1片网页页面上的地区,让其显示信息出情况照片。
下面的事例中大家擦除矩形框中的空白让其显示信息网页页面情况:
JavaScript Code拷贝內容到剪贴板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF⑻">
- <title>clearRect()</title>
- <style>
- body { background: url("./images/bg2.jpg") repeat; }
- #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas">
- 你的访问器竟然不适用Canvas?!赶紧换1个吧!!
- </canvas>
- </div>
-
- <script>
- 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>