html,js代码移植到vue项目上

已于 2022-03-09 10:34:17 修改
阅读量1.6w 收藏 71
点赞数 31
分类专栏： 前端 文章标签： vue.js javascript html
于 2022-03-09 09:07:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59068750/article/details/123365951
版权

对于我们这些学了一年左右的前端萌新来说，用好vue已经是很难得了，但是慢慢的我需要提高自己的技术，比如看了一些前端特效什么的，但是这些前端特效都是js,html的文件，我们无法直接利用这些文件，我们如何把这些移植到vue上，这是这篇文章所探讨的问题

目录​​​​​​​​​​​​​​

简单案例

中级案例

简单案例

直接先上一个html,js的简单特效案例，一个小球自由落体并弹跳的特效

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <canvas id="canvas" style=" border: 1px solid #ccc;
    display: block;margin: 50px auto; " width="800" height="555"></canvas>
</body>
<script>
    var ball = {
        x: 555,
        y: 100,
        r: 20,
        g: 2,
        vx: -4,
        vy: -10,
        color: 'blue'
    }
    window.onload = function () {
        var canvas = document.querySelector('#canvas')
        canvas.width = 1000;
        canvas.height = 800;

        if (canvas.getContext('2d')) {
            var context = canvas.getContext('2d')
        } else {
            alert('浏览器不支持Canvas，请更换浏览器')
        }

        setInterval(function () {
            render(context)
            update()

        }, 50)


    }

    function update() {
        ball.x += ball.vx;
        ball.y += ball.vy;
        ball.vy += ball.g;

        if (ball.y >= 800 - ball.r) {
            ball.y = 800 - ball.r
            ball.vy = -ball.vy * 0.4
        }
    }

    function render(cxt) {
        cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)

        cxt.fillStyle = ball.color;
        cxt.beginPath()
        cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
        cxt.closePath()

        cxt.fill()
    }
</script>

</html>

可以看出代码并不复杂，里面的代码如何写的我不做解释，你可以去看其他博客，也可以私聊我

我需要把这html放到vue文件中并且能运行

先看结构，一个ball变量 3个方法，其中一个方法是主方法（window.onload方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法） 

改成vue中的代码 

<!--  -->
<template>
  <div class="main">
    <canvas
      id="canvas"
      style="border: 1px solid #ccc; display: block; margin: 50px auto"
      width="800"
      height="555"
      ref="canvas"
    ></canvas>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
//这个没问题吧，很容易想到
      ball: {
        x: 555,
        y: 100,
        r: 20,
        g: 2,
        vx: -4,
        vy: -10,
        color: "blue",
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
    //   var canvas = document.querySelector("#canvas");
//这个知道吧，vue建议用refs获取，如果用上面的获取，会产生如果重名了会很混乱（跨vue文件，慎用）
      var canvas=this.$refs.canvas
      canvas.width = 1000;
      canvas.height = 800;

      if (canvas.getContext("2d")) {
        var context = canvas.getContext("2d");
      } else {
        alert("浏览器不支持Canvas，请更换浏览器");
      }
      console.log(context);
      setInterval(() => {
        this.myRender(context);
        this.update();
      }, 50);
    },
    update() {
      this.ball.x += this.ball.vx;
      this.ball.y += this.ball.vy;
      this.ball.vy += this.ball.g;

      if (this.ball.y >= 800 - this.ball.r) {
        this.ball.y = 800 - this.ball.r;
        this.ball.vy = -this.ball.vy * 0.4;
      }
    },
    myRender(cxt) {
      cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
      cxt.fillStyle = this.ball.color;
      cxt.beginPath();
      cxt.arc(this.ball.x, this.ball.y, this.ball.r, 0, 2 * Math.PI);
      cxt.closePath();
      cxt.fill();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
/*@import url(); 引入公共css类*/
.main {
  height: 100vh;
}
</style>

基本很简单，就是把三个方法写在method里面，一个主方法放在mouted调用

中级案例

html,js实现时钟

原目录结构

代码如下

arr.js

var arr = [
    // 0
    [
        [0, 0, 1, 1, 1, 0, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 0, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 0]
    ],

    // 1
    [
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
    ],
    // 2
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
    ],

    // 3
    [
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 1, 0, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],

    // 4
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 1, 1, 0],
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 1],
    ],
    // 5
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 6
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 7
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
    ],
    // 8
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 9
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
    ],

    // :
    [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],

    ]
]

 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <canvas id="canvas" style=" 
    display: block;margin: 50px auto; " width="800" height="555"></canvas>

    <script src="arr.js"></script>
    <script src="index.js"></script>
</body>

</html>

index.js

const WINDOW_WIDTH = 1000;
const WINDOW_HEIGHT = 800;
const RADIUS = 6;
const MARGIN_LEFT = 80;
const MARGIN_TOP = 60;
var now = new Date()
var balls = []
const colors = ['#33BEE5', '#0099CC', '#9933CC', '#AA66CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', 'pink', 'yellow']
window.onload = function () {
    var canvas = document.querySelector('canvas')
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT
    var context = canvas.getContext('2d')

    setInterval(() => {
        render(context);
        update()
    }, 40);
}

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    renderArr(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderArr(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);
    renderArr(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
    renderArr(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
    renderArr(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
    renderArr(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);


    for (var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;
        cxt.beginPath()


        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
    }

    ballsUpdate()
    console.log(balls.length);

}


function ballsUpdate() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].v_x;
        balls[i].y += balls[i].v_y;
        balls[i].v_y += balls[i].g;

        if (balls[i].y >= 800 - RADIUS) {
            balls[i].y = 800 - RADIUS
            balls[i].v_y = -balls[i].v_y * 0.4
        }
    }

    // 性能优化，销毁球
    var t = 0;
    for (let i in balls) {
        if ((balls[i].x + RADIUS) > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) {
            balls[t++] = balls[i];
        }
    }

    while (balls.length > Math.min(300, t)) {
        balls.pop();
    }
}






// 更新时间
function update() {
    // 现在的时间
    var cur_now = new Date()
    var cur_hours = cur_now.getHours();
    var cur_minutes = cur_now.getMinutes();
    var cur_seconds = cur_now.getSeconds();

    // 上一秒的时间
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 时间不= 就把新时间给旧时间
    if (cur_now != now) {
        now = cur_now;
    }

    // 旧时间和新时间 哪里不一样就改哪里
    if (parseInt(cur_hours / 10) != parseInt(hours / 10)) {
        addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(cur_hours / 10))
    }
    if (parseInt(cur_hours % 10) != parseInt(hours % 10)) {
        addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_hours % 10))
    }
    if (parseInt(cur_minutes / 10) != parseInt(minutes / 10)) {
        addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes / 10))
    }
    if (parseInt(cur_minutes % 10) != parseInt(minutes % 10)) {
        addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes % 10))
    }
    if (parseInt(cur_seconds % 10) != parseInt(seconds % 10)) {
        addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds % 10))
    }
    if (parseInt(cur_seconds / 10) != parseInt(seconds / 10)) {
        addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds / 10))
    }


}



// 绘制时间
function renderArr(x, y, num, cxt) {
    cxt.fillStyle = 'skyblue'
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                cxt.beginPath();
                cxt.arc(x + j * 2 * (RADIUS + 1), y + i * 2 * (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
                cxt.closePath()
                cxt.fill()
            }
        }
    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                var one_ball = {
                    x: x + j * 2 * (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1),
                    g: 1.5 * Math.random(),
                    v_x: i % 2 == 1 ? -4 : 4,
                    v_y: Math.ceil(Math.random() * 10),
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(one_ball)
            }
        }
    }
}

开始转换，把这些代码移植到vue中，arr.js,index.js放的位置，Test.vue是引用展示页面

 arr.js就加了导出

export const arr = [
    // 0
    [
        [0, 0, 1, 1, 1, 0, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 0, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 0]
    ],

    // 1
    [
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
    ],
    // 2
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
    ],

    // 3
    [
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 1, 0, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],

    // 4
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 1, 1, 0],
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 1],
    ],
    // 5
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 6
    [
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 7
    [
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
    ],
    // 8
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
    ],
    // 9
    [
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
    ],

    // :
    [
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],

    ]
]

index.js 引入arr.js，导出init  并把docment的语句删了，传入参数，再在Test.vue中调用init并传入this.$refs.canvas这参数

import {arr} from './arr.js'
const WINDOW_WIDTH = 1000;
const WINDOW_HEIGHT = 800;
const RADIUS = 6;
const MARGIN_LEFT = 80;
const MARGIN_TOP = 60;
var now = new Date()
var balls = []
const colors = ['#33BEE5', '#0099CC', '#9933CC', '#AA66CC', '#669900', '#FFBB33', '#FF8800', '#FF4444', 'pink', 'yellow']
export function init(canvas) {
//删除换到vue文件中，这里不能直接this.$refs.canvas
//    var canvas = document.querySelector('canvas')


    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT
    var context = canvas.getContext('2d')

    setInterval(() => {
        render(context);
        update()
    }, 40);
}

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    renderArr(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);
    renderArr(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);
    renderArr(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);
    renderArr(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);
    renderArr(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);


    renderArr(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);
    renderArr(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);


    for (var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color;
        cxt.beginPath()


        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI)
        cxt.closePath()
        cxt.fill()
    }

    ballsUpdate()
    console.log(balls.length);

}


function ballsUpdate() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].v_x;
        balls[i].y += balls[i].v_y;
        balls[i].v_y += balls[i].g;

        if (balls[i].y >= 800 - RADIUS) {
            balls[i].y = 800 - RADIUS
            balls[i].v_y = -balls[i].v_y * 0.4
        }
    }

    // 性能优化，销毁球
    var t = 0;
    for (let i in balls) {
        if ((balls[i].x + RADIUS) > 0 && balls[i].x - RADIUS < WINDOW_WIDTH) {
            balls[t++] = balls[i];
        }
    }

    while (balls.length > Math.min(300, t)) {
        balls.pop();
    }
}






// 更新时间
function update() {
    // 现在的时间
    var cur_now = new Date()
    var cur_hours = cur_now.getHours();
    var cur_minutes = cur_now.getMinutes();
    var cur_seconds = cur_now.getSeconds();

    // 上一秒的时间
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    // 时间不= 就把新时间给旧时间
    if (cur_now != now) {
        now = cur_now;
    }

    // 旧时间和新时间 哪里不一样就改哪里
    if (parseInt(cur_hours / 10) != parseInt(hours / 10)) {
        addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(cur_hours / 10))
    }
    if (parseInt(cur_hours % 10) != parseInt(hours % 10)) {
        addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_hours % 10))
    }
    if (parseInt(cur_minutes / 10) != parseInt(minutes / 10)) {
        addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes / 10))
    }
    if (parseInt(cur_minutes % 10) != parseInt(minutes % 10)) {
        addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_minutes % 10))
    }
    if (parseInt(cur_seconds % 10) != parseInt(seconds % 10)) {
        addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds % 10))
    }
    if (parseInt(cur_seconds / 10) != parseInt(seconds / 10)) {
        addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(cur_seconds / 10))
    }


}



// 绘制时间
function renderArr(x, y, num, cxt) {
    cxt.fillStyle = 'skyblue'
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                cxt.beginPath();
                cxt.arc(x + j * 2 * (RADIUS + 1), y + i * 2 * (RADIUS + 1), RADIUS, 0, 2 * Math.PI)
                cxt.closePath()
                cxt.fill()
            }
        }
    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < arr[num].length; i++) {
        for (var j = 0; j < arr[num][i].length; j++) {
            if (arr[num][i][j] == 1) {
                var one_ball = {
                    x: x + j * 2 * (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1),
                    g: 1.5 * Math.random(),
                    v_x: i % 2 == 1 ? -4 : 4,
                    v_y: Math.ceil(Math.random() * 10),
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(one_ball)
            }
        }
    }
}

Test.vue

<!--  -->
<template>
<div class='main'>
      <canvas id="canvas"  ref="canvas" style=" 
    display: block;margin: 50px auto; " width="800" height="555"></canvas>
</div>
</template>

<script>
import { init } from "@/assets/js/index.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var canvas = this.$refs.canvas
    init(canvas);
  },

};
</script>
<style scoped lang="less">
/*@import url(); 引入公共css类*/
.main {
  height: 80vh;
}
</style>

大功告成！！！

江河地笑
关注
  • 31
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
刚学的把HTML页面改到vue当中
一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！
07-04 1934
【代码】刚学的把HTML页面改到vue当中。
openlayers 3实现车辆轨迹回放
10-14
主要为大家详细介绍了openlayers 3实现车辆轨迹回放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML页面转成Vue组件（数据可视化大屏）
qq_40661472的博客
07-21 6716
数据可视化大屏开发
如何将html模板资源转为vuecli项目，2024阿里巴巴前端面试真题解析
最新发布
m0_60607971的博客
04-03 424
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记JavaScript 学习笔记Vue 学习笔记。
关于如何把自己写的html文件放入新建的Vue3工程中
今天学了吗
04-25 2341
主要讲了如何将自己写的html文件移植到新建的Vue工程中。记得在与中间加上，否则会出现1:1 error The template requires child element的报错。
三、html页面构建Vue项目步骤思路
qq_23135259的博客
01-30 2052
html构建vue项目思路
尚硅谷-谷粒商城P44Vue模板
weixin_44829804的博客
09-18 969
配置模板 <template> <div></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { /
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
weixin_65100963的博客
05-04 937
vue脚手架_基础API 安装：vue-devtools 学习和调试vue必备之利器 - 官方插件 安装： 打开Chrome浏览器 =>点击浏览器右上角小图标，按图示操作 2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装 3.安装完成后，固定显示插件 Vue基本概念 Vue是什么 vue是一个渐进式的javascript框架 库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大
如何将html模板资源转为vuecli项目
热门推荐
何浩翔的博客
02-14 3万+
1.目标 将找到的html素材模板，转换为vue的文件。 这个网上照了一圈，没找到合适的方案，就自己尝试弄了一下 目标效果 2.具体步骤 1. 通过vueclie 创建项目 vue create 项目名称 然后把默认的样式删除了 2. 将静态资源放到vue项目的 public 文件夹中 3.将html部分 ，copy至template里面 一般是将body 的内容 放置template即可 这里只是copy paste ，就不写了 4.修改css样式引入的写法 改成vue单文件的写法 运行起
DTCIM Viewer图形引擎产品之卷帘对比&分屏对比
DTCloud
04-28 1076
在项目的数字孪生地图的规划过程中，有时候会遇见展示不同时期房屋建造状态、项目规划设计对比等需求，如需查看工程每个周期的建设进度等，在面对这些需求时。比较常用的展示方式有卷帘对比及分屏对比功能，分屏和卷帘操作通常用于方便对比不同时空或者不同规划在同一区域的差异，是一种直观的对比分析手段，可辅助用户对土地规划、应急管理等进行决策。 卷帘对比和分屏对比，都是通过在屏幕上创建两个视图，通过视图间的直接对比，直观展示时空数据存在的差异性，其中卷帘对比是基于同一个坐标系底座（即仅建立一个地球），浏览窗口通过卷帘的滑动，
vue wps插件引入到前端项目js
06-30
wps插件文件 放在src目录下，
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　　2. cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 　　3. header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 　　4. header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Ob
Vue中插入HTML代码的方法
12-03
我们需要吧<p>Hello World插入到<p>My name is Pjee应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` My name is Pjee <p v-html='text'></p> 注意：你的站点...
前端代码规范-js，html，vue，css，ts
02-21
前端代码规范-js，html，vue，css，ts
vue3+webpack项目代码
05-11
资源包里面包含vue3+webpack项目需要的相关依赖项代码和vue3+webpack项目所需要的编译、启动服务的相关代码，代码下载下来就能直接启动使用，另外还包含了vue3+webpack项目代码及其配置文件的详细讲解。
vue项目部署到nginx/tomcat服务器的实现
10-16
主要介绍了vue项目部署到nginx/tomcat服务器的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
html 转成vue_vue两个版本的区别和使用方法
weixin_32095133的博客
01-26 1304
vue的两个版本1.完整版：vue.js通过编译器compiler把视图上的HTML转化为DOM节点、转化成HTML内容，完整版的视图是写在HTML里面或者template选项里，由于有 compiler(编译器)的存在，完整版运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。2.非完整版：vue.runtime.js 非完整版中的html只是字符...
Vue学习笔记——基础语法{{ }}
weixin_44154577的博客
03-04 6090
Vue学习笔记 {{ }}大括号，也是最常用的取值符号，用来渲染data里面的数据 <body> <div id="app"> {{message}} <H2>{{people.name}} {{people.sno}}</H2> <ul> <li>{{campus[0]}}</li> <li>{{campus[1]}}</li> <li>{{c
vue项目移植到html项目
06-06
将 Vue 项目移植到 HTML 项目是一项比较复杂的任务，因为 Vue 是一种单页面应用程序的框架，而 HTML 项目通常是多个页面的集合。因此，要将 Vue 项目移植到 HTML 项目，需要将 Vue 代码拆分成多个独立的组件，并使用 Vue CLI 工具将这些组件编译为可以在 HTML 项目中使用的 JavaScript、CSS、HTML 文件。 以下是移植 Vue 项目到 HTML 项目的大致步骤： 1. 将 Vue 项目的代码拆分成多个独立的组件，每个组件包含 HTML、CSS 和 JavaScript 代码。 2. 使用 Vue CLI 工具将这些组件编译为可以在 HTML 项目中使用的 JavaScript、CSS、HTML 文件。可以使用 Vue CLI 的 build 命令来完成这一步骤。 3. 将编译后的文件复制到 HTML 项目中的合适位置，并在 HTML 文件中引入这些文件。 4. 为每个页面创建一个 JavaScript 文件，并在其中使用 Vue 组件来渲染页面。 5. 将页面的 HTML、CSS 和 JavaScript 代码整合到一起，并在浏览器中运行 HTML 项目。 需要注意的是，由于 Vue 和 HTML 的编程模型有很大的差异，因此在移植 Vue 项目到 HTML 项目时，可能需要做一些额外的工作，例如手动管理页面状态、路由和事件处理等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

江河地笑

实践是检验真理的唯一标准

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值