ホームページ >ウェブフロントエンド >H5 チュートリアル >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(
(5) setTransform(
20. グラフィックの組み合わせ
contex.save(); 現在の状態をスタックに保存します。注: 保存されるのは描画されたグラフィックスの設定と変形のみであり、描画されたグラフィックスの内容は保存されません。 context.restore(); 以前に保存されたグラフィックス状態をスタックから取得します
該当する場合: (1) 画像またはグラフィックスの変形
(2) 画像のトリミング
(3) 変更時グラフィックス コンテキストのプロパティ: fillStyle、font、globalAlpha、globalComposite-Operation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、
shadowOffsetX、shadowOffsetY、ストロークスタイル、textAlign、textBaseline
24. 線形勾配