HTML 5 Canvas 2 D図面

<canvas id="myCanvas" width="400" height="300">
       canvas ，        。
</canvas>

var elem = document.getElementById('myCanvas');
var ctx = elem.getContext('2d');

<script type="text/javascript">
<!--
var elem = document.getElementById('myCanvas');
var ctx = elem.getContext('2d');
ctx.lineWidth = 1;//       ，   ，   1
ctx.strokeStyle = 'rgba(255,0,0,0.5)';//      
ctx.moveTo(10, 10);//     (10, 10)
ctx.lineTo(100, 100);//     (100, 100)
ctx.stroke();//      canvas 
-->
</script>

ctx.strokeStyle = 'rgba(255,0,0,1.0)';
ctx.strokeStyle = 'red';
ctx.strokeStyle = 'f00';
ctx.strokeStyle = '#ff0000';

 
  
 
  
4.  绘制曲线
 
  
 
   
ctx.beginPath();//     
ctx.strokeStyle = 'rgba(255,0,0,0.5)';//      
ctx.moveTo(0, 0);//    (10,10)
ctx.quadraticCurveTo(100,0,100,100);//             ，            
ctx.stroke();//      canvas 
  
制御点座標が(100,0)のときの曲線
制御点座標が(80,20)のときの曲線
quadraticCurveTo(x1,y1,x2,y2);この関数を呼び出すと、始点は現在の座標、終点は(x 2,y 2)、(x 1,y 1)は制御点座標、制御点が演じる役割は曲線に引張力があり、制御点の位置を調整することで曲線の曲率を変更することができます.
  
  
5.パスの描画
ctx.lineWidth = 5;//       ，   1
ctx.lineJoin = 'round';//        
ctx.fillStyle = 'rgba(255,0,0,0.5)';//    
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//    
ctx.beginPath();//    
ctx.moveTo(10, 10);//     (10, 10)
ctx.lineTo(10, 100);//     (10, 100)
ctx.lineTo(40, 100);//     (40, 100)
ctx.closePath();//    ，            
ctx.stroke();//         canvas 
ctx.fill();//       
  
  
6.長方形を描く
ctx.fillStyle = 'rgba(255,0,0,0.5)';//    
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//    
ctx.strokeRect(0, 0, 50, 50);//        
ctx.fillRect(55, 0, 50, 50);//         
  
  
  
  
7.円を描く
ctx.arc(100, 100, 50, 0, Math.PI * 2);// 0 2pi, (230,90)   ,  50  
ctx.closePath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';//    
ctx.strokeStyle = 'rgba(0,0,255,0.5)';//    
ctx.lineWidth = 5;
ctx.fill();//       
ctx.stroke();//       
  
  
arc(x, y, radius, startAngle, endAngle, anticlockwise);全部で6つのパラメータがあります.(x,y)は円心の座標、radiusは半径、startAngleは円を描き始める角度、endAngleは円を描き終わる角度、anticlockwiseは円を描く方向(オプション、デフォルト値はfalse、反時計回りを使用).startAngleとendAngleの角度は円弧計算を用い,円弧全体2 piである.詳しくはここをご覧ください.
  
8.テキストの描画
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.strokeStyle = 'rgba(0,255,0,0.5)';
ctx.font = '40px serif';
//ctx.textAlign = 'center';//       (x,y)       
ctx.textBaseline = 'top';//       ，      (x,y)         。
ctx.fillText('Hello World！', 0, 0);
ctx.fillText('Hello World！', 0, 50, 50);
ctx.strokeText('Hello World！', 120, 0);
ctx.strokeText('Hello World！', 120, 50, 200);//      
  
  
contextテキストを描画する機能は、2つの関数で構成されています.
fillText(text, x, y, maxwidth); 
strokeText(text, x, y, maxwidth); 
maxwidthというパラメータはオプションで、テキストの最大描画幅を表します.この幅を超えると、テキストを指定した寸法に強制的に収縮させ、小さい場合は収縮させません.
ctx.measureText('text').width;現在のcontext環境で指定したテキストの幅を返すことができます.
textAlignおよびtextBaselineについては、ここで詳細を確認できます.
canvasはまた、CSS要素を適用して枠線などを設定することもできます.また、一部のCSS属性は、フォントスタイルなどのCSS内の要素に継承され、canvasで文字を描画し、デフォルトのスタイルはcanvasと同じです.
  
9.アニメーションを作る
  
ここではJSのアニメーションフレームワークを紹介し,フレーム単位で描画する方法を用いた.
http://www.funnyhao.com/a-js-animation-framework-based-on-html5-canvas/  
  
アニメーションの制作では、複数のシーンに関わる場合、時間軸のようなものが必要で、ある時間になるとシーンをトリガーしますが、JSにはsleepメソッドがないので面倒で、簡単にsetIntervalを使って実現できますが、構造が制御しにくいです.1つのシーンは前のシーンの後に発生しなければならないので、これにより、ループネストが発生しやすくなります.もう1つの考え方は、そのシーンにどれだけの時間がかかるかを直接算出し、指定された時間を待ってシーンをトリガする方法ですが、このような方法ではユーザがページを切り替えやすく、時間が継続することになりますが、アニメーションが描画を停止し、画面の不同期の問題を引き起こします.
var time = 0;//     
sceneOne();//  1

time += timeScene1;//    1     
var int2 = setInterval((function()
{
    clearInterval(int2);
    sceneTwo();//    2
}), time);

time += timeScene2;
var int3 = setInterval((function()
{
    clearInterval(int3);
    sceneThree();//    3
}), time);
  
Jsecxのjsライブラリはsleepのような方法を実現することができ、知っているのが遅いため、土の方法で小さなアニメーションを作ったが、後で研究する.
前に作成した簡単なHTML 5 Canvasアニメーションを2つ添付します.Happy New Year 2012Starry-Starry-Night.