(https://juejin.cn/post/697868... "https://juejin.cn/post/6978685539985653767")」
前言
大家好，我是林三心，回想起我當年校招的時候啊，多次被面試官問到canvas，但是我卻不會，後來一直想找個機會學一下canvas，但是一直沒時間。canvas在前端的地位是越來越重要了，為此，我特地寫了3個小專案，讓你們10分鐘就能入門canvas，是的，我的心裡沒有她，只有你們
1. canvas實現時鐘轉動
實現以下效果，分為幾步：
- 1、找到canvas的
中心，畫出表心，以及表框 - 2、獲取
當前時間，並根據時間畫出時針，分針，秒針，還有刻度 - 3、使用定時器，每過一秒
獲取新的時間，並重新繪圖，達到時鐘轉動的效果
1.1 表心，表框
畫表心，表框有兩個知識點：
- 1、找到canvas的
中心位置 2、繪製
圓形//html <canvas id="canvas" width="600" height="600"></canvas> // js // 設定中心點，此時300，300變成了座標的0，0 ctx.translate(300, 300) // 畫圓線使用arc(中心點X,中心點Y,半徑,起始角度,結束角度) ctx.arc(0, 0, 100, 0, 2 * Math.PI) ctx.arc(0, 0, 5, 0, 2 * Math.PI) // 執行畫線段的操作stroke ctx.stroke()讓我們來看看效果，發現了，好像不對啊，我們是想畫
兩個獨立的圓線，怎麼畫出來的兩個圓連到一起了：
原因是：上面程式碼畫連個圓時，是連著畫的，所以畫完大圓後，線還沒斬斷，就接著畫小圓，那肯定會大圓小圓連一起，解決辦法就是：beginPath，closePath
ctx.translate(300, 300) // 設定中心點，此時300，300變成了座標的0，0
// 畫大圓
+ 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()1.2 時針，分針，秒針
畫這三個指標，有兩個知識點：
- 1、根據當前
時，分，秒去計算角度 - 2、在計算好的角度上去畫出
時針，分針，秒針
如何根據算好的角度去畫線呢，比如算出當前是3點，那麼時針就應該以12點為起始點，順時針旋轉2 * Math.PI / 12 * 3 = 90°，分針和秒針也是同樣的道理，只不過跟時針不同的是比例問題而已，因為時在表上有12份，而分針和秒針都是60份
這時候又有一個新問題，還是以上面的例子為例，我算出了90°，那我們怎麼畫出時針呢？我們可以使用moveTo和lineTo去畫線段。至於90°，我們只需要將x軸順時針旋轉90°，然後再畫出這條線段，那就得到了指定角度的指標了。但是上面說了，是要以12點為起始點，我們的預設x軸確是水平的，所以我們時分秒針算出角度後，每次都要減去90°。可能這有點繞，我們通過下面的圖演示一下，還是以上面3點的例子：
這樣就得出了3點指標的畫線角度了。
又又又有新問題了，比如現在我畫完了時針，然後我想畫分針，x軸已經在我畫時針的時候偏轉了，這時候肯定要讓x軸恢復到原來的模樣，我們才能繼續畫分針，否則畫出來的分針是不準的。這時候save和restore就派上用場了，save是把ctx當前的狀態打包壓入棧中，restore是取出棧頂的狀態並賦值給ctx，save可多次，但是restore取狀態的次數必須等於save次數
懂得了上面所說，剩下畫刻度了，起始刻度的道理跟時分秒針道理一樣，只不過刻度是死的，不需要計算，只需要規則畫出60個小刻度，和12個大刻度就行
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
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()
// 恢復成上一次save的狀態
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.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啊：
2. canvas實現刮刮卡
小時候很多人都買過充值卡把，懂的都懂啊哈，用指甲刮開這層灰皮，就能看底下的答案了。
思路是這樣的：
- 1、底下答案是一個
div，頂部灰皮是一個canvas，canvas一開始蓋住div - 2、滑鼠事件，點選時並移動時，滑鼠經過的路徑都
畫圓形開路，並且設定globalCompositeOperation為destination-out，使滑鼠經過的路徑都變成透明，一透明，自然就顯示出下方的答案資訊。
關於fill這個方法，其實是對標stroke的，fill是把圖形填充，stroke只是畫出邊框線
// html
<canvas id="canvas" width="400" height="100"></canvas>
<div class="text">恭喜您獲得100w</div>
<style>
* {
margin: 0;
padding: 0;
}
.text {
position: absolute;
left: 130px;
top: 35px;
z-index: -1;
}
</style>
// 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
}效果如下：
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標籤進行圖片下載
看看效果吧：
具體程式碼我就不過多講解了，說難也不難，只要前面兩個專案理解了，這個專案很容易就懂了：
<template>
<div>
<div style="margin-bottom: 10px; display: flex; align-items: center">
<el-button @click="changeType('huabi')" type="primary">畫筆</el-button>
<el-button @click="changeType('rect')" type="success">正方形</el-button>
<el-button
@click="changeType('arc')"
type="warning"
style="margin-right: 10px"
>圓形</el-button
>
<div>顏色：</div>
<el-color-picker v-model="color"></el-color-picker>
<el-button @click="clear">清空</el-button>
<el-button @click="saveImg">儲存</el-button>
</div>
<canvas
id="canvas"
width="800"
height="400"
@mousedown="canvasDown"
@mousemove="canvasMove"
@mouseout="canvasUp"
@mouseup="canvasUp"
>
</canvas>
</div>
</template>
<script>
export default {
data() {
return {
type: "huabi",
isDraw: false,
canvasDom: null,
ctx: null,
beginX: 0,
beginY: 0,
color: "#000",
imageData: null,
};
},
mounted() {
this.canvasDom = document.getElementById("canvas");
this.ctx = this.canvasDom.getContext("2d");
},
methods: {
changeType(type) {
this.type = type;
},
canvasDown(e) {
this.isDraw = true;
const canvas = this.canvasDom;
this.beginX = e.pageX - canvas.offsetLeft;
this.beginY = e.pageY - canvas.offsetTop;
},
canvasMove(e) {
if (!this.isDraw) return;
const canvas = this.canvasDom;
const ctx = this.ctx;
const x = e.pageX - canvas.offsetLeft;
const y = e.pageY - canvas.offsetTop;
this[`${this.type}Fn`](ctx, x, y);
},
canvasUp() {
this.imageData = this.ctx.getImageData(0, 0, 800, 400);
this.isDraw = false;
},
huabiFn(ctx, x, y) {
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
},
rectFn(ctx, x, y) {
const beginX = this.beginX;
const beginY = this.beginY;
ctx.clearRect(0, 0, 800, 400);
this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.rect(beginX, beginY, x - beginX, y - beginY);
ctx.stroke();
ctx.closePath();
},
arcFn(ctx, x, y) {
const beginX = this.beginX;
const beginY = this.beginY;
this.isDraw && ctx.clearRect(0, 0, 800, 400);
this.imageData && ctx.putImageData(this.imageData, 0, 0, 0, 0, 800, 400);
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.arc(
beginX,
beginY,
Math.round(
Math.sqrt((x - beginX) * (x - beginX) + (y - beginY) * (y - beginY))
),
0,
2 * Math.PI
);
ctx.stroke();
ctx.closePath();
},
saveImg() {
const url = this.canvasDom.toDataURL();
const a = document.createElement("a");
a.download = "sunshine";
a.href = url;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
},
clear() {
this.imageData = null
this.ctx.clearRect(0, 0, 800, 400)
}
},
};
</script>
<style lang="scss" scoped>
#canvas {
border: 1px solid black;
}
</style>結語
我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】
