canvas動畫：點隨機運動距離內自動連接成線鼠標移動自動吸附附近的點

思路/實現步驟

1. 創建canvas元素
1. 獲取canvas的上下文ctx
1. 初始化點的信息（數量、初始坐標、移動方向、移動速度、大小、顏色）
1. 繪制點
1. 繪制點之間的連線
1. 點有規律的動起來
1. 動畫循環
1. 鼠標移動相關邏輯
1. 點鼠標之間連線
1. 鼠標吸附邏輯
1. 添加配置項
1. 重繪、重置

示例代碼

<template><div class='random-dot-line-canvas'><!-- <div style="margin-bottom: 20px;"><el-button @click="nextDraw">下一幀</el-button></div> --><div class="config"><el-form :inline="true" :model="canvasConfig"><el-form-item label="畫布寬度" prop="canvasWidth"><el-input-number v-model="canvasConfig.canvasWidth" :min="800" :max="1920" :step="50"></el-input-number></el-form-item><el-form-item label="畫布高度" prop="canvasHeight"><el-input-number v-model="canvasConfig.canvasHeight" :min="200" :max="900" :step="50"></el-input-number></el-form-item><el-form-item label="點數量" prop="DOT_NUM"><el-input-number v-model="canvasConfig.DOT_NUM" :min="10" :max="200" :step="5"></el-input-number></el-form-item><el-form-item label="點半徑" prop="DOT_RADIUS"><el-input-number v-model="canvasConfig.DOT_RADIUS" :min="1" :max="20" :step="1"></el-input-number></el-form-item><el-form-item label="點顏色" prop="DOT_COLOR"><el-color-picker v-model="canvasConfig.DOT_COLOR" /></el-form-item><el-form-item label="線顏色" prop="LINE_COLOR"><el-color-picker v-model="canvasConfig.LINE_COLOR" /></el-form-item><el-form-item label="連線最大距離" prop="DOT_DRAW_LINE_MAX_DIST"><el-input-number v-model="canvasConfig.DOT_DRAW_LINE_MAX_DIST" :min="50" :max="400" :step="20"></el-input-number></el-form-item><el-form-item label="點移動速度" prop="DOT_MOVE_SPEED"><el-input-number v-model="canvasConfig.DOT_MOVE_SPEED" :min="1" :max="20" :step="1"></el-input-number></el-form-item><el-form-item><el-button type="primary" @click="redraw">重繪</el-button><el-button type="primary" @click="reset">重置</el-button></el-form-item></el-form></div><canvasv-if="!initing"id="random-dot-line-canvas":width="canvasWidth":height="canvasHeight"style="background-color: black;"color-space="srgb">Your browser does not support the HTML5 canvas tag.</canvas></div>
</template><script setup name='random-dot-line-canvas'>
import { ref, onMounted, nextTick, watch } from 'vue'
import store from '../../../../store';const themeColor = ref(store.state.setting.themeColor || '#ffffff') // 主題色
const ctx = ref()
const initing = ref(true)
const canvasWidth = ref(800) // 畫布寬度
const canvasHeight = ref(400) // 畫布高度
const dotList = ref([]) // 點的坐標、移動方向/移動速度
const DOT_NUM = ref(40) // 點的數量
const DOT_RADIUS = ref(2.5) // 點的半徑
const DOT_COLOR = ref(themeColor) // 點的顏色
const LINE_COLOR = ref(themeColor) // 連線顏色
const DOT_DRAW_LINE_MAX_DIST = ref(100) // 兩點之間要連線的最大距離
const DOT_MOVE_SPEED = ref(1) // 點移動速度
const canvasConfig = ref({ // 表單配置項canvasWidth: canvasWidth.value,canvasHeight: canvasHeight.value,DOT_NUM: DOT_NUM.value,DOT_RADIUS: DOT_RADIUS.value,DOT_COLOR: DOT_COLOR.value,LINE_COLOR: LINE_COLOR.value,DOT_DRAW_LINE_MAX_DIST: DOT_DRAW_LINE_MAX_DIST.value,DOT_MOVE_SPEED: DOT_MOVE_SPEED.value,
})
const animationNum = ref(null)
const animationMouseNum = ref(null)
const canvasPositionInPage = ref() // 畫布位置
const mousePosition = ref({}) // 鼠標位置onMounted(()=>{init()
})watch(() => mousePosition.value,(newConfig, oldConfig = {}) => {if(newConfig.inCanvas && !oldConfig.inCanvas) {// console.log('移入畫布')mouseAdsorb()} else if (newConfig.inCanvas === false) {// console.log('移出畫布')cancelAnimationFrame(animationMouseNum.value)}},{ immediate: true, deep: true }
)/** 初始化函數 */
const init = async() => {initing.value = falseawait nextTick()let canvas = document.getElementById('random-dot-line-canvas')canvasPositionInPage.value = canvas.getBoundingClientRect()// {"x": 40, "y": 183, "width": 800, "height": 400, "top": 183, "right": 840, "bottom": 583, "left": 40 }try {ctx.value = canvas.getContext('2d')} catch (error) {console.log('canvas,ctx,getContext', error)}createdDot() // 創建點坐標draw() // 繪制mouseMove() // 鼠標移動相關邏輯dotMove() // 點動起來
}/** 重繪 */
const redraw = () => {cancelAnimationFrame(animationNum.value)initing.value = truesetNewConfigValue(canvasConfig.value)init()
}
/** 重置 */
const reset = () => {initing.value = truesetNewConfigValue({canvasWidth: 800,canvasHeight: 400,DOT_NUM: 40,DOT_RADIUS: 2.5,DOT_DRAW_LINE_MAX_DIST: 100,DOT_MOVE_SPEED: 1,})init()
}/** 設置配置項值 */
const setNewConfigValue = (newConfig) => {canvasWidth.value = newConfig.canvasWidth || canvasWidth.valuecanvasHeight.value = newConfig.canvasHeight || canvasHeight.valueDOT_NUM.value = newConfig.DOT_NUM || DOT_NUM.valueDOT_RADIUS.value = newConfig.DOT_RADIUS || DOT_RADIUS.valueDOT_COLOR.value = newConfig.DOT_COLOR || DOT_COLOR.valueLINE_COLOR.value = newConfig.LINE_COLOR || LINE_COLOR.valueDOT_DRAW_LINE_MAX_DIST.value = newConfig.DOT_DRAW_LINE_MAX_DIST || DOT_DRAW_LINE_MAX_DIST.valueDOT_MOVE_SPEED.value = newConfig.DOT_MOVE_SPEED || DOT_MOVE_SPEED.value
}/** 繪制函數 */
const draw = () => {ctx.value.clearRect(0, 0, canvasWidth.value, canvasHeight.value)drawDot() // 繪制點drawLine() // 連線if(mousePosition.value.inCanvas) { // 鼠標在畫布內 執行吸附邏輯drawLineByMouse() // 連線到鼠標}
}/** 下一幀-調試用 */
const nextDraw = () => {dotMove()
}/** 創建點坐標 */
const createdDot =() => {dotList.value = []for (let num = 1; num <= DOT_NUM.value; num++) {const x = getRandomInteger(0, canvasWidth.value)const y = getRandomInteger(0, canvasHeight.value)const move_x = (+(Math.random() * 2 - 1).toFixed(2)) * DOT_MOVE_SPEED.value // 移動x軸的速度const move_y = (+(Math.random() * 2 - 1).toFixed(2)) * DOT_MOVE_SPEED.value // 移動y軸的速度dotList.value.push({x,y,move_x,move_y})}
}/** 繪制點 */
const drawDot = () => {ctx.value.save();ctx.value.translate(0.5, 0.5);dotList.value.forEach((dot, index)=>{ctx.value.fillStyle = index === 0 ? 'red' : DOT_COLOR.value || '#fff'ctx.value.beginPath();ctx.value.arc(dot.x, dot.y, DOT_RADIUS.value, 0, 2*Math.PI)ctx.value.fill()ctx.value.closePath();})ctx.value.restore();
}/** 點之間連線 */
const drawLine = () => {ctx.value.save();ctx.value.translate(0.5, 0.5);const lineColorRgb = hexToRgb(LINE_COLOR.value)dotList.value.forEach((dot1, index1)=>{dotList.value.forEach((dot2, index2)=>{const s = getDistanceByTwoDot(dot1, dot2) // 兩點之間的距離if(index1 !== index2 && s <= DOT_DRAW_LINE_MAX_DIST.value) {ctx.value.lineWidth = 1ctx.value.strokeStyle = `rgba(${lineColorRgb.r}, ${lineColorRgb.g}, ${lineColorRgb.b}, ${((DOT_DRAW_LINE_MAX_DIST.value-s) / DOT_DRAW_LINE_MAX_DIST.value)})`ctx.value.beginPath();ctx.value.moveTo(dot1.x, dot1.y)ctx.value.lineTo(dot2.x, dot2.y)ctx.value.stroke()ctx.value.closePath();}})})ctx.value.restore();
}/** 點有規律的動起來 */
const dotMove = () => {dotList.value.forEach((dot, index) => {let nextX = dot.xlet nextY = dot.ynextX = dot.x + dot.move_xnextY = dot.y + dot.move_yif(nextX > canvasWidth.value - DOT_RADIUS.value) {nextX = canvasWidth.value - DOT_RADIUS.valuedot.move_x = -dot.move_x} else if(nextX < DOT_RADIUS.value) {nextX = DOT_RADIUS.valuedot.move_x = -dot.move_x}if(nextY > canvasHeight.value - DOT_RADIUS.value) {nextY = canvasHeight.value - DOT_RADIUS.valuedot.move_y = -dot.move_y} else if(nextY < DOT_RADIUS.value) {nextY = DOT_RADIUS.valuedot.move_y = -dot.move_y}dot.x = nextXdot.y = nextY})draw() // 繪制animationNum.value = requestAnimationFrame(dotMove)
}/** 鼠標移動相關邏輯 */
const mouseMove = () => {const canvas = document.getElementById('random-dot-line-canvas')canvas.addEventListener('mousemove', (e) => {mousePosition.value = {inCanvas: true,x: e.offsetX,y: e.offsetY,offsetX: e.offsetX, // 相對于canvasoffsetY: e.offsetY,pageX: e.pageX, // 相對于頁面pageY: e.pageY,}})canvas.addEventListener('mouseleave', (e) => {mousePosition.value.inCanvas = false})
}/** 點移動兼容鼠標位置的戲份邏輯 */
const mouseAdsorb = () => {dotList.value.forEach((dot) => {let nextX = dot.xlet nextY = dot.yconst attractiveRange = DOT_DRAW_LINE_MAX_DIST.value + 50 // 吸引力作用范圍const adsorptionDistance = DOT_DRAW_LINE_MAX_DIST.value // 吸附距離const distance = getDistanceByTwoDot(mousePosition.value, dot) // 鼠標和點的距離if(distance < attractiveRange && distance > adsorptionDistance) {dot.isAttractive = true // 點正在被鼠標吸引const { mouse_move_x, mouse_move_y } = getAdsorbSpeed(dot, mousePosition.value) // 計算鼠標吸附點xy方向上的速度nextX += mouse_move_xnextY += mouse_move_y} else if(distance <= adsorptionDistance) { // 吸附點dot.isAdsorption = true // 點已經被吸附dot.isAttractive = false} else {dot.isAttractive = false // 點沒有被鼠標吸引dot.isAdsorption = false // 點沒有被吸附}dot.x = nextXdot.y = nextY})draw() // 繪制animationMouseNum.value = requestAnimationFrame(mouseAdsorb)
}/** 點鼠標之間連線 */
const drawLineByMouse = () => {ctx.value.save();ctx.value.translate(0.5, 0.5);const lineColorRgb = hexToRgb(LINE_COLOR.value)dotList.value.forEach((dot)=>{if(dot.isAdsorption || dot.isAttractive) { // 被吸引 或 被吸附的點 與鼠標位置連線ctx.value.lineWidth = 1ctx.value.strokeStyle = `rgba(${lineColorRgb.r}, ${lineColorRgb.g}, ${lineColorRgb.b}, ${0.3})`ctx.value.beginPath();ctx.value.moveTo(dot.x, dot.y)ctx.value.lineTo(mousePosition.value.x, mousePosition.value.y)ctx.value.stroke()ctx.value.closePath();}})ctx.value.restore();
}/** 工具函數 */
// 生成min-max范圍內隨機整數
const getRandomInteger = (min, max) => {return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 計算兩點之間的距離
const getDistanceByTwoDot = (dot1, dot2) => {const w = Math.abs(dot1.x - dot2.x)const h = Math.abs(dot1.y - dot2.y)const s = Math.sqrt(w**2 + h**2)return s
}
// 十六進制顏色 轉 rgb
function hexToRgb(hex) {if(hex.includes('#')) {hex = hex.replace('#', '')}// 解析紅、綠、藍分量let r = parseInt(hex.substring(0, 2), 16);let g = parseInt(hex.substring(2, 4), 16);let b = parseInt(hex.substring(4, 6), 16) || 0;return { r, g, b };
}
// 計算點被吸引時 x y 方向上的移動速度
const getAdsorbSpeed = (dot, mouse) => {// const distance = getDistanceByTwoDot(dot, mouse) // 鼠標和點的距離const distanceX = mouse.x - dot.xconst distanceY = mouse.y - dot.yconst speed = DOT_MOVE_SPEED.value * 3const mouse_move_x =  +(speed * (distanceX < 0 ? -1 : 1)).toFixed(2)const mouse_move_y =	+(speed * (distanceY < 0 ? -1 : 1) * Math.abs((distanceY / distanceX))).toFixed(2)return { mouse_move_x, mouse_move_y }
}
</script>
<style lang='scss' scoped>
#random-dot-line-canvas {cursor: pointer;
}</style>