扫福开始了，自己写个福来扫啊~

今天支付宝集五福活动又开始了，大家是不是已经集齐了呢？没集齐的小伙伴不要慌，咱们自己画一个福来扫，应该也许能扫出个敬业福吧(#^.^#)。

话不多说，直接开撸。

新建一个vue3工程... 

在App.vue里引入我们要做的五福组件

// App.vue
<template>
  <div>    
    <Wufu />  
  </div>
</template>
<script>
    import Wufu from './components/wufu'
    export default {  
        name: 'App',  
        components: {    
            Wufu  
        }
    }
</script>
<style>  
*{     
    margin: 0;     
    padding: 0;  
}  
html, body{    
    width: 100%;   
    height: 100%;  
}
</style>

开始撸我们的五福组件，在components文件夹下新建wufu.vue， 加上我们的canvas获取到canvas上下文对象。我们先画一个米字格写字板。

// src/components/wufu.vue
<template>
    <canvas id="wufu" width="240" height="240"></canvas>
</template>
<script>
    import { useTablet } from "../shape/index";
    export default {    
        name: "wufu",    
        setup() {        
            onMounted(() => {            
                const cvs = document.getElementById("wufu");            
                const ctx = cvs.getContext("2d");            
                // 画个米字格            
                useTablet(ctx);        
            })    
        },
    };
</script>
<style>
</style>

// src/shape/index.js
// 绘制米字格
export const useTablet = (ctx) => {    
    ctx.save(); // 保存原始绘图状态    
    ctx.strokeStyle = "red";    
    ctx.lineWidth = 5;    
    ctx.strokeRect(20, 20, 200, 200);    
    ctx.stroke();    
    ctx.lineWidth = 2;    
    ctx.setLineDash([15, 15]); // 绘制虚线    
    ctx.beginPath();    
    ctx.moveTo(20, 20);    
    ctx.lineTo(220, 220);   
    ctx.moveTo(220, 20);    
    ctx.lineTo(20, 220);    
    ctx.moveTo(120, 20);    
    ctx.lineTo(120, 220);    
    ctx.moveTo(20, 120);    
    ctx.lineTo(220, 120);    
    ctx.stroke();    
    ctx.closePath();    
    ctx.restore(); // 恢复为原始绘图状态，避免影响下次绘制
}

这样我们就完成了写字板的绘制，效果如下，棒棒哒

开始写字！首先必须获取鼠标位置

// src/components/wufu.vue 
import { onMounted } from "vue";
import { useTablet, useWriteFu } from "../shape/index";
import { useMouse } from "../utils/index";
export default {    
    name: "wufu",    
    setup() {        
        const { x, y } = useMouse();        
        onMounted(() => {            
            const cvs = document.getElementById("wufu");            
            const ctx = cvs.getContext("2d");            
            // 画个米字格            
            useTablet(ctx);           
            // 写字            
            useWriteFu(cvs, ctx, x, y);
        })    
    },
};

看看获取鼠标位置怎么写

// src/utils/index.js
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
export const useMouse = () => {   
    const state = reactive({ x: 0, y: 0 });    
    const update = e => {        
        state.x = e.pageX;        
        state.y = e.pageY;    
    }    
    onMounted(() => {        
        window.addEventListener('mousemove', update);    
    })    
    onUnmounted(() => {        
        window.removeEventListener('mousemove', update);   
    })    
    return toRefs(state);
}

vue3的composition-api就是好用，将获取鼠标位置的功能写进utils里，将来都可以直接调用，美滋滋。开始写福

// src/shape/index.js
// 绘制一段文字连线
const doLine = (ctx, x0, y0, x, y) => {    
    ctx.save();    
    ctx.fillStyle = 'rgba(60, 60, 60, 0.5)';    
    ctx.lineWidth = 5;    
    ctx.lineCap = 'round'; // 线帽 不设置的话画出来的线会毛毛的    
    ctx.lineJoin = 'round'; // 连接处 不设置的话画出来的线会尖尖的    
    ctx.beginPath();    
    ctx.moveTo(x0, y0);    
    ctx.lineTo(x, y);    
    ctx.stroke();    
    ctx.closePath();    
    ctx.restore();
}
export const useWriteFu = (cvs, ctx, x, y) => {    
    let x0, y0;    
    let doFlag = false;    
    const getPoint = () => {        
        x0 = x.value; // 绘制起点x坐标        
        y0 = y.value; // 绘制起点y坐标        
        doFlag = true;    
    }    
    const doWrite = () => {        
        if (x.value > 20 && y.value > 20 && x.value < 220 && y.value < 220) {            
            if (doFlag) {                
                doLine(ctx, x0, y0, x.value, y.value);                
                x0 = x.value; // 将一次绘制的终点作为下次绘制的起点                
                y0 = y.value;            
            }        
        }    
    }    
    cvs.addEventListener('mousedown', getPoint);    
    cvs.addEventListener('mousemove', doWrite);    
    cvs.addEventListener('mouseup', () => {        
    doFlag = false;    
    })
}

大功告成，可以写字了，附上我写的丑字