canvas的基础使用

一、画一条直线

画一条直线需要用到三个方法：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 = 20cxt.strokeStyle = 'pink'cxt.lineCap = 'round'cxt.stroke()cxt.beginPath() // 重新开启一个路径cxt.moveTo(20, 120.5)cxt.lineTo(200, 120.5)cxt.lineWidth = 4cxt.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 = 2cxt.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'// 默认 topcxt.textBaseline = 'top'cxt.fillText(text, 200, 150)// 默认 bottomcxt.textBaseline = 'bottom'cxt.fillText(text, 320, 150)// 默认 middlecxt.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)

效果：