H5_畫布二

線條的樣式

lineWidth：設置線條的寬度（不需要加px）
lineCap：設置線條末端線帽的樣式（butt 、 round 、 square)

context.lineWidth=10;

context.moveTo(20,20);
context.lineTo(80,20);
context.lineCap='butt';
context.stroke();
			
context.beginPath();
context.moveTo(20,40);
context.lineTo(80,40);
context.lineCap='round';
context.stroke();
			
context.beginPath();
context.moveTo(20,60);
context.lineTo(80,60);
context.lineCap='square';
context.stroke();

lineJoin：設置兩條線交匯時所創建的邊角的類型（bevel 、 round 、 miter默認）
注意！！：兩條線是一條路徑！！

	context.lineWidth=10;
			
	context.moveTo(20,20);
	context.lineTo(80,40);
	context.lineTo(20,60)
	context.lineJoin="bevel";
	context.stroke();		
			
	context.beginPath();
	context.moveTo(20,80);
	context.lineTo(80,100);
	context.lineTo(20,120)
	context.lineJoin="round";
	context.stroke();
					
	context.beginPath();
	context.moveTo(20,140);
	context.lineTo(80,160);
	context.lineTo(20,180)
	context.lineJoin="miter";
	context.stroke();		

miterLimit：設置最大斜接長度，默認爲10

			context.lineWidth=10;
			context.lineJoin='miter';
			context.miterLimit=10;//默認
			
			context.beginPath();
			context.moveTo(20,20);
			context.lineTo(160,40);
			context.lineTo(20,60);
			context.stroke();

			context.lineWidth=10;
			context.lineJoin='miter';
			context.miterLimit=5;//默認
			
			context.beginPath();
			context.moveTo(20,20);
			context.lineTo(160,40);
			context.lineTo(20,60);
			context.stroke();

畫布轉換和狀態保存

畫布轉換指的是轉換畫布的座標系

• 平移——translate(x,y)
  重新映射畫布上的 (0,0) 位置

context.moveTo(30,30);
context.lineTo(90,90);
context.lineTo(30,150);
context.lineTo(30,30);
context.lineWidth=10;
context.strokeStyle="darkgreen";
context.stroke();
context.translate(100,100);
context.moveTo(30,30);
context.lineTo(90,90);
context.lineTo(30,150);
context.lineTo(30,30);
context.lineWidth=10;
context.strokeStyle="darkgreen";
context.stroke();

• 旋轉——rotate(deg)
  改變座標系 x 與 y 軸的指向
  參數 angle —— 旋轉角度，以弧度計。
  • 正值表示順時針方向旋轉
  • 負值表示逆時針方向旋轉
  • 將角度轉換爲弧度公式

angle = degrees/180*Math.PI

• 縮放——scale(sx,sy)