HTML 5学習ノート(二)-CANvas、SVG

CanvasとSVG(Scalable VectorGraphics)の違い:

Canvasはビットマップキャンバスで、その上に描かれた図形はスケーリングできない.SVGはベクトルマップで拡大縮小できる.

Canvasが描画したオブジェクトは、ページDOM構造またはネーミングスペースに属しません.SVGは単機検出(マウス単機が画像上のどのオブジェクトを検出できるか)

をサポートする.

Canvasは画像中のオブジェクトを記憶する必要がないので、非常に性能が良い.

一、Canvas
1、要素:
 
2、座標:左上隅座標が原点、すなわちx=0、y=0の点.
 
3、代替内容.
canvasをサポートしていないブラウザでは、プロンプトまたは代替コンテンツを表示する必要があります.次のようになります.

<canvas>
    Update your browser to enjoy canvas
</canvas>

 
4、ブラウザのサポート状況を検査する

try {
    document.createElement("canvas").getContext("2d");
    document.getElementById("support").innerHTML = 
        "HTML5 Canvas is supported in your browser.";
} catch(e) {
    document.getElementById("support").innerHTML = 
        "HTML5 Canvas is not supported in your browser.";
}

 
5、スクライブ

<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>

 

<script>
	function drawDiagonal() {
		//  canvas         
		var canvas = document.getElementById('diagonal');
		var context = canvas.getContext('2d');
		
		//            
		context.beginPath();
		context.moveTo(70,140);
		context.lineTo(140, 70);
		
		//       canvas 
		context.stroke();
	}
	window.addEventListener("load", drawDiagonal, true);
</script>

簡単なコードはHTML 5 Canvas APIの重要な流れを示しています.
まずcanvasオブジェクトのアクセス権を取得し、次にcanvas 2 Dコンテキストを取得します.
次に、3つのメソッドbeginPath、moveTo、lineTo入力線の始点座標と終点座標を呼び出します.
メソッドmoveToとlineToは実際に線を引かず、canvas操作を終了するときにcontextを通過する.stroke()メソッドは、線の描画を完了します.
 
6、変換
context.translate(x, y);
図をx,y座標に平行移動します.
canvas図面は一般的に0,0点から始まり、位置に移動します.canvasのスケール、平行移動、回転などの操作は原点が基準点であるためです.
描画前にcontext.save()現在の描画状態を保存し、最後にcontext.restore()は、既存の図面状態を復元します.これにより、今回の描画で行ったズーム回転は、次回の描画内容に影響しません.
 
7、経路
moveTo(x,y):描画せず、目標座標x,yに移動します.
lineTo(x,y):新しい座標x,yに移動するだけでなく、2つの座標の間に直線を描きます.
 
8、その他の操作
canvasの絵は本を書くことができて、しかも確かに多くの関連する方面の本があります.ここでは詳しく記録しません.本書では、線のスタイル、塗りつぶし領域、カーブの描画、画像の挿入、グラデーション、回転、テキストの挿入、シャドウの挿入などの効果的な操作について説明します.
 
9、画素データ
Canvas APIの最も有用な特性の1つは、開発者がcanvasの下位画素データに直接アクセスできることであり、このアクセスは双方向である.
ピクセルデータの取得:
conext.getImageData(sx,sy,sw,sh)という関数は、現在のcanvas状態を返し、数値配列で表示します.
画像データをcanvasに適用するには、次の手順に従います.
context.putImageData(imagedata,dx,dy)dx,dyはオフセット量である.
空の画像データを作成する:context.createImagedData(sw, sh)
画像データをテキスト形式に変換する方法もあります.canvas.toDataURL(type)
転送開発者が望むcanvasデータから生成される画像タイプは、image/pngまたはimage/jpegなどのパラメータである.
 
10、Canvasセキュリティメカニズム
canvasの画像が他のドメインから来た場合、セキュリティ異常が放出されます.
 
11、進級機能の全ページガラス窓
canvasは、一般に「ガラス窓」と呼ばれるブラウザウィンドウまたはその一部に適用することができる.1つのアプリケーションは,ページ内のすべてのDOM要素の絶対位置を取得した後,逐次漸進的なヘルプ機能を作成し,Webアプリケーションのユーザを導き,操作を一歩一歩教える.canvasは後続の時間アクセスをブロックするためです.
 
二、SVG
SVGコンテンツは、厳密に定義されたXMLコードです.要素はjsにアクセスでき、テキストは選択できます(canvasではグラフィックなのでできません).回転、グラデーションの効果操作もいくつかあります.
SVGは長い間ベクトルパターンの標準フォーマットであるため,画像処理には多くのツールが用いられる.例えばオープンソースsvg-edit(https://code.google.com/p/svg-edit/)