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">
6. 頭>
10. "myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
お使いのブラウザは Canvas タグをサポートしていません。
キャンバス>
"text/javascript">
14. //Canvas オブジェクト (canvas) を取得します
15. var Canvas = document.getElementById("myCanvas");
//HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
if
17. (canvas.getContext){
//対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
var
19. ctx = Canvas.getContext("2d");
20. //座標点(100,10)を中心、半径50pxの円を描画します
21. ctx.arc(100, 100, 50, 0, Math.PI * 2, false
);
//円の内側を描画して塗りつぶします
24. ctx.fill(); }