html 5でcanvasに描画

canvasはJavaScriptによって制御され、そのサイズは描画時に決定されなければならず、canvas要素のサイズを制御または変更することはできません.

//html  

<canvas id="my_canvas" width="150" height="150">

	fallback content here

</canvas>



//js  

//  JavaScript         canvas  

var canvas=document.getElement('my_canvas');

//   id    canvas,      canvas getContext  

if(canvas.getContext){

	//2d             ,        

	var context=canvas.getContext("2d");

	//          

	context.fillStyle="rgb(200,0,0)";

	//         X\Y,   ,          (10,10)     100    

	context.fillRect(10,10,100,100);

	//        

	context.font='italic 40px sans-serif';

	context.textBaseline='top';

	context.fillText('AwesomeCo',60,0);

	// canvas     

	context.lineWidth=2;

	context.beginPath();

	//    

	context.moveTo(0,40);

	context.lineTo(30,0);

	context.lineTo(60,40);

	context.lineTo(285,40);

	//     stroke        

	context.stroke();

	context.closePath();

	//      

	//          save()      ，       ，      ，           

        //       restore()           

	context.save();

	//       ，       

	context.translate(20,20);

	context.fillRect(0,0,20,20);

	//     

	//       

	context.fillStyle='#fff';//                 rgb(a,b,c)     ‘#abc’  

	//strokeStyle             

	context.strokeStyle='#fff';



	context.lineWidth=2;

	context.beginPath();

	context.moveTo(0,20);

	context.lineTo(10,0);

	context.lineTo(20,20);

	context.lineTo(0,20);

	context.fill();

	context.closePath();

	context.restore();

}else{

	//        canvas          canvas     

}

     ：

  stroke fill,strokeStyle fillStyle   

stroke:  ，  ，  

fill:       

   stroke fill      

context.lineWidth=;

context.beginPath()

/**/

/**/

context.closePath();

stroke  /**/   

context.strokeSytle=;

context.stroke();

fill  /**/   

context.fillStyle=;

context.fill();

            ，               

  IE9            canvas  ，Google       ExplorerCanvas  ， IE          Canvas APi

          js     

<!--[if lte IE 8]>

<script type=”text/javascript” 

        charset=”utf-8”

        src=”js/excanvas.js”>

</script>
<!--[endif]-->