HTML5 Canvas API_html5 チュートリアルのヒントの clearRect() メソッドを使用した消しゴム関数の実装

現実の世界では、描画ボード上に描画するためにブラシを使用しますが、HTML5 キャンバスでは、キャンバスのブラシ (CanvasRenderingContext2D オブジェクト) を使用してキャンバス上に描画することもできます。ご存知のとおり、当社のブラシは通常、ペイントプロセス中の間違いを修正したり再ペイントするために消しゴムと一緒に使用されます。 html5 キャンバスでは、CanvasRenderingContext2D オブジェクトは、永久に再利用できる消しゴム、clearRect() メソッドも提供します。

XML/HTML コードコンテンツをクリップボードにコピー

1. clearRect(x, y, width, height)

CanvasRenderingContext2D オブジェクトの clearRect() メソッドは、指定された座標点 (x, y) を左上隅、幅を幅、高さを指定したキャンバスの長方形領域内のすべてのグラフィック ピクセルをクリアするために使用されます。高さとして。

それでは、実際の例を見てみましょう。まず半径 50 ピクセルの実線の円を描画し、次に消しゴム clearRect() を使用してその中のローカル領域を消去します。円を描画するための元の html5 コードは次のとおりです:

JavaScript コードコンテンツをクリップボードにコピーします

4. "UTF-8">
10. <キャンバス ID="myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
お使いのブラウザは Canvas タグをサポートしていません。
<スクリプトタイプ=
14. "text/javascript">
15. //Canvas オブジェクト (canvas) を取得します
16. var Canvas = document.getElementById("myCanvas");
//HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
if
18. (canvas.getContext){
//対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
var
20. ctx = Canvas.getContext("2d");
21. //座標点(100,10)を中心、半径50pxの円を描画します
22. ctx.arc(100, 100, 50, 0, Math.PI * 2, false
);
//円の内側を描画して塗りつぶします
25. ctx.fill(); }
対応する表示効果は次のとおりです:
今度は、clearRect()メソッドを使用して、中心(100,100)を中心として各辺10pxの黒丸の長方形領域を消去します。

JavaScript コード
コンテンツをクリップボードにコピーします

3. 対応する表示効果は以下の通りです（銅貨っぽい？）。

ページ上で、ページ上の領域を消去して背景画像を表示できます。

以下の例では、長方形内の空白を消去し、ページの背景を表示させます:

JavaScript コード

コンテンツをクリップボードにコピーします

1.   
2. "zh">   
3. <頭>   
4. "UTF-8">   
5.   
6.   
7. body { background: url("./images/bg2.jpg") repeat; }
8. #canvas { border: 1px solid #aaaaaa; 表示: ブロック; マージン: 50px 自動; }
9.   
10.   
11.   
12. "キャンバスワープ">   
13. "canvas">   
14. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
15.   

  

<スクリプト>   

window.onload = 関数(){

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);   

};