Today pay treasure set five blessing activity began again, is everybody already set together? Don’t panic if you don’t have a collection. Let’s draw a blessing for ourselves. Maybe we can sweep out a dedicated blessing.

Don’t say a word. Just masturbate.

Create a new VuE3 project…

Introduce the five Blessings component we are going to do in 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>
Copy the code

Start our wufu component, create wufu.vue under Components folder, add our Canvas to get the Canvas context object. Let’s draw a grid clipboard first.

// 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); })}}; Export const useTablet = (CTX) => {ctx.save(); </script> <style> </style> // SRC /shape/index.js export const useTablet = (CTX) => {ctx.save(); // Save the original drawing state ctx.strokeStyle = "red"; ctx.lineWidth = 5; ctx.strokeRect(20, 20, 200, 200); ctx.stroke(); ctx.lineWidth = 2; ctx.setLineDash([15, 15]); // Draw a dotted line 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(); // Return to the original drawing state to avoid affecting the next drawing}Copy the code

So we’ve finished drawing the clipboard, and it looks like this, awesome

Start writing! You must first get the mouse position

// 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); })}};Copy the code

How to get mouse position

// 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);
}
Copy the code

Vue3’s composition-API is so handy that the function of getting mouse position is written into utils and can be called directly in the future. Start to write the

// SRC /shape/index.js // Draw a line const doLine = (CTX, x0, y0, x, y) => {ctx.save(); FillStyle = 'rgba(60, 60, 60, 0.5)'; ctx.lineWidth = 5; ctx.lineCap = 'round'; // CTX. LineJoin = 'round'; // If the connection is not set, the drawn line will be pointed 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; // Draw the starting x-coordinate y0 = y.value; // Draw the starting y coordinate 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; // Use the end of one drawing as the start of the next drawing. } } } cvs.addEventListener('mousedown', getPoint); cvs.addEventListener('mousemove', doWrite); cvs.addEventListener('mouseup', () => { doFlag = false; })}Copy the code

Done, you can write, with my ugly words