linux 电子表小程序,微信小程序Taro开发(3):canvas制作钟表
制作钟表分成两部分,一部分是表盘,一部分是时针、分针、秒针的走动,首先,先绘制表盘:
// 绘制表盘
getDialClock = () => {
const width = this.state.width;
const height = this.state.height;
const ctx = Taro.createCanvasContext('myCanvas', this.$scope);
const R = width/2 - 30;//圆半径
const r = R - 15;
//设置坐标轴原点
ctx.translate(width/2, height/2);
ctx.save();
// 圆心
ctx.beginPath();
ctx.arc(0, 0, 5, 0, 2 * Math.PI, true);
ctx.fill();
ctx.closePath();
// 表盘外圆
ctx.setLineWidth(2);
ctx.beginPath();
ctx.arc(0, 0, R, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.stroke();
// 表盘刻度(大格)
ctx.beginPath();
ctx.setLineWidth(5);
for(var i = 0; i < 12; i++) {
ctx.beginPath();
ctx.rotate(Math.PI / 6);
ctx.moveTo(R, 0);
ctx.lineTo(r, 0);
ctx.stroke();
}
ctx.closePath();
// 表盘刻度(小格)
ctx.beginPath();
ctx.setLineWidth(1);
for(var i = 0; i < 60; i++) {
ctx.beginPath();
ctx.rotate(Math.PI / 30);
ctx.moveTo(R, 0);
ctx.lineTo(R-10, 0);
ctx.stroke();
}
ctx.closePath();
// 表盘时刻(数字)
ctx.beginPath();
ctx.setFontSize(16)//设置字体样式
// ctx.setTextBaseline("middle");//字体上下居中,绘制时间
for(let i = 1; i < 13; i++) {
//利用三角函数计算字体坐标表达式
var x = (r-10) * Math.cos(i * Math.PI / 6 - Math.PI/2);
var y = (r-10) * Math.sin(i * Math.PI / 6 - Math.PI/2);
let sz = i + '';
ctx.fillText(sz, x - 5, y + 5, 15);
}
ctx.closePath();
// 开始绘制
ctx.draw();
}
表盘绘制完毕,再绘制时针,分针,秒针的运动,这里需要新建一个组件来专门管理这个时间运动,在组件中,如下:
// 绘制 针表
drawTime = () => {
const width = this.props.dataRes.width;
const height = this.props.dataRes.height;
const ctx = Taro.createCanvasContext('timeId', this.$scope);
const R = width/2 - 30;//圆半径
//设置坐标轴原点
ctx.translate(width/2, height/2);
ctx.save();
const t = new Date();//获取当前时间
let h = t.getHours();//获取小时
h = h>12?(h-12):h;//将24小时制转化为12小时制
const m = t.getMinutes();//获取分针
const s = t.getSeconds();//获取秒
//绘制时针
ctx.beginPath();
ctx.setStrokeStyle('green')
ctx.setLineWidth(10);
ctx.rotate((Math.PI/6)*(h+m/60+s/3600)-Math.PI/2);
ctx.moveTo(0,0);
ctx.lineTo(R-90,0);
ctx.stroke();
ctx.restore();
ctx.save();
// 绘制分针
ctx.beginPath();
ctx.setStrokeStyle('gold')
ctx.setLineWidth(5);
ctx.rotate((Math.PI/30)*(m+s/3600)-Math.PI/2);
ctx.moveTo(0,0);
ctx.lineTo(R-60,0);
ctx.stroke();
ctx.restore();
ctx.save();
// 绘制秒针
ctx.beginPath();
ctx.setStrokeStyle('red')
ctx.setLineWidth(1);
ctx.rotate((Math.PI/30)*s-Math.PI/2);
ctx.moveTo(0,0);
ctx.lineTo(R-20,0);
ctx.stroke();
ctx.restore();
ctx.save();
ctx.draw();
}
结果显示:
linux 电子表小程序,微信小程序Taro开发(3):canvas制作钟表相关推荐
- 【小程序源码】云开发表情包制作神器微信小程序源码下载,支持各种自定义
该款小程序是一个表情包制作 内容毕竟丰富,另外自定义制作方面也是特别的自由 支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择 这是一款云开发的小程序,但是安装还是挺简单的 搭建教程: 首先使 ...
- 小程序源码:修复图片音频全新升级带特效喝酒神器小游戏微信小程序
这是一款全新升级带特效喝酒神器小游戏微信小程序源码 小编发现很多喝酒神器小程序都不带特效和音效的 感觉差了那么一点意思而且感觉也不炫酷 所以小编今天给大家带来一款带特效,音效炫酷的喝酒神器 该款神器由 ...
- 微信小程序----微信小程序浏览pdf文件
微信小程序----微信小程序浏览pdf文件 说明:通过wx.downloadFile,wx.openDocumen来实现打开pdf文件.只需在js操作即可. HTTP.Config.Request(' ...
- 小程序源码:云开发表情包制作神器微信小程序
该款小程序是一个表情包制作 内容毕竟丰富,另外自定义制作方面也是特别的自由 支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择 这是一款云开发的小程序,但是安装还是挺简单的 搭建教程: 首先使 ...
- 小程序源码:炫酷手持滚动弹幕生成小工具微信小程序-多玩法安装简单
这是一款滚动弹幕生成微信小程序源码 让弹幕文字在手机屏幕上跑起来,LED弹幕 手机弹幕,告白神奇,等 支持多种模板,每一种模板都支持自定义颜色等等 字体跳动,字体表白等等 另外用户也可以支持自定义文字 ...
- 微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...
- 小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表 一.效果展示 二.代码实现 <!-- wxml --> <view class="container"> <! ...
- 生鲜小程序 微信小程序怎么制作 临沂修齐网络专业制作微信小程序
生鲜小程序 微信小程序怎么制作 临沂修齐网络专业制作微信小程序 生鲜小程序开发功能介绍: 1.产品展示:通过扫码或者搜索小程序,用户可以看到不同品种的新鲜蔬菜.水果以及肉类. 2.定时收货:买家可以预 ...
- 微信小程序:娱乐小工具微信小程序源码下载支持多种流量主
这应该是属于娱乐小工具呢还是属于工具箱类型就看你们怎么分辨了 当然啦说是娱乐也可以,里面功能应该也属于娱乐性 如果说是工具类型也可以,里面也属于工具吧 该程序由几个小功能组合而成如有: 网易云音乐下载 ...
- 抛硬币小游戏微信小程序源码
简介: 抛硬币小游戏微信小程序源码 日常生活中遇到选择?抛个硬币看看天意吧! 有了这个小程序,起不起床拋一下,叫不叫外卖拋一下,打不打扫房间拋一下,让生活充满乐趣~ 人生决定不了的决定就让上天来决定吧 ...
最新文章
- 谈python函数的参数处理
- 深度学习与计算机视觉系列(1)_基础介绍
- 转盘抽奖php,使用PHP实现转盘抽奖算法案例解析
- ASP.NET MVC 线程和并发
- redis 多线程_Java架构师Redis单线程?别逗了,Redis6.0多线程重磅来袭
- 配置classpath,引入jar包
- HDU 4911 http://acm.hdu.edu.cn/showproblem.php?pid=4911(线段树求逆序对)
- 「leetcode」15. 三数之和:双指针法
- 循环制比赛要赢几场可能(一定)晋级
- usb万能驱动win7_win10改win7教程
- STC15单片机-PCB设计
- 淘宝CPC、CPM和CPS分别是什么,有什么区别?
- java TIFF转JPG并压缩
- 关于selenium配置Chrome驱动(Windows系统)
- 【CSS 书写模式 (Writing modes )】
- bzoj 3640 JC的小苹果
- uniapp定位和选择城市
- java + selenium 实现QQ快速安全登录xx网站
- 关于正向级数收敛而它的平方也收敛的证明
- shell编程实现一些小游戏