描画キャンバスを使用したJavaScript Definitive Guideの第15章

HTML

<！DOCTYPE HTML> 
<HTML> 
    <HEAD> 
        <TITLE>キャンバス</ TITLE> 
    </ HEAD> 
    <BODY> 
        <画像SRC = "bd_logo1.png"幅= '50'高さ= '50' /> 
        <キャンバスのID = '描画'幅= "800"高さ= "800"スタイル= "国境：1pxの固体＃c3c3c3;"何かの>描画</キャンバス>。
        <キャンバスのid = "drawing2"幅= "800"高さ=」 300 "> </キャンバス> 
        <スクリプトタイプ="テキスト/ javascriptの」SRC = "canvas.js"> </ SCRIPT> 
    </ body> 
</ HTML>

//15.1基本使用

VAR =のdocument.getElementById描画（ '描画'）; 

// IF（drawing.getContext）{ 

// VARコンテキスト= drawing.getContext（ '2D'）; 
// VAR imgURI = drawing.toDataURL（ '画像/ PNG '）; 
//画像のVAR =のdocument.createElement（' IMG '）; 
//のimage.src = imgURI; 
// document.body.appendChild（イメージ）; 
//} 

//15.2 2Dコンテキスト
//15.2 .1満たし、ストローク
//ブラウザが<キャンバス>要素サポート決定
IF（drawing.getContext）{ 

    VAR = drawing.getContextコンテキスト（ "2D"）を、
    context.strokeStyle = '赤'; 
    context.fillStyle =「＃0000FF 「; 
    context.stroke（）; 
} 

四角形を描画//15.2.2 

IF（drawing.getContext）{

    drawing.getContextコンテキスト= VAR（ '2D'）; 
    / * 
     *文書のMozilla 
     * HTTP：//developer.mozilla.org/en/docs/Cavans_tutorial：Basic_usageは
    * / 

    //赤い矩形描画
    context.strokeStyle =「位FF0000 '; 
    context.strokeRect（10、10、50、50）; 

    //は、半透明の青色の長方形を描く
    context.strokeStyle =' RGBA（0,0,255,0.5）を「; 
    context.strokeRect（30、30、50、 50）; 

    二つの小さな矩形が重複//クリア小さな矩形
    context.clearRectを（40、40、10、10）; 
} 

//15.2.3パスの描画

//アークを（X、Y、半径 、startAngleの、endAngle 、counterclocwise）
円弧を描画する（X、Y）における//、ラジアンで開始および終了角の曲率半径（）の半径はstartAngleのとendAngleある。
// startAngleのが反時計回りと反時計回りendAngleか示し時計回りのための偽の値を計算します

// arcTo（X1、Y1、X2 、Y2、半径）// アークから引き出さはこれまでのところ、所与の半径の半径（X1、Y1）から（X2、Y2）の開始点

（//働いているbezierCurveTo C1X、C1Y、C2X、C2Y、 X、Y）// 、曲線から始点を描画する（x、y）は、これまで、及び（C1X、C1Y）及び（C2X、C2Y）制御点における

//のlineTo（始点からx、y）は、これまで直線、（x、y）を描画します。

//のmoveTo（x、y）は図（X、Y）にカーソルを移動し、ライン描画しない

// quedraticCurveTo（CX、CY、X 、y）を二次曲線を描く開始する一つの点から、（X、Y）これまで、および制御点として（CX、CY）に

// RECT（X、Y、幅 、高さ） の点から（x、y）は矩形を描画し始め、幅と高さは、指定された幅と高さ

（描きます。 getContext）{ 
 
    VAR = drawing.getContextコンテキスト（ "2D"）; 
    //パスを開始
    context.beginPath（）; 
    //外側描く
    context.arc（100、100、99、 0、にMath.PI * 2、false）を; 

    //円を描く
    context.moveTo（194100）; 
    （falseに、100,100,94,0,2 *にMath.PI）context.arcを。
 
    //分を描きます
    context.moveTo（100,100）; 
    context.lineTo（100、15）; 

    //は時間描く
    context.moveTo（100,100）を、
    context.lineTo（35100）; 

    //ストロークパス
    context.strokeStyle = '＃FF0000の'; 
    文脈。ストロークは、（）; 
} 


テキストを描画//15.2.4 
IF（drawing.getContext）{ 
 
    VAR = drawing.getContextコンテキスト（ "2D"）; 
    context.font = 'Arialの太字14px'; 
    context.textAlign =行く'; 
    コンテキスト= .textBaseLine '中央'; 
    ;（100,20 context.fillText '12である）

    整列ポイント開始// 
    スタートcontext.textAlign = ''を、
    context.fillText（'12は、100,40）; 

    //端はと整列 
    コンテキスト.textAlign =「終了」。
    コンテキスト.fillText（ '12'、100,60） 。
} 

変換//15.2.5
起源についてラジアン//回転（角）画像回転角
x方向にsacelX乗じスケーリングされた画像//スケール（scaleXプロパティ、scaleYの）、scaleYの、sacelX、scaleYのデフォルト値を乗算することにより、Y方向は1.0 
//翻訳（X、 y）は単に変換した後、座標（X、Y）の原点に移動し、座標が前に（X、Y）点変換並進に対応なる
（M1_1、m1_m2、m2_1.m2_2変換// 、DX、DY ）直接変換行列は次の行列と乗算変更
// M1_1 M1_2 DX 
// M2_1 M2_2のDy 
; // 0 0 1   
//上、実際には、原点に回転するロータリー+変換行列であり、次いで、上記翻訳のDX、DY 3×3行列である
// Y1のsiNA DX 
@ X1コサDyが
、これはおそらく幾分忘れ行列で0 0 1 @ 
0シーク90°三角によって時計回りに回転：100 Y1：//は、X軸X1と仮定するX2、Y2 
// = Math.sqrt X2（X1 * Y1 + 2 * 2）* Math.sqrtコサY2 =（X1 + 1 Y1 * 2 * 2）*のsiNA 
//回転90だけX2 = 0、Y2 = 100

 
//翻訳は、図面を使用して変換

{（drawing.getContext）場合
    drawing.getContextコンテキスト= VAR（ "2D"）; 
    context.translate（200200）;区別するために、避けて最初の翻訳の前に塗っ//使用。翻訳が重畳されています。 
    context.moveTo（0,0）;
    パス開始// 
    context.beginPath（）; 
    //ペインター円筒
    context.arcを（100,100,99,0,2 *、偽にMath.PI） ; // 中心の位置は、実際に200 + 100    
    内//円ドロー
    コンテキストを.moveTo（194100）;並進方向X 6つの単位のため//ブラシ起点
    context.arc（100,100,94,0,2 *にMath.PI、偽） ; // 中心不変、同心円を描き、半径狭いブラシ6位一致しています。
    //変換元
    context.translate（100,100）; //中心位置は、200 + 100 + 100 = 400となる
    手の回転// 
    （1）context.rotateを; //絵の背後に90度の回転は、未完成の正常座標90回転後に
    //分描く
    //ここにlineTo（0,0）実際には300、300の絶対原点に行く; context.moveTo（0,0）
    context.lineTo（0、-85）; 
    //ドロー時間
    context.lineTo（-65,0）; 
    //ストロークパス
    context.stroke（）; 
    //context.restore（）;その結果を保存して前方に配置された戻り
}

 
//15.2.6レンダリング画像
VAR画像を= document.images [0]; 
//context.drawImage(image,10,10は）; //画像を描画するために310、310と90である実際のどの位置にあるため、回転再度上記90の回転
context.drawImage（画像、10 、10,50,50）; //指定WH 
//context.drawImage（）ソース画像レンダリングされる9つのパラメータまで、ソース画像は、x座標、ソース画像のy座標、ソース画像の幅、ソース画像の高さ、対象画像xターゲット画像y、ターゲット画像、対象画像の高さの幅


//15.2.7シャドー

するvar drawing2は=のdocument.getElementById（ 'drawing2'）; 
VAR =コンテキスト2 drawing2.getContext（ '2D'）は、

影を設定// 
context2.shadowOffsetX = 5 ; 
context2.shadowOffsetY = 5;。
。context2.shadowBlur = 4; 
context2.shadowColor = 'RGBA（0,0,0,0.5）'; 

//赤四角形を描きます
= context2.fillStyle '＃FF0000の'; 
context2.fillRect（10,10,50,50）; 
//イメージ。幅= 50。 
//は、青い四角形の描画
context2.fillStyle = 'RGBA（0,0,255,1）を' ;
context2.fillRect（30,30,50,50）; 

//15.2.8勾配
VAR gradient1 = context2.createLinearGradient（50,50,70,70）; 
gradient1.addColorStop（0、 'ホワイト'）; 
gradient1.addColorStop（ 。1、 '黒'）; 

VAR = gradient2 context2.createRadialGradient（125,125,10,125,125,30）; //グラデーション同心外側に
gradient2.addColorStop（0、 '白'）
。gradient2.addColorStop（1、 'ブラック'）; 

//矩形勾配描画
context2.fillStyle = gradient1; 
context2.fillRectを（50,50,50,50）; 

context2.fillStyle = gradient2; 
context2.fillRect（100,100,50,50）; 
//context2.stroke（）; 

/ /15.2.9モード

のvarイメージ= document.images [0]; 
// image.height = 50;
= VAR context2.createPatternパターン（イメージ、 'REPEAT'）; // REPEATリピートREPEAT-X-Y-NO REPEATの
context2.fillStyle =パターン; 
context2.fillRect（200200150150）; 

//15.2.10画像データ使用

するvar画像データを= context2.getImageData（100,100,50,50）; //位置取得領域幅とデータの長さ座標
VAR =データimageData.dataと、
VAR =赤データ[0]、データ=緑、データ=ブルー[2 [1] ]、アルファ=データ[3]; 
データ[0] = 255; //設定された画像データ
imageData.data =データ; 
context2.putImageData（画像データ、0,0）; //位置に画像データを書き込む

//15.2.11合成

context2.globaAlpha = 0.5。

描画キャンバスを使用したJavaScript Definitive Guideの第15章

おすすめ