canvas + vue实现时钟

最新推荐文章于 2024-07-19 12:32:40 发布

成都丁海寅

最新推荐文章于 2024-07-19 12:32:40 发布

阅读量495

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44523450/article/details/121339337

版权

本文将介绍如何结合canvas元素与Vue.js框架来创建一个动态更新的时钟组件。通过利用Vue的数据绑定和生命周期钩子，以及canvas的绘图功能，我们可以实现实时显示当前时间的效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!--  -->
<template>
  <div class=''>
      <canvas id="canvas2" width="800" height="600"></canvas>
  </div>
</template>

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

  export default {
   
    //import引入的组件需要注入到对象中才能使用
    components: {
   },
    data() {
   
      //这里存放数据
      return {
   
        ctx:'',
      }
    },
    //监听属性 类似于data概念
    computed: {
   
    },
    //监控data中的数据变化
    watch: {
   },
    //方法集合
    methods: {
   
        initCanvas(){
   
            // 初始化canvas
            var ctx = document.getElementById('canvas2')
            ctx = ctx.getContext("2d");![在这里插入图片描述](https://img-blog.csdnimg.cn/fbccfe24dff74fa1b5c55fa7bb29789d.png#pic_center)

            this.ctx = ctx
            var _that = this
            setInterval(function(ctx){
   
              _that.drawTime()// 秒针
            },1000)
        },
        // 画表盘的圆
        //ctx：canvas画柄，r：圆的半径，pi：旋转角度，x:开始横坐标，y：开始的纵坐标
        draw(ctx,r,x,