Canvas 2 Dベース

Canvas 2 Dベース
Canvasとは
H 5の中で最も人気のある要素で、ページにエリアを描き、JSを利用してグラフィックを描き、最初はApple社が提案し、各ブラウザメーカーもそれをある程度実現した.canvasでは2 D contextと3 D context(WebGL)が規定されており、現在のブラウザのほとんどは2 D contextをサポートしている.WebGLの発展はまだ遅い.
きほんしよう
1、toDataURL()描いた画像を画像として出力

//get data URI of the image
var imgURI = drawing.toDataURL("image/png");
//display the image
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);

2、原点はcanvas要素左上角3、2 D Contextに基づく2つの基本的な描画操作fill and stroke
Rectangles(長方形)
1、 fillRect()

context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);

2、 strokeRect()

//draw a red outlined rectangle
context.strokeStyle = "#ff0000";
context.strokeRect(10, 10, 50, 50);
//draw a blue outlined rectangle that’s semi-transparent
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(30, 30, 50, 50);

3、 clearRect()

//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle that’s semi-transparent
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30, 30, 50, 50);
//clear a rectangle that overlaps both of the previous rectangles
context.clearRect(40, 40, 10, 10);

Drawing Paths
1、文字盤を描く方法

var drawing = document.getElementById("drawing");
//make sure  is completely supported
if(drawing.getContext) {
    var context = drawing.getContext("2d");
    //start the path
    context.beginPath();
    //draw outer circle
    context.arc(100, 100, 99, 0, 2 * Math.PI, false);
    //draw inner circle
    context.moveTo(194, 100); //               
    context.arc(100, 100, 94, 0, 2 * Math.PI, false);
    //draw minute hand
    context.moveTo(100, 100);
    context.lineTo(100, 15); //        (100,15)     
    //draw hour hand
    context.moveTo(100, 100);
    context.lineTo(35, 100);
    //stroke the path
    context.stroke();
}

2、座標点が描画経路上にあるか否かを判定する.isPointInPath(100, 100)//true
Drawing Text
1、fillText()、strokeText()後者は2、3つの属性font、textAlign、textBaseline 3、Demoをあまり使わない

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12", 100, 20);
//start-aligned
context.textAlign = "start";
context.fillText("12", 100, 40);
//end-aligned
context.textAlign = "end";
context.fillText("12", 100, 60);

4、measureText()の使用で文字サイズを測ることができる

//          140，      
var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140) {
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!", 10, 10);
context.fillText("Font size is " + fontSize + "px", 10, 50);

Transformations 
1.画像変換方法rotate(angle)scale(scaleX,scaleY)translate(x,y)transform(m 1_1,m 1_2,m 2_1,m 2_2,dx,dy)settTransform(m 1_1,m 1_2,m 2_2,dx,dy)
2.translateで原点の位置を再定義することができ、円を描く時、原点の位置を円心の位置に移動することができ、このように円を描く位置決めの過程で比較的に便利である
3.context.rotate注意座標軸を回転させる
Drawing Imagesピクチャの描画

現在のcanvasdの座標(10,10)の位置から画像を挿入する(画像がcanvasに入れられない場合、画像は挿入できない)

.

var image = document.images[0];
 context.drawImage(image, 10, 10);

指定領域内挿入--(10,10)から、幅90、高さ90の領域内で画像を描画する

を実行する.

context.drawImage(image, 10, 10,90,90)

画像上の指定領域の一部をcanvas中の指定領域(元の画像上の一部をcanvasに切り取ることに相当)

に挿入する.

//    (0,10)  ， 150， 385       canvas  (0,100)  ， 40， 60    
context.drawImage(image, 0, 10, 150, 385, 0, 100, 40, 60);

注意、挿入された画像が別のドメイン名の下にある場合は、

とエラーが発生します.
shadowsにシャドウを付ける
DEMO:

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0, 0, 0, 0.5)";
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

Gradientsグラデーション

リニアグラデーション

var gradient = context.createLinearGradient(30, 30, 80, 80);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

径項グラデーション

var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);

Patternsモード

すなわち画像の繰返しモードであり、cssと同様に「repeat」、「repeat-x」、「repeat-y」、no-repeat」

var context = drawing.getContext("2d");
var image = document.images[0],
    pattern = context.createPattern(image, "repeat");
//draw a rectangle
context.fillStyle = pattern;  //   repeat      (0,0)   
context.fillRect(30, 0, 150, 150); //           ，    repeat          ，       repeat             ，      

Working with Image Dataイメージ元データ
フィルターの効果に使えます.詳しくはwww.html 5 rocksを参照してください.com/en/tutorials/canvas/imagefilters/
Componentositing合成
2つの画像の間にどのように絡み合っているのか、ここでは1つの例を挙げて、他の同じです.

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");
//draw a red rectangle
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//change the global alpha
context.globalCompositeOperation = "xor";
//draw a blue rectangle
context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(30, 30, 50, 50);

まとめ

canvasの内容は上記です.デザイナーが使える色のように多いですが、色、図形を組み合わせて、アイデアは本当に無限です.canvasもそうです.

webGLはOpenGL ES 2.0ブラウザに対してインタフェースを実現し、3 D絵画に用いられ、生産段階は使用しないほうがよく、実験段階に用いることができる.