为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章

//秒针

ctx.rotate(2 * Math.PI / 60 * sec -  - Math.PI / 2)

ctx.beginPath()

ctx.moveTo(-10, 0)

ctx.lineTo(80, 0)

ctx.strokeStyle = ‘red’

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()

// 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的

ctx.lineWidth = 1

for (let i = 0; i < 60; i++) {

ctx.rotate(2 * Math.PI / 60)

ctx.beginPath()

ctx.moveTo(90, 0)

ctx.lineTo(100, 0)

// ctx.strokeStyle = ‘red’

ctx.stroke()

ctx.closePath()

}

ctx.restore()

ctx.save()

ctx.lineWidth = 5

for (let i = 0; i < 12; i++) {

ctx.rotate(2 * Math.PI / 12)

ctx.beginPath()

ctx.moveTo(85, 0)

ctx.lineTo(100, 0)

ctx.stroke()

ctx.closePath()

}

ctx.restore()

最后一步就是更新视图，使时钟转动起来，第一想到的肯定是定时器setInterval，但是注意一个问题：每次更新视图的时候都要把上一次的画布清除，再开始画新的视图，不然就会出现千手观音的景象

附上最终代码：

const canvas = document.getElementById(‘canvas’)

const ctx = canvas.getContext(‘2d’)

setInterval(() => {

ctx.save()

ctx.clearRect(0, 0, 600, 600)

ctx.translate(300, 300) // 设置中心点，此时300，300变成了坐标的0，0

ctx.save()

// 画大圆

ctx.beginPath()

// 画圆线使用arc(中心点X,中心点Y,半径,起始角度,结束角度)

ctx.arc(0, 0, 100, 0, 2 * Math.PI)

ctx.stroke() // 执行画线段的操作

ctx.closePath()

// 画小圆

ctx.beginPath()

ctx.arc(0, 0, 5, 0, 2 * Math.PI)

ctx.stroke()

ctx.closePath()

// 获取当前 时，分，秒

let time = new Date()

let hour = time.getHours() % 12

let min = time.getMinutes()

let sec = time.getSeconds()

// 时针

ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2)

ctx.beginPath()

// moveTo设置画线起点

ctx.moveTo(-10, 0)

// lineTo设置画线经过点

ctx.lineTo(40, 0)

// 设置线宽

ctx.lineWidth = 10

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()

// 分针

ctx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 * (sec / 60) - Math.PI / 2)

ctx.beginPath()

ctx.moveTo(-10, 0)

ctx.lineTo(60, 0)

ctx.lineWidth = 5

ctx.strokeStyle = ‘blue’

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()

//秒针

ctx.rotate(2 * Math.PI / 60 * sec - Math.PI / 2)

ctx.beginPath()

ctx.moveTo(-10, 0)

ctx.lineTo(80, 0)

ctx.strokeStyle = ‘red’

ctx.stroke()

ctx.closePath()

ctx.restore()

ctx.save()

// 绘制刻度，也是跟绘制时分秒针一样，只不过刻度是死的

ctx.lineWidth = 1

for (let i = 0; i < 60; i++) {

ctx.rotate(2 * Math.PI / 60)

ctx.beginPath()

ctx.moveTo(90, 0)

ctx.lineTo(100, 0)

// ctx.strokeStyle = ‘red’

ctx.stroke()

ctx.closePath()

}

ctx.restore()

ctx.save()

ctx.lineWidth = 5

for (let i = 0; i < 12; i++) {

ctx.rotate(2 * Math.PI / 12)

ctx.beginPath()

ctx.moveTo(85, 0)

ctx.lineTo(100, 0)

// ctx.strokeStyle = ‘red’

ctx.stroke()

ctx.closePath()

}

ctx.restore()

ctx.restore()

}, 1000)

效果 very good啊：

clock的副本.gif

2. canvas实现刮刮卡

---

小时候很多人都买过充值卡把，懂的都懂啊哈，用指甲刮开这层灰皮，就能看底下的答案了。

思路是这样的：

• 1、底下答案是一个div，顶部灰皮是一个canvas，canvas一开始盖住div

• 2、鼠标事件，点击时并移动时，鼠标经过的路径都画圆形开路，并且设置globalCompositeOperation为destination-out，使鼠标经过的路径都变成透明，一透明，自然就显示出下方的答案信息。

关于fill这个方法，其实是对标stroke的，fill是把图形填充，stroke只是画出边框线

// html

恭喜您获得100w

// js

const canvas = document.getElementById(‘canvas’)

const ctx = canvas.getContext(‘2d’)

// 填充的颜色

ctx.fillStyle = ‘darkgray’

// 填充矩形 fillRect(起始X,起始Y,终点X,终点Y)

ctx.fillRect(0, 0, 400, 100)

ctx.fillStyle = ‘#fff’

// 绘制填充文字

ctx.fillText(‘刮刮卡’, 180, 50)

let isDraw = false

canvas.onmousedown = function () {

isDraw = true

}

canvas.onmousemove = function (e) {

if (!isDraw) return

// 计算鼠标在canvas里的位置

const x = e.pageX - canvas.offsetLeft

const y = e.pageY - canvas.offsetTop

// 设置globalCompositeOperation

ctx.globalCompositeOperation = ‘destination-out’

// 画圆

ctx.arc(x, y, 10, 0, 2 * Math.PI)

// 填充圆形

ctx.fill()

}

canvas.onmouseup = function () {

isDraw = false

}

效果如下：

guaguaka.gif

3. canvas实现画板和保存

---

框架：使用vue + elementUI

其实很简单，难点有以下几点：

• 1、鼠标拖拽画正方形和圆形

• 2、画完一个保存画布，下次再画的时候叠加

• 3、保存图片

第一点，只需要计算出鼠标点击的点坐标，以及鼠标的当前坐标，就可以计算了，矩形长宽计算：x \- beginX, y \- beginY，圆形则要利用勾股定理：Math.sqrt((x \- beginX) * (x \- beginX) + (y \- beginY) * (y \- beginY))

第二点，则要利用canvas的getImageData和putImageData方法

第三点，思路是将canvas生成图片链接，并赋值给具有下载功能的a标签，并主动点击a标签进行图片下载

看看效果吧：

具体代码我就不过多讲解了，说难也不难，只要前面两个项目理解了，这个项目很容易就懂了：

<el-button @click=“changeType(‘huabi’)” type=“primary”>画笔

<el-button @click=“changeType(‘rect’)” type=“success”>正方形

<el-button

@click=“changeType(‘arc’)”

type=“warning”

style=“margin-right: 10px”

圆形</el-button

颜色：

<el-button @click=“clear”>清空

<el-button @click=“saveImg”>保存

<canvas

id=“canvas”

width=“800”

height=“400”

@mousedown=“canvasDown”

@mousemove=“canvasMove”

@mouseout=“canvasUp”

@mouseup=“canvasUp”