ホームページ > 記事 > ウェブフロントエンド > Canvas 入門 (1): 長方形、円、直線、曲線などの基本的なグラフィックを描画します_html/css_WEB-ITnose
Canvas 入門 (1): 長方形、円、直線、曲線などの基本的なグラフィックを描画します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:56:301071ブラウズ
出典: http://www.ido321.com/968.html
1. Canvas の基礎知識
Canvas は、グラフィックの描画に特に使用される HTML 5 の新しい要素です。 Canvas 要素は、無色透明の領域「キャンバス」に相当し、そこに描画するためのスクリプトを JavaScript を使用して記述する必要があります。
Canvas 要素をページに配置するのは非常に簡単です。5ba626b379994d53f7acf72a64f9b697 タグを使用して、ID、幅、高さのいくつかの基本属性を指定します。次に、いくつかの小さなケースを通してキャンバスを始めましょう~~~^_^~~~
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 的ID16: 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