5分钟学会canvas的使用

在HTML5新增新的标签，名为画布，可以使用JS在上面完成对应的画的操作。正常情况我们可以把它当成一个img看待。

如何使用canvas

HTML中使用canvas标签

canvas默认的宽高是300x150的尺寸，如果想要修改这个值，不能使用css修改，需要直接设置对应的width和height属性，这个是html属性，不是css属性

如果我们想要设置要给全屏的canvas，需要使用js进行设置，设置为全屏的宽高

let canvas = document.querySelector('canvas')
canvas.width = window.innerWidth
canvas.height = window.innerHeight

但是我们设置了全屏后，就会有滚动条，原因和img标签一样，行内块元素默认下方会有空白。一定要记得去掉body的margin值

canvas {
  display: block;
}
 
/* 或者 */
canvas {
  vertical-align: middle;
}

JavaScript中进行绘图

在画布上进行绘制需要使用canvas的方法获取一个值

let canvas = document.querySelector('canvas')
// 获取ctx
let ctx = canvas.getContext('2d')

上面两行代码是固定写法。几乎上所有的绘图操作，都是在ctx对象中的。

如何画

坐标

画布的左上角是0， 0的位置，x轴向右为正方向，y轴向下为正方向。

描边

我们在绘制好路径后，可以通过ctx.stroke()进行描边操作

填充

我们在绘制好路径后，可以通过ctx.fill()进行填充操作

画线

可以使用moveTo和lineTo进行划线操作.

ctx.moveTo(x, y)指起始点，参数分别指起始点坐标

ctx.lineTo(x, y)指终点，参数为终点坐标。

设置后，我们还需要通过ctx.stroke()进行描边。

线可以跟着画很多条。

ctx.moveTo(0, 0)
ctx.lineTo(100, 100)
ctx.stroke()

画矩形

画矩形有很多方法

• ctx.fillRect()
• ctx.strokeRect()
• ctx.rect() 再进行描边或者填充
• clearRect()

四个方法参数一致，都有四个参数，分别为x, y, w, h

x, y表示矩形左上角点的坐标。w, h表示宽高

ctx.fillRect(0, 0, 100, 50) // 填充
ctx.strokeRect(0, 0, 100, 50) // 描边
 
ctx.rect(0, 0, 100, 50)
ctx.fill()
// 或者 
ctx.rect(0, 0, 100, 50)
ctx.stroke()

最后一个方法，是清除掉一块矩形区域

ctx.clearRect(0, 0, 100, 100)

清除画布在动画阶段有用。

画圆弧

弧度单位 180deg = Math.PI rad

 

ctx.arc(x, y, 半径, 开始弧度, 结束弧度, 是否逆时针)
 
ctx.stroke() // 描边
ctx.fill() // 填充

画图

把一个图片或者视频的一帧绘制到canvas上

ctx.drawImage(img或者video的dom对象, 很多参数)

该方法有三种用法

ctx.drawImage(对象, cx, cy)

该操作不会对图片进行缩放，直接把原尺寸放在canvas对应的位置上。

ctx.drawImage(image, cx, cy, cw, ch)

cx、cy表示canvas上的位置

cw表示在canvas上绘制的图片宽度

ch表示在canvas上绘制的图片高度

这个操作会把图片完整绘制，进行缩放，如果canvas不够大，就只显示canvas的大小

drawImage(image, sx, sy, sw, sh, cx, cy, cw, ch)

这个操作，可以把图片上某个区域裁切，然后画到canvas上。

颜色

描边颜色

通过设置ctx.strokStyle = "颜色色值"就可以把当前path中的描边颜色修改

填充颜色

通过设置ctx.fillStyle = "颜色色值"就可以把当前path中的填充颜色修改

canvas中动画的原理是什么

canvas中的动画原理和dom动画原理不一样，DOM动画是改变位置或者属性即可，canvas需要先清除画布内容再重新绘制。

QRCode.js

我们可以使用这个库利用一定的规则，把文本变成二维码。

new QRCode(要生成到哪个元素中, "文本")