vue重构--H5--canvas实现粒子时钟
上一篇文章讲解了如何用js+canvas实现粒子时钟,本篇文章 ,主要是使用vue重构,让它在vue也能使用。
我们使用简单的方式重构,不使用vue工程,先加入vue cdn的地址,如下:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
然后,重构Clock对象构造器,改为将canvas传入,如下:
function Clock(canvas) {
this.cxt = canvas.getContext('2d');
this.cxt.fillStyle="#ddd";
this.cxt.fillRect(0, 0, 500, 100);
this.r = 100/20-1;
}
然后,创建vue对象实例,使用生命周期装载初始化,如下:
var app = new Vue({
el: '#container',
data: {
message: 'Hello Vue!'
},
mounted() {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 100;
var clock = new Clock(canvas);
setInterval(()=>{
clock.getTime();
})
}
})
直接打开页面就好,若是用vue工程也可以
好了,这样就ok了。
若有疑问或需要素材,请加群交流:654979292
vue重构--H5--canvas实现粒子时钟的更多相关文章
- H5 canvas圆形的时钟
今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas实现七巧板图案和粒子时钟
canvas实现七巧板 <canvas id="canvas" width="800" height="800"></ ...
- canvas自适应圆形时钟绘制
前面的话 前面介绍过canvas粒子时钟的绘制,本文将详细介绍canvas自适应圆形时钟绘制 效果演示 最终自适应圆形时钟的效果如下所示 功能分析 下面来分析一下该圆形时钟的功能 [1]静态背景 对于 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- angularApi网站用vue重构
最近在博客园上看到不少关于vue的文章但感觉都是在简单原生写法上,真正vue在实际开发中的优点组件化,spa应用,路由好像都没涉及到,我在学angular1的时候发现没有中文版的api,于是本人不才弄 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
随机推荐
- CoLAKE: 如何实现非结构性语言和结构性知识表征的同步训练
原创作者 | 疯狂的Max 论文CoLAKE: Contextualized Language and Knowledge Embedding 解读 01 背景与动机 随着预训练模型在NLP领域各大任 ...
- laravel 登录+中间件拦截+红柚小说网小说采集+图片本地化
.......................登录界面 <!doctype html> <html lang="en"> <head> < ...
- js格式化树形数据(扁平化数据)
需求: 1.把如下数据按照parent_id等于id的规则建立父子关系 2.同一层级的数组按照order升序 [ { "id": 1, "name": &quo ...
- C#+SQL Server的数据库管理系统常用的代码
数据库管理系统 数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件,用于建立.使用和维护数据库,简称DBMS.它对数据库进行统一的管理和控制,以保证 ...
- ybt1130:找第一个只出现一次的字符
1130:找第一个只出现一次的字符 时间限制: 1000 ms 内存限制: 65536 KB提交数: 62333 通过数: 23786 [题目描述] 给定一个只包含小写字母的字 ...
- SQL语句优化、mysql不走索引的原因、数据库索引的设计原则
SQL语句优化 1 企业SQL优化思路 1.把一个大的不使用索引的SQL语句按照功能进行拆分 2.长的SQL语句无法使用索引,能不能变成2条短的SQL语句让它分别使用上索引. 3.对SQL语句功能的拆 ...
- 内网渗透----Windows下信息收集
一.基础信息收集 使用systeminfo命令查看操作系统版本.架构.补丁情况 Windows-Exploit-Suggester-master -u 参数升级并将数据库下载至本地: -i 参数指定系 ...
- 解决IDEA的plugins安装插件很慢、不成功问题
1.修改hosts文件 路径:C:\Windows\System32\drivers\etc 52.84.224.36 plugins.jetbrains.com 重启IDEA,再次安装插件时,芜湖~ ...
- 转-MySQL 数据库误删除后的数据恢复操作说明
在日常运维工作中,对于mysql数据库的备份是至关重要的!数据库对于网站的重要性使得我们对mysql数据的管理不容有失!然后,是人总难免会犯错误,说不定哪天大脑短路了来个误操作把数据库给删除了,怎么办 ...
- DRF(Django REST Framework)框架
目录 一.DRF中的Request 二.前戏: 关于面向对象的继承 三.初级版本 1. settings.py文件 -- 注册app 2. models.py文件 -- 创建表 3. admin.py ...