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 = 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)

效果：