canvas的基础使用
- 一、画一条直线
- 二、线的属性设置
- 三、防止多次绘制的样式污染
- 四、闭合
- 五、快捷绘制矩形
- 六、绘制圆形
- 七、绘制文字
- 八、绘制图片
- js版
- dom版
- 图片截取
一、画一条直线
画一条直线需要用到三个方法：cxt.moveTo、cxt.lineTo、cxt.stroke
<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas>
<script>
const c=document.getElementById('c')
const cxt = c.getContext('2d')
cxt.moveTo(100,100) //定义起点
cxt.lineTo(200,150) //定义途径点
cxt.stroke() //把点连起来
</script>
效果：
二、线的属性设置
1、线的宽度
cxt.lineWidth = 20
2、线的颜色
cxt.strokeStyle = 'pink'
3、线两端样式
cxt.lineCap = 'round' // 默认: butt; 圆形: round; 方形: square
4、拐角样式
cxt.lineJoin = 'round' // miter: 默认值，尖角;round: 圆角;bevel: 斜角
5、虚线样式
cxt.setLineDash([10]) // 只传1个参数，实线与空白都是 10px
cxt.setLineDash([10, 20]) // 2个参数，此时，实线是 10px, 空白 20px
cxt.setLineDash([10, 20, 5]) // 传3个以上的参数，此例：10px实线，20px空白，5px实线，10px空白，20px实线，5px空白 ……
三、防止多次绘制的样式污染
使用cxt.beginPath()重新开启一个路径
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.moveTo(100,100)
cxt.lineTo(200,100)
cxt.lineWidth = 20
cxt.strokeStyle = 'pink'
cxt.lineCap = 'round'
cxt.stroke()
cxt.beginPath() // 重新开启一个路径
cxt.moveTo(20, 120.5)
cxt.lineTo(200, 120.5)
cxt.lineWidth = 4
cxt.strokeStyle = 'red'
cxt.stroke()
四、闭合
使用cxt.closePath() 方法可以对折线进行闭合
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.moveTo(50,50)
cxt.lineTo(50,100)
cxt.lineTo(100,100)
cxt.closePath() // 闭合操作，一定要在stroke之前写
cxt.lineWidth = 2
cxt.strokeStyle = 'pink'
cxt.lineCap = 'round'
cxt.stroke()
效果：
五、快捷绘制矩形
使用strokeRect()描边矩形
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.strokeStyle = 'pink'
cxt.strokeRect(50, 50, 200, 100) // 起点X坐标、起点Y坐标、长、高
效果：
使用fillRect()方法进行矩形填充,其实和strokeRect方法类似，一个填充，一个属于描边
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.fillStyle = 'pink' //填充颜色
cxt.fillRect(50, 50, 200, 100) // 起点X坐标、起点Y坐标、长、高
效果：
使用rect()绘制矩形，他也是和strokeRect()、fillRect()类似，但是需要手动调用shroke()或fill()才会进行绘制
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.rect(50, 50, 200, 100)
cxt.strokeStyle='red'
cxt.stroke()
cxt.fillStyle='green'
cxt.fill()
效果：
使用clearRect()方法清空矩形
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.fillStyle = 'pink' // 设置填充颜色
cxt.fillRect(50, 50, 200, 200) // 填充矩形
cxt.clearRect(60, 60, 180, 90) // 清空指定区域矩形
效果：
六、绘制圆形
绘制圆形的方法是arc()
arc(x, y, r, sAngle, eAngle，counterclockwise) // 圆心X坐标、Y坐标、半径、开始角度、结束角度、绘制方向(true:顺时针，flase:逆时针)
注意：绘制圆形之前，必须先调用 beginPath() 方法！！！ 在绘制完成之后，还需要调用 closePath() 方法！！！
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.beginPath()
cxt.arc(150, 150, 80, 0, 360)
cxt.closePath()
cxt.stroke()
效果：
七、绘制文字
使用strokeText绘制文字描边
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.font = '60px Arial' // 将字号设置成 60px，方便观察
cxt.strokeText('Hello world!', 30, 90) //可以设置第四个参数表示文本最大宽度，超过宽度文本将会被压缩
效果：
使用fillText进行文字填充
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.font = '60px Arial' // 将字号设置成 60px，方便观察
cxt.fillText('Hello world!', 30, 90)
效果：默认颜色黑色，可以通过fillStyle设置进行自定义
使用measureText()获取文本长度
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.font = '60px Arial' // 将字号设置成 60px，方便观察
let text= 'Hello world!'
cxt.fillText(text, 30, 90)
console.log(cxt.measureText(text).width) // 313.447265625
使用textAlign进行文本水平对齐方式设置
start：默认。在指定位置的横坐标开始。end：在指定坐标的横坐标结束。left：左对齐。right：右对齐。center：居中对齐。
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.font = '60px Arial' // 将字号设置成 60px，方便观察
let text= 'Hello world!'
cxt.textAlign ='center'
cxt.fillText(text, 30, 90)
效果：
使用textBaseline进行文本垂直对齐方式设置
alphabetic：默认。文本基线是普通的字母基线。top：文本基线是 em 方框的顶端。bottom：文本基线是 em 方框的底端。middle：文本基线是 em 方框的正中。hanging：文本基线是悬挂基线。
const c = document.getElementById('c')
const cxt = c.getContext('2d')
cxt.font = '60px Arial' // 将字号设置成 60px，方便观察
let text = 'Hello'
cxt.textAlign = 'center'
// 默认 top
cxt.textBaseline = 'top'
cxt.fillText(text, 200, 150)
// 默认 bottom
cxt.textBaseline = 'bottom'
cxt.fillText(text, 320, 150)
// 默认 middle
cxt.textBaseline = 'middle'
cxt.fillText(text, 480, 150)
效果:
八、绘制图片
在 Canvas 中可以使用 drawImage() 方法绘制图片。
渲染图片有两种方法：
1、在JS里加载图片再渲染
2、把DOM里的图片拿到 canvas 里渲染
drawImage(image, dx, dy)
image: 要渲染的图片对象。dx: 图片左上角的横坐标位置。dy: 图片左上角的纵坐标位置。
js版
1、创建Image对象
2、引入图片
3、等待图片加载完成
4、使用 drawImage() 方法渲染图片
const c = document.getElementById('c')
const cxt = c.getContext('2d')
// 1 创建 Image 对象
const image = new Image()
// 2 引入图片
image.src = 'http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960g'
// 3 等待图片加载完成
image.onload = () => cxt.drawImage(image, 30, 30, 100, 100)
效果：
dom版
<canvas id="c" width="600" height="300" style="border: 1px solid #ccc;"></canvas>
<img src="http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960g" id="grilImg"/>
<script>
const c = document.getElementById('c')
const cxt = c.getContext('2d')
const grilImg = document.getElementById('grilImg')
window.onload=()=> cxt.drawImage(grilImg, 100, 100,100,100)
</script>
效果：
图片截取
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
image: 图片对象sx: 开始截取的横坐标sy: 开始截取的纵坐标sw: 截取的宽度sh: 截取的高度dx: 图片左上角的横坐标位置dy: 图片左上角的纵坐标位置dw: 图片宽度dh: 图片高度
image.onload = () => cxt.drawImage(image, 30, 30, 100, 100, 30, 30, 200, 200)
效果：
