[前端] canvas 设置拐角类型、裁切、曲线、转换等

HTML：

<canvas id="myCanvas" width="500" height="300"></canvas>

1、createPattern() 方法在指定的方向内重复指定的元素

参数	描述
image	规定要使用的图片、画布或视频元素。
repeat	默认。该模式在水平和垂直方向重复。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("zhaoliying");
var pat=ctx.createPattern(img,"repeat");
ctx.width = 500;
ctx.height = 300;
ctx.rect(0,0,ctx.width,ctx.height);
ctx.fillStyle=pat;
ctx.fill();

2、lineCap 属性设置或返回线条末端线帽的样式

值	描述
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle="green";
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(80,100);
ctx.stroke();

3、lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时

值	描述
bevel	创建斜角。
round	创建圆角。
miter	默认。创建尖角。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineJoin="round";
ctx.lineWidth = 10;
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();

4、clearRect() 方法清空给定矩形内的指定像素 （通常用来清空画布）

参数	描述
x	要清除的矩形左上角的 x 坐标
y	要清除的矩形左上角的 y 坐标
width	要清除的矩形的宽度，以像素计
height	要清除的矩形的高度，以像素计

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,100);

5、miterLimit 属性设置或返回最大斜接长度（斜接长度指的是在两条线交汇处内角和外角之间的距离）

值	描述
number	正数。规定最大斜接长度。 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeStyle= "green";
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

6、arcTo() 方法在画布上创建介于两个切线之间的弧/曲线

参数	描述
x1	弧的起点的 x 坐标
y1	弧的起点的 y 坐标
x2	弧的终点的 x 坐标
y2	弧的终点的 y 坐标
r	弧的半径

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);           // 创建开始点 ctx.lineTo(100,20);          // 创建水平线 ctx.arcTo(150,20,150,70,50); // 创建弧 ctx.lineTo(150,120);         // 创建垂直线 ctx.stroke();                // 进行绘制

7、clip() 方法从原始画布中剪切任意形状和尺寸

提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域 ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形 ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);

8、bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点

• 开始点：moveTo(20,20)
• 控制点 1：bezierCurveTo(20,100,200,100,200,20)
• 控制点 2：bezierCurveTo(20,100,200,100,200,20)
• 结束点：bezierCurveTo(20,100,200,100,200,20)

参数	描述
cp1x	第一个贝塞尔控制点的 x 坐标
cp1y	第一个贝塞尔控制点的 y 坐标
cp2x	第二个贝塞尔控制点的 x 坐标
cp2y	第二个贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();

9、quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点

• 开始点：moveTo(20,20)
• 控制点：quadraticCurveTo(20,100,200,20)
• 结束点：quadraticCurveTo(20,100,200,20)

参数	描述
cpx	贝塞尔控制点的 x 坐标
cpy	贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();

10、isPointInPath() 方法返回 true，如果指定的点位于当前路径中；否则返回 false

参数	描述
x	测试的 x 坐标
y	测试的 y 坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50)) {  // true  ctx.stroke();
}

11、scale() 方法缩放当前绘图，更大或更小

参数	描述
scalewidth	缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
scaleheight	缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="green";
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);

12、rotate() 方法旋转当前的绘图

参数	描述
angle	旋转角度，以弧度计。 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。 举例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="green";
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);

13、translate() 方法重新映射画布上的 (0,0) 位置

参数	描述
x	添加到水平坐标（x）上的值
y	添加到垂直坐标（y）上的值

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="green";
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);

14、画布上的每个对象都拥有一个当前的变换矩阵

transform() 方法替换当前的变换矩阵。它以下面描述的矩阵来操作当前的变换矩阵：

a  c  e
b  d  f
0  0  1

context.transform(a,b,c,d,e,f);

参数	描述
a	水平缩放绘图
b	水平倾斜绘图
c	垂直倾斜绘图
d	垂直缩放绘图
e	水平移动绘图
f	垂直移动绘图

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

15、setTransform() 方法把当前的变换矩阵重置为单位矩阵

参数	描述
a	水平旋转绘图
b	水平倾斜绘图
c	垂直倾斜绘图
d	垂直缩放绘图
e	水平移动绘图
f	垂直移动绘图

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);

ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);

从上面可以看出红色的已经被重置成蓝色的了

16、measureText() 方法返回包含一个对象，该对象包含以像素计的指定字体宽度

参数	描述
text	要测量的文本。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
var txt="Hello World" ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
ctx.fillText(txt,10,100);

就到这里了，，谢谢关注~