Canvas 入門 (1): 長方形、円、直線、曲線などの基本的なグラフィックを描画します_html/css

Canvas 入門 (1): 長方形、円、直線、曲線などの基本的なグラフィックを描画します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:30

オリジナル

1109 人が閲覧しました

出典: http://www.ido321.com/968.html

1. Canvas の基礎知識

Canvas は、グラフィックの描画に特に使用される HTML 5 の新しい要素です。 Canvas 要素は、無色透明の領域「キャンバス」に相当し、そこに描画するためのスクリプトを JavaScript を使用して記述する必要があります。

Canvas 要素をページに配置するのは非常に簡単です。

2. キャンバスの小さなケース (テスト結果は Google の最新バージョンからのものです)

1. 長方形を描画します

キャンバス。 html:

rree rree rree rree rree rree rree rree rree rree rree rree

canvas.js:

rree rree rree rree reee

   1: <!DOCTYPE >

ログイン後にコピー

   2: <html>

ログイン後にコピー

   3: <head>

ログイン後にコピー

   4: <meta charset="utf-8">

ログイン後にコピー

   5: <title>canvas元素学习</title>

ログイン後にコピー

   6: <script type="text/javascript" src="canvas.js">

ログイン後にコピー

   7: </script>

ログイン後にコピー

13: // 長方形を描画します、 fillStyle, fillRect (ストロークRect) で塗りつぶします。最初の 2 つのパラメータは長方形の左上隅の位置で、最後の 2 つのパラメータはそれぞれ幅と高さです

//デフォルトの原点は長方形の左上隅ですキャンバス

   8: </head>

ログイン後にコピー

   9: <body>

ログイン後にコピー

  10:     <h3>canvas元素学习</h3>

ログイン後にコピー

  11:     <canvas id="canvas" width="400" height="300"></canvas>

ログイン後にコピー

  12: </body>

ログイン後にコピー

  13: </html>

ログイン後にコピー

   1: window.onload=function()

ログイン後にコピー

   2: {

ログイン後にコピー

効果:

2. 円を描く: パスを使用して描画します

   3:     // 获取canvas 的ID

ログイン後にコピー

   4:     var canvas = document.getElementById('canvas');

ログイン後にコピー

   5:     if (canvas == null)

ログイン後にコピー

rrリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー

   6:     {

ログイン後にコピー

   7:         return false;

ログイン後にコピー

   8:     }

ログイン後にコピー

   9:     // 获取上下文

ログイン後にコピー

  10:     var context = canvas.getContext('2d');

ログイン後にコピー

  11:     // 设置填充的样式

ログイン後にコピー

  12:     context.fillStyle = "#eeeeff";

ログイン後にコピー

  14:     context.fillRect(0,0,400,300);

ログイン後にコピー

arc() は円弧を描きます。パラメータは次のとおりです

arc(x,y,radius,startAngle,endAngle,anticlickwise):x,y は中心位置です円弧、radius は半径、startAngle と endAngle は開始角度と終了角度、単位はラジアン (度はラジアンに変換する必要があります)、反時計回りはブール値です。true はイメージを時計回りに描画することを意味し、false はイメージを反時計回りに描画することを意味します。開始角度は 0、終了角度は 360 (PI*2) で円を描きます。

効果:

3. 直線を描画します

直線を描画するには、moveTo() と lineTo() の 2 つのメソッドを使用します

  15:     context.fillStyle = 'red';

ログイン後にコピー

  16:     // 设置边框的样式

ログイン後にコピー

  17:     context.strokeStyle = 'blue';

ログイン後にコピー

  18:     // 设置边框大小

ログイン後にコピー

  19:     context.lineWidth = 2;

ログイン後にコピー

  20:     context.fillRect(50,50,100,100);

ログイン後にコピー

  21:     // 绘制矩形边框

ログイン後にコピー

  22:     context.strokeRect(50,50,100,100);

ログイン後にコピー

  23: }

ログイン後にコピー

うーん

13: コンテキスト.beginPath( );

//パラメータ line の始点座標

14: context.moveTo(50,50);

//パラメータ line の終点座標

   1: // 获取canvas 的ID

ログイン後にコピー

16: context.closePath ();

//パスを閉じてからグラフを描画します

   2:     var canvas = document.getElementById('canvas');

ログイン後にコピー

   3:     if (canvas == null)

ログイン後にコピー

効果:

複雑な点を描画します

   4:     {

ログイン後にコピー

   5:         return false;

ログイン後にコピー

   6:     }

ログイン後にコピー

   7:     // 获取上下文

ログイン後にコピー

   8:     var context = canvas.getContext('2d');

ログイン後にコピー

   9:     // 设置填充的样式

ログイン後にコピー

  10:     context.fillStyle = "#eeeeff";

ログイン後にコピー

リー、レリー、レリー、レリー、レリー、レリー、レリー、レリー、レリー

  11:     // 绘制矩形,以fillStyle填充

ログイン後にコピー

  12:     context.fillRect(0,0,400,300);

ログイン後にコピー

  13:     for(var i = 0; i<9; i++)

ログイン後にコピー

  14:     {

ログイン後にコピー

  15:         // 创建路径

ログイン後にコピー

  16:         context.beginPath();

ログイン後にコピー

  17:         // 绘制圆形路径

ログイン後にコピー

  18:         context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);

ログイン後にコピー

  19:         // 关闭路径，如果不关闭，则图像会重叠

ログイン後にコピー

  20:         context.closePath();

ログイン後にコピー

  21:         context.fillStyle = 'rgba(255,0,0,0.25)';

ログイン後にコピー

  22:         // 以fillStyle填充

ログイン後にコピー

効果:

4. 曲線を描画する: bezierCurveTo を使用してベジェ曲線を描画します

bezierCurveTo は曲線を描くことができます。これは lineTo の曲線バージョンです

RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE RREE reee

  23:         context.fill();

ログイン後にコピー

Effect

次の記事: 入門キャンバス (2): グラフィックのグラデーションと画像の形状の変換