canvas

canvas

by calamus

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<template>
    <canvas id="canvas">
    </canvas>
</template>
</div>

CSS

#canvas{
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
    }

JavaScript

var Main = {
     props: {
      //原点数量
        dotsNum: {
            type: Number,
            default: 25
        },
        //彩色还是黑白
        isColor: {
            type: Boolean,
            default: true
        },
        //圆的颜色
        roundColor: {
            type: String,
            default: "#999"
        },
        //直线颜色
        lineColor: {
            type: String,
            default: "#ccc"
        }
    },
    mounted() {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
        const rndCl = () => Math.floor(Math.random() * 225);
        const width = window.innerWidth;
        const height = window.innerHeight;
        var base_list = [];
        canvas.width = width;
        canvas.height = height;
        // 绘制园
        const drawRounds = (obj, index) => {
            let { x, y, r, color } = obj;
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI);
            if (this.isColor) {
                ctx.fillStyle = color;
            } else {
                ctx.fillStyle = this.roundColor
            }
            ctx.fill();
            ctx.closePath();
        }

        //判断移动方向
        const controlDirection = (obj) => {
            if (obj.x >= (width - obj.r)) {
                obj.controlX = "left";
            } else if (obj.x <= parseInt(obj.r / 2)) {
                obj.controlX = "right";
            }
            if (obj.y >= (height - obj.r)) {
                obj.controlY = "bottom";
            } else if (obj.y <= parseInt(obj.r / 2)) {
                obj.controlY = "top"
            }
            return obj
        }
        //划线
        const drawLine = (list) => {
            list.map((item, index) => {
                ctx.beginPath();
                ctx.moveTo(item.x1, item.y1);
                ctx.lineTo(item.x2, item.y2);
                ctx.LineWeight = 1;
                if (this.isColor) {
                    ctx.strokeStyle = item.color;
    ...