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 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
随机推荐
- 利用while循环写的简单小游戏猜数字
猜数字的大小游戏 C:\Users\Administrator>python Python 3.6.8 (tags/v3.6.8:3c6b436a57, Dec 23 2018, 23:31:1 ...
- c/c++ 常见字符串处理函数总结 strlen/sizeof strcpy/memcpy/strncpy strcat/strncat strcmp/strncmp sprintf/sscanf strtok/split/getline atoi/atof/atol
这里总结工作中经常用到的一些c/c++的字符串处理方法,标黑的是使用频率较高的 1.strlen函数:计算目标字符串长度, 格式:strlen(字符指针指向区域) 注意1:①不包含字符串结束 ...
- python实用脚本-通过jenkins界面化导出数据
1.jenkins 配置 2.jenkins 脚本 ansible-playbook /opt/test.yaml --extra-vars "loanno=${loanno}" ...
- ArcGIs创建企业级数据库
本文主要描述ArcGIs创建企业级数据库. 目标:创建企业级地理数据库,使用ArcMap通过SDE引擎 与Oracle交互数据,创建完成后将本地的mdb数据库中数据迁移到Oracle的地理数据库当中. ...
- k8s学习笔记一(搭建&部署helloworld应用)
kubernetes 目录 kubernetes 虚拟机创建三个节点 k8s install 部署hello world 应用 issue 汇总 node 一直处理NotReady状态 重启系统后虚拟 ...
- 6月25日 Django 分页 cookie、session
cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...
- python 模块之 selenium 自动化使用教程
一.安装 pip install Selenium 二.初始化浏览器 Chrome 是初始化谷歌浏览器 Firefox 是初始化火狐浏览器 Edge 是初始化IE浏览器 PhantomJS 是一个无界 ...
- GitFlow 工作流
1.概述 GitFlow 工作流定义了一个围绕项目发布的严格分支模型.虽然比功能分支工作流复杂几分,但提供了用于一个健壮的用于管理大型项目的框架. GitFlow 工作流没有用超出功能分支工作流的概念 ...
- 【深度学习 01】线性回归+PyTorch实现
1. 线性回归 1.1 线性模型 当输入包含d个特征,预测结果表示为: 记x为样本的特征向量,w为权重向量,上式可表示为: 对于含有n个样本的数据集,可用X来表示n个样本的特征集合,其中行代表样本,列 ...
- css--BFC是什么,有什么用,怎么用?
前言 作为前端开发人员或者学生,你一定知道BFC这个关键词,但是你是否具体了解过什么是BFC?BFC有什么用?BFC怎么用些问题呢?本文就来总结一下相关的知识点,希望对阅读到的小伙伴在面试.学习.开发 ...