27 canvas绘制路径
27 canvas绘制路径图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。1canvas绘制路径步骤1.首先，你需要创建路径起始点。2.然后你使用画图命令去画出路径3.之后你把路径封闭。4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。2绘制三角形APIbeginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。...
·
27 canvas绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
1 canvas绘制路径步骤
1.首先，你需要创建路径起始点。
2.然后你使用画图命令去画出路径
3.之后你把路径封闭。
4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
2 绘制三角形
API
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，
然后我们就可以重新绘制新的图形。
moveTo(x, y)
将笔触移动到指定的坐标x以及y上
当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点
lineTo(x, y)
将笔触移动到指定的坐标x以及y上
绘制一条从当前位置到指定x以及y位置的直线。
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
但是调用stroke()时不会自动闭合
stroke()
通过线条来绘制图形轮廓。
不会自动调用closePath()
fill()
通过填充路径的内容区域生成实心的图形。
自动调用closePath()示例
<head>
<meta charset="UTF-8">
<title>03_绘制路径</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
// 将笔触移动到指定的坐标x以及y上
ctx.moveTo(10,10);
// 绘制一条从当前位置到指定x以及y位置的直线
ctx.lineTo(30,10);
ctx.lineTo(30,50);
// 通过线条来绘制图形轮廓
ctx.stroke();
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
// 将笔触移动到指定的坐标x以及y上
ctx.moveTo(60,60);
// 绘制一条从当前位置到指定x以及y位置的直线
ctx.lineTo(80,60);
ctx.lineTo(80,100);
// 关闭路径
ctx.closePath();
// 通过线条来绘制图形轮廓
ctx.stroke();
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
// 将笔触移动到指定的坐标x以及y上
ctx.moveTo(110,110);
// 绘制一条从当前位置到指定x以及y位置的直线
ctx.lineTo(130,110);
ctx.lineTo(130,150);
// 通过填充路径的内容区域生成实心的图形
ctx.fill();
}
</script>
</body>效果
2 绘制矩形路径
语法
rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。
也就是说，当前笔触自动重置会默认坐标示例
<head>
<meta charset="UTF-8">
<title>04_绘制矩形路径</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
// 绘制矩形路径
ctx.rect(20,20,100,150);
// 通过线条来绘制图形轮廓
ctx.stroke();
}
</script>
</body>效果
3 lineCap每一条线段末端的属性
lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
有3个可能的值，分别是：
butt :线段末端以方形结束。
round :线段末端以圆形结束
square:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
默认值是 butt。示例
<head>
<meta charset="UTF-8">
<title>05_lineCap</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 设置线条宽度
ctx.lineWidth = 30;
ctx.lineCap = "butt";
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
ctx.moveTo(50,20);
ctx.lineTo(50,120);
// 通过线条来绘制图形轮廓
ctx.stroke();
ctx.lineCap = "round";
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(100,120);
// 通过线条来绘制图形轮廓
ctx.stroke();
ctx.lineCap = "square";
// 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
ctx.beginPath();
ctx.moveTo(150,20);
ctx.lineTo(150,120);
// 通过线条来绘制图形轮廓
ctx.stroke();
}
</script>效果
4 save&restore
save
save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法
保存到栈中的绘制状态有下面部分组成：
当前的变换矩阵。
当前的剪切区域。
当前的虚线列表.
以下属性当前的值：
strokeStyle,
fillStyle,
lineWidth,
lineCap,
lineJoin...
restore
restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。
如果没有保存状态，此方法不做任何改变示例
<head>
<meta charset="UTF-8">
<title>05_lineCap</title>
<style>
#test{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #BBAAFF;
}
</style>
</head>
<body>
<canvas id="test" width="300" height="300">您的浏览器不支持canvas，请升级</canvas>
<script type="application/javascript">
var canvas = document.querySelector("#test");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
// 设置线条宽度
ctx.lineWidth = 10;
// 设置线条颜色
ctx.strokeStyle = "red";
ctx.save();
ctx.strokeStyle = "yellow";
ctx.save();
ctx.strokeStyle = "green";
ctx.save();
ctx.strokeStyle = "blue";
ctx.save();
ctx.beginPath();
ctx.moveTo(10,20);
ctx.lineTo(10,120);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.moveTo(30,20);
ctx.lineTo(30,120);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.moveTo(50,20);
ctx.lineTo(50,120);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.moveTo(70,20);
ctx.lineTo(70,120);
ctx.stroke();
ctx.restore();
ctx.beginPath();
ctx.moveTo(90,20);
ctx.lineTo(90,120);
ctx.stroke();
}
</script>
</body>效果
结论
在实际使用中save()与restore()成对出现。采用以下格式将保障每个新的路径不会相互影响。
// 压栈
ctx.save();
// 设置样式
ctx.beginPath();
//绘制具体路径
// 出栈
ctx.restore();
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)