Canvas の 24 の基本知識_html5 チュートリアル スキルの概要

いつでも簡単に参照できるように、Canvas の知識ポイントを次のようにまとめます。

1.塗りつぶされた四角形 fillRect(x,y,width,height);

2. 長方形の境界線を描画します ストロークRect(x,y,width,height);

3. 四角形を消去します clearRect(x,y,width,height);

4. 塗りつぶしスタイル fillStyle="red"; スタイルには、色、グラデーション、イメージを指定できます。

5. ストロークのスタイル stopStyle="red";

6. ストローク線の幅 lineWidth=4;

7. 線の端の形状 lineCap="butt"; butt/round/square、デフォルトでは butt;

8. 線の交差スタイル lineJoin="miter"; miter(鋭い角)/round(丸い角)/bevel(ベベル)、デフォルトの鋭い角;

9. パスの描画を開始します beginPath();

10. パスを終了します closePath(); パスを作成した後、パスの始点に接続する線を描画したい場合は、closePath();

を呼び出します。

11. 円弧を描きます arc(x,y,radius,startAngle,endAngle,true/false);

12. 円弧を描く arcTo(x1,y1,x2,y2,radius) 前の点から始まり、x2、y2 で終わり、指定された半径でそこを通る円弧を描きます。 x1,y1;

13. moveTO(x,y); 線を引かずに描画カーソルを (x, y) に移動します

14. lineTo(x,y); 前の点から直線を描きます

15. 二次ベジェ曲線: quadraticCurveTo(cx,cy,x,y); 前の点から始まり、x、cx、cy で終わる二次曲線を描画します。 。

16. 3 次ベジェ曲線: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 前の点から始まり x、y、cx1、cy1 で終わる 2 次曲線を描きます。 cx2、cy2 を制御点として使用します。

17.rect(x,y,width,height);点 x,y から始まる長方形を描画します。幅と高さはそれぞれ width と height で指定されます。このメソッドは、独立した形状ではなく、長方形のパスを描画します。

18. テキストを描画します:

(1) Fill Text: fillText("hello",x,y,width); width はオプションの最大ピクセル幅です。テキストが最大幅よりも大きい場合、テキストは最大幅に合わせて縮小されます。
(2) テキストストローク: ストロークText("hello",x,y,width);width はオプションの最大ピクセル幅です。
(3) テキストスタイル: font="bold 14px Arial";
(4) 水平方向のテキスト配置: textAlign='start'; // 開始、終了、左、右、中央。デフォルト値: 開始。文字の開始点(x,y)を基点として縦軸に揃えます。
(5) 垂直方向のテキスト配置: textBaseline='alphabetic'; //上、吊り下げ、中央、アルファベット、表意文字、下。デフォルト値: アルファベット。文字の開始点(x,y)を基点として横軸に揃えます。
(6) テキスト幅: var text="hello"; var length=context.measureText(text); パラメータ text は描画されるテキストです

19. 変身

(1)rotate(angle):原点を中心に画像の角度を回転させます。
transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math を使用することもできます.cos(angle*Math.PI/180),0,0);
(2)scale(x,y): 画像を拡大縮小します。また、transform(x,0,0,y,0,0);
(3)translate(x,y): 座標原点をx,yに移動します。この変換を実行した後、座標は0, 0 は、以前に x、y で表されていた点になります。また、transform(1,0,0,1,x,y);
(4)transform(, , ,,x, y を使用することもできます。 ) ;
(5) setTransform(, , ,,x, y);変換行列をデフォルトの状態にリセットしてから、transform() を呼び出します。 ;

20. グラフィックの組み合わせ

コードをコピーします

コードは次のとおりです:

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; オプションの値は /* */ のようになります。
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over (デフォルト値):
destination-over: 元のグラフィックの下に新しいグラフィックを描画します
source-in: 新しいグラフィックと元のグラフィックの間で in 操作を実行し、差分のみを表示します新しいグラフィックと元のグラフィックの間 グラフィックの重複部分
destination-in: 元のグラフィックと新しいグラフィックは in のように動作し、新しいグラフィックの元のグラフィックと重複する部分のみが表示されます
source-out: 新しいグラフィックと元のグラフィックが out 操作として操作され、新しいグラフィックの元のグラフィックと重ならない部分のみが表示されます
destination-out: 新しいグラフィックと元のグラフィックに対して out 操作が実行されますグラフィック、元のグラフィックと重ならない新しいグラフィックの部分のみを表示します
source-atop: 元の形状と重ならない新しい形状の部分のみを描画します
destination -atop: 元の形状のうち新しい形状と重なっている部分のみを描画し、新しい形状の他の部分を軽く描画します。
元の形状と新しい形状の両方が描画され、重なっている部分に色が付けられます。 > >*/

21. グラフィックの影を描画します

コードをコピーします

コードは次のとおりです。

context.shadowOffsetX=10; //影 影の水平方向の変位

context.shadowOffsetY=10; //影の垂直方向の変位

context.shadowColor='rgba(100,100,100,0.5)' //影の色
context.shadowBlur=7; //影のぼかした範囲

22. 画像を描画、並べて表示、トリミングする

コードをコピーします

コードは次のとおりです。

context.drawImage(image, x,y );

context.drawImage(image,x,y,w,h);

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx 、sy、sw、sh はソース画像のコピー領域の開始座標と高さ、dx、dy、dw、dh はコピー領域のターゲット座標と高さです。
context.createPattern(image,type); 画像タイル、パラメータは次のとおりです: no-repeat,repeat-x,repeat-y,repeat;
context.clip(); //Crop function



例:

コードをコピーします

コードは次のとおりです:

image=new Image() ; // Image オブジェクトを作成します

image.src="../images/wukong.gif";

var test=context.createPattern(image,'repeat-y');//createPattern はタイリングを設定しますeffect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //このメソッドの目的は、次の場合に画像が処理されないようにすることです。画像は比較的大きなネットワーク画像ファイルなので、すべてがロードされるまで画像は表示されないため、ロード中に描画できます。
drawImg(context,image);
}
functiondrawImg(context,image){
//元の画像を描画します
context.drawImage(image,10,10,125,125);
//ローカル拡大
context.drawImage(image,20,0,90,100,150,10,125,125);
context.rect(20,20,80,80);
context.clip();
context.drawImage(image,0,0,200,200);
}

23. 保存と復元

contex.save(); 現在の状態をスタックに保存します。注: 保存されるのは描画されたグラフィックスの設定と変形のみであり、描画されたグラフィックスの内容は保存されません。 context.restore(); 以前に保存されたグラフィックス状態をスタックから取得します

該当する場合:

(1) 画像またはグラフィックスの変形
(2) 画像のトリミング
(3) 変更時グラフィックス コンテキストのプロパティ: fillStyle、font、globalAlpha、globalComposite-Operation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、
shadowOffsetX、shadowOffsetY、ストロークスタイル、textAlign、textBaseline


24. 線形勾配

コードをコピーします

コードは次のとおりです:

var g=context.createLinearGradient (xStart, yStart,xEnd,yEnd);

var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);

g.addColorStop(0,'red');
g.addColorStop (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);