一、画一条直线
画一条直线需要用到三个方法: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)
效果: