线条的样式
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)