07、canvasラベルのcanvas変換

1433 ワード

canvas変換
    .translate(x,y)座標基準点オフセット:始点を基準として現在位置に移動する.rotate(弧度):回転弧度公式:角度*PI/180.scale(wb,hb)スケールスケール(canvasが描いた画像をスケール)


	
		
		
		
		
		
		Document
		
	

	
		        ,      !
		
			/*
			      :
				fillStyle:     
				strokeStyle:     
				lineWidth:     (  )
			      :
				lineJoin :        
					miter(   ),round(  ),bevel(  )
				lineCap:     
					butt(   ),round(  ),square(        )
			canvas  
				translate(x,y)
					        :        ,       
				rotate(  ):          :  *PI/180
				scale(wb,hb)    (  canvas     )
			*/
			var ocan = document.getElementById('canvas');
			var oCanvas = ocan.getContext("2d");//  canvas 2d    ;

			oCanvas.fillStyle='#ff00ff';//      
			oCanvas.strokeStyle='#336666';//         
			oCanvas.lineWidth=5;//      (  )
			
			/*    */
			for(var i=0;i<12;i++){
				oCanvas.save();
				oCanvas.translate(250,250);//             
				oCanvas.rotate(30*i*Math.PI/180);//       
				oCanvas.moveTo(0,-160);
				oCanvas.lineTo(0,-190)
				oCanvas.stroke();//    
				//oCanvas.fill();//    
				oCanvas.restore();
			}