1.1 canvas基本紹介
15791 ワード
まずhtml 5のcanvasがどのように配置されているか、一般的なhtmlラベルと同様にcanvasもhtmlのラベルです.jsをdomツリーの要素のように操作することでcanvasを操作することもできます.canvasラベルは以下のように定義されます.
canvasにstyleプロパティを追加したり、canvasの幅と高さを追加したりすることもできます.canvasは速いキャンバスのように、cssでdivを操作するようにこのキャンバスの開始状態を操作することができます.canvasキャンバスの状態を確定してから、jsでこのキャンバスに絵を創作することができます.
これで、縦横400のキャンバスを用意しました.
canvasラベルが定義されました.この空白の紙に必要な図形を描くにはどうすればいいですか.
私达はすべて画家が1枚の美しい絵を描くことを知っていて、私达はこの画家の絵工がどんなに良くても、彩筆がどんなに豊富で、キャンバスがどんなに良いかにかかわらず.少なくともこの画家はこのキャンバス(キャンバスを前に置く)を手に入れてから絵を描くことができます.
canvasも同じように、jsを利用してこのキャンバスを手に入れる必要があります.jsは次のように定義されています.
前述したように、canvasのjs操作は、通常のラベル操作と同様にdocumentでcanvasラベルの制御権を得る必要があります.
私たちはcanvasを手に入れた後、キャンバスを手に入れたのはもちろんキャンバスを描いたのです.canvasには2 dと3 dキャンバスの違いがあります.ここで定義します.canvasを2 dキャンバスとして表します(2次元空間の描画を話しています.後で3 dの部分を話す暇があります).
このコードを使用して、2 Dキャンバスを定義することができます.今、この2 Dキャンバスcontextで作成します.
下に五角星を描きます.次は完全な五角星を描くコードです.
今日のこの部分は主にcanvasの基礎に対する理解で、次の節、私は下の直線、多角形の描画について話します.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <canvas id="canvas"> html5<canvas>
9 </body>
10 </html>canvasにstyleプロパティを追加したり、canvasの幅と高さを追加したりすることもできます.canvasは速いキャンバスのように、cssでdivを操作するようにこのキャンバスの開始状態を操作することができます.canvasキャンバスの状態を確定してから、jsでこのキャンバスに絵を創作することができます.
1 <canvas id="canvas" width="1024" height="768" style="border: 1px solid #aaa;display:block;margin: auto;">これで、縦横400のキャンバスを用意しました.
canvasラベルが定義されました.この空白の紙に必要な図形を描くにはどうすればいいですか.
私达はすべて画家が1枚の美しい絵を描くことを知っていて、私达はこの画家の絵工がどんなに良くても、彩筆がどんなに豊富で、キャンバスがどんなに良いかにかかわらず.少なくともこの画家はこのキャンバス(キャンバスを前に置く)を手に入れてから絵を描くことができます.
canvasも同じように、jsを利用してこのキャンバスを手に入れる必要があります.jsは次のように定義されています.
1 var canvas=document.getElementById("canvas");前述したように、canvasのjs操作は、通常のラベル操作と同様にdocumentでcanvasラベルの制御権を得る必要があります.
私たちはcanvasを手に入れた後、キャンバスを手に入れたのはもちろんキャンバスを描いたのです.canvasには2 dと3 dキャンバスの違いがあります.ここで定義します.canvasを2 dキャンバスとして表します(2次元空間の描画を話しています.後で3 dの部分を話す暇があります).
1 var context=canvas.getContext('2d');このコードを使用して、2 Dキャンバスを定義することができます.今、この2 Dキャンバスcontextで作成します.
下に五角星を描きます.次は完全な五角星を描くコードです.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <canvas id="canvas" style="display:block;margin: auto;"></canvas>
9 </body>
10
11
12 <script>
13 var WINDOW_WIDTH=1024; //
14 var WINDOW_HEIGHT=568; //
15 window.onload=function(){
16 var canvas=document.getElementById("canvas");
17 canvas.width=WINDOW_WIDTH;
18 canvas.height=WINDOW_HEIGHT;
19 var context=canvas.getContext('2d');
20 drawStar(context,400,300,150,300,0)
21
22
23
24
25 }
26 function drawStar(cxt,x,y,r,R,ret){ // , x，y。 r,R. ， ，
27 cxt.beginPath();
28 for(var i=0;i<5;i++){
29 cxt.lineTo(Math.cos((18+72*i)/180*Math.PI+ret)*R+x,
30 -Math.sin((18+72*i)/180*Math.PI+ret)*R+y); //
31 cxt.lineTo(Math.cos((54+72*i)/180*Math.PI+ret)*r+x,
32 -Math.sin((54+72*i)/180*Math.PI+ret)*r+y); //
33 }
34 cxt.closePath();
35 cxt.stroke();
36 }
37 </script>
38 </html>今日のこの部分は主にcanvasの基礎に対する理解で、次の節、私は下の直線、多角形の描画について話します.