HTML 5新タグのCanvas

19461 ワード
canvas
1、概要
Canvasは、Webページに画像を表示し、コンテンツをカスタマイズするために使用され、基本的にはJavaScriptで操作できるビットマップ(bitmap)である.
Canvas APIはウェブページのリアルタイム生成画像に用いられ、JavaScriptはAPIを介して画像コンテンツを操作する.このような利点は、HTTPリクエスト数を減らし、ダウンロードしたデータを減らし、Webページのロード時間を速め、画像をリアルタイムで処理できることです.
使用する前に、まずCanvasのWebページ要素を作成する必要があります.
<canvas id="myCanvas" width="400" height="200">
            canvas!
</canvas>

ブラウザがcanvasをサポートしていない場合、canvasラベルの中央に「ブラウザがcanvasをサポートしていません!」という文字が表示されます.
次に、JavaScriptを使用してcanvasのDOMオブジェクトを取得します.
var canvas = document.getElementById('myCanvas');

次に、ブラウザがCanvas APIをサポートしているかどうかを確認します.getContextメソッドが導入されているかどうかを確認します.
if (canvas.getContext) {
    //some code here
}

getContext('2 d')メソッドを使用して、平面画像のコンテキスト環境を初期化します.
var ctx = canvas.getContext('2d');

これでcanvasの間に平面画像が生成されます.
2、製図方法
(1)塗りつぶし色
塗りつぶし色を設定します.
ctx.fillStyle = "#000000";//        

ctx.strokeStyle = "#FF6600"; //

(2)長方形を描く
塗りつぶした長方形を描画します.
ctx.fillStyle = "#000000";//    ，     

ctx.fillRect(x, y, width, height);

中空の長方形を描画します.
ctx.strokeStyle = "#FF6600"; //    ，       

ctx.strokeRect(x, y, width, height);

長方形の領域の内容をクリアします.
ctx.clearRect(x, y, width, height);


(3)描画パス


ctx.beginPath(); //      

ctx.moveTo(20, 20); //      

ctx.lineTo(200, 20); //     200， 20   

ctx.lineWidth = 1.0; //    

ctx.strokeStyle = "#CC0000"; //      

ctx.stroke(); //      ，


IOS進級のWKWebView
HTML 5のWeb Storage(sessionStorage||localStorage)の理解と簡単な例