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)