canvasの概要

    
        //  ，   <canvas>   :
        var canvas = document.getElementById('myCanvas');
        //  ，   context   ：
        //getContext("2d")        HTML5   ，
        //        、  、  、           。
        var context = canvas.getContext('2d');
        
        //canvas        。
        //canvas         (0,0)
        context.beginPath();
        //moveTo(x,y)         
        context.moveTo(0,0);
        //lineTo(x,y)         
        //     
        context.lineTo(0,100);
        context.lineTo(100,100);
        context.lineTo(0,0)
        context.strokeStyle = "#0000FF";
        context.stroke();
//      context.lineWidth = 10;
//      context.fillStyle = "#008000";
//      context.fill();

</code></pre> 
 <h3>2.   </h3> 
 <h5>lineCap:        </h5> 
 <ul> 
  <li>butt   。               。</li> 
  <li>round               。</li> 
  <li>square                。</li> 
 </ul> 
 <h5>context.arc(  1,  2,  3,  4,  5,  6);</h5> 
 <ul> 
  <li>  1   2        </li> 
  <li>  3   </li> 
  <li>  4          </li> 
  <li>  5          </li> 
  <li>  6     |          ：true    ，false    <br> context.arc(200,100,100,0,Math.PI,false);</li> 
 </ul> 
 <pre><code>        //   
        context.beginPath(); //           
        context.arc(200,100,100,0,Math.PI,false);
        context.lineCap = "round";
        context.lineWidth = 15;
        context.strokeStyle = "aquamarine";
        context.stroke();
</code></pre> 
 <h3>3.   </h3> 
 <h5>context.rect(  1,  2,  3,  4);</h5> 
 <ul> 
  <li>  1 ,  2          （  1 X    ，  2 Y    ）</li> 
  <li>  3,    </li> 
  <li>  4    </li> 
 </ul> 
 <h5>       context.createLinearGradient(  1,  2,  3,  4);</h5> 
 <ul> 
  <li>  1 ,  2          （  1 X    ，  2 Y    ）</li> 
  <li>  3,  4          （  3 X    ，  4 Y    ）</li> 
 </ul> 
 <h5>grd.addColorStop(  1,  2);</h5> 
 <ul> 
  <li>  1 ,0~1    </li> 
  <li>  3,  4   </li> 
 </ul> 
 <pre><code>        //  
        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createLinearGradient(0,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();
</code></pre> 
 <h5>      /    context.createRadialGradient(xStart, yStart,radiusStart,xEnd, yEnd,radiusEnd);</h5> 
 <p>-xStart, yStart          。<br> -radiusStart       。<br> -xEnd, yEnd          。<br> -radiusEnd       。</p> 
 <pre><code>        context.beginPath();
        context.rect(0,200,200,100);
        var grd = context.createRadialGradient(200,200,50,200,200,200);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"blue");
        context.fillStyle = grd;
        context.fill();
</code></pre> 
 <h3>4.   </h3> 
 <ul> 
  <li>font -     </li> 
  <li>fillText(text,x,y) -   canvas         </li> 
  <li>strokeText(text,x,y) -   canvas         </li> 
  <li>context.textBaseline       </li> 
  <li>context.textAlign       </li> 
 </ul> 
 <pre><code>        // bold        Arial      
        context.font = "bold 50px Arial";
        context.textBaseline = "middle";
        context.textAlign = "center";
        var grd = context.createLinearGradient(0,0,200,0);
        grd.addColorStop(0,"blue");
        grd.addColorStop(0.5,"yellow");
        grd.addColorStop(1,"red");
        context.fillStyle = grd; 
        context.fillText("hello",100,100);
</code></pre> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1393351671169503232"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">