canvas基础入门系列教程(3)-绘制直线图形
2.1.绘制直线
2.1.1.设置描边颜色
通过strokeStyle属性来设置线条颜色
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
// 3. 开始绘制图形
// 3.1.把路径移动到画布中的指定点,不创建线条。
ctx.moveTo(100, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(200, 100)
//设置描边颜色
ctx.strokeStyle = 'red'
// 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
ctx.stroke()
2.1.2.设置线条宽度
通过lineWidth属性来设置线条宽度(粗细)
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
// 3. 开始绘制图形
// 3.1.把路径移动到画布中的指定点,不创建线条。
ctx.moveTo(100, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(200, 100)
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 50
// 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
ctx.stroke()
2.1.3.开始新路径
实例: 画两条线,颜色宽度各不相同
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
// 第一条线
ctx.moveTo(100, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(200, 100)
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 20
ctx.stroke()
// 第二条线
ctx.moveTo(250, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(350, 100)
//设置描边颜色
ctx.strokeStyle = 'blue'
//设置线条宽度
ctx.lineWidth = 30
// 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
ctx.stroke()
上面代码中,虽然画第二条线的颜色和大小都和第一条线不一样,但是因为上面两条线都是属于同一个路径,那么后面的 ctx.strokeStyle = 'blue’会覆盖前面的ctx.strokeStyle = ‘red’,同理,ctx.lineWidth = 30会覆盖前面的ctx.lineWidth = 20,这样看起来两条线就是一样的颜色和大小
为了解决上面的问题,我们可以使用beginPath函数来开始一个新的路径
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
//开始一条新路径
ctx.beginPath()
// 第一条线路径
ctx.moveTo(100, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(200, 100)
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 20
ctx.stroke()
ctx.beginPath()
// 第二条线路径
ctx.moveTo(250, 100)
// 3.2.添加一个新点,然后创建从该点到画布中最后指定点的线条,不会创建真正的线条
ctx.lineTo(350, 100)
//设置描边颜色
ctx.strokeStyle = 'blue'
//设置线条宽度
ctx.lineWidth = 130
// 3.3.实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径
ctx.stroke()
使用beginPath表示开始一条新路径,意味着另一条路径的结束,上面代码中就会有两条路径,这样每条路径就可以使用自己的样式,而不会被覆盖
总结:开启一条新路径用beginPath
2.1.4.关闭路径
通过前面的学习,我们可以使用三条线来画出一个三角形
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
ctx.moveTo(100, 50)
ctx.lineTo(200, 50)
ctx.lineTo(200, 150)
ctx.lineTo(100, 50)
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 1
ctx.stroke()
当我们把lineWidth设置大一些的时候,三角形不能完全闭合
ctx.lineWidth = 10
我们可以使用closePath来自动关闭路径,就可以解决上面的问题
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
ctx.moveTo(100, 50)
ctx.lineTo(200, 50)
ctx.lineTo(200, 150)
// ctx.lineTo(100, 50)
ctx.closePath()
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 30
ctx.stroke()
注意: closePath表示关闭路径,关闭路径就是指将同一路径的起点和终点连接起来,使其成为一个封闭的图形,这里的closePath并不是一定要和beginPath成对出现的,一定要注意,beginPath表示开启了一条新的路径,意味着前一条路径结束,它们俩的功能是完全不同的
使用closePath后的效果:
2.1.5.线帽样式
线帽样式通俗的说就是给线条带帽子,在线条开始和结束处增加一些样式
ctx.lineCap = '样式'
上面语法中的样式有三种:
1. butt 默认值,没有线帽
2. round 圆形
3. square 正方形
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cvs{
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="300"></canvas>
<script>
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(100, 50)
ctx.lineTo(200, 50)
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 10
//默认无线帽
ctx.lineCap = 'butt'
ctx.stroke()
ctx.beginPath()
ctx.moveTo(100, 150)
ctx.lineTo(200, 150)
//设置描边颜色
ctx.strokeStyle = 'green'
//设置线条宽度
ctx.lineWidth = 10
//圆形线帽
ctx.lineCap = 'round'
ctx.stroke()
ctx.beginPath()
ctx.moveTo(100, 250)
ctx.lineTo(200, 250)
//设置描边颜色
ctx.strokeStyle = 'orangered'
//设置线条宽度
ctx.lineWidth = 10
//正方形线帽
ctx.lineCap = 'square'
ctx.stroke()
</script>
</body>
</html>
效果如下:
2.1.6.两条线相交处样式
两条直线相交的拐点是可以设置样式的
ctx.lineJoin = '样式'
样式有三种:
1.miter 默认尖角
2.round 圆角
3.bevel 斜角
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cvs{
border: 1px solid #ddd;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="300"></canvas>
<script>
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(150, 50)
ctx.lineTo(300, 100)
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 10
//默认尖角
ctx.lineJoin = 'miter'
ctx.stroke()
ctx.beginPath()
ctx.moveTo(100, 150)
ctx.lineTo(150, 100)
ctx.lineTo(300, 150)
//设置描边颜色
ctx.strokeStyle = 'green'
//设置线条宽度
ctx.lineWidth = 10
// 圆角
ctx.lineJoin = 'round'
ctx.stroke()
ctx.beginPath()
ctx.moveTo(100, 200)
ctx.lineTo(150, 150)
ctx.lineTo(300, 200)
//设置描边颜色
ctx.strokeStyle = 'black'
//设置线条宽度
ctx.lineWidth = 10
// 斜角
ctx.lineJoin = 'bevel'
ctx.stroke()
</script>
</body>
</html>
效果如下:
2.1.7.虚线样式
可以通过setLineDash()来定义虚线样式
ctx.setLineDash(array)
实例:
// 1. 获取到canvas对象
var oCanvas = document.getElementById('cvs')
// 2. 获取到上下文环境
var ctx = oCanvas.getContext('2d')
ctx.moveTo(100, 50)
ctx.lineTo(400, 50)
//设置描边颜色
ctx.strokeStyle = 'red'
//设置线条宽度
ctx.lineWidth = 10
//18px实线 5px空白
ctx.setLineDash([18, 5])
ctx.stroke()
效果如下:
上面代码如果修改成这样
//10px实线,5px空白,20px实线,10px空白
ctx.setLineDash([10, 5, 20, 10])
效果如下:
2.1.8.练习
画出下面图形