微信小程序画布画时针转盘

需求：使用微信小程序画一个12时辰的转盘，每两一个小时转盘上的指针跳动一次，每隔两个小时转盘分区跳动一次。

canvas.wxml

<view class="canvas-content"><canvas class="canvas-element" canvas-id='turntableCanvas' style='width:{{canvaswidth}}px;height:{{canvasheight}}px;'></canvas>
</view>

canvas.wxss

page{display: block;min-height: 100%;  background-color: #EFE7AF
}
.canvas-content canvas{position: absolute;
}

canvas.js

// pages/canvas/canvas.js
var util = require('../../utils/util.js');
Page({/*** 页面的初始数据*/data: {pageWidth:0,//页面宽pageHeight:0,//页面高canvaswidth:0,//画布宽canvasheight:0,//画布高},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//将全局变量Index保存在that中，里面函数调用 var that = this//获取系统信息 wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽高赋给页面的宽高 success: function (res) {that.width = res.windowWidththat.height = res.windowHeight }}) this.setData({canvaswidth: that.width,canvasheight: that.width*0.8,pageWidth: that.width,pageHeight: that.height})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {drawTurntable(this, util.formatTime(new Date()));rightUp(this);leftUp(this);leftDown(this)var that = this;var turntable = setInterval(function () {drawTurntable(that, util.formatTime(new Date()));}, 1000);  },
})
//画转盘图
function drawTurntable(obj,timeStr){//获取页面的宽和高var h = obj.height;       //页面高var w = obj.width;        //页面宽var x= w / 2;             // 圆心横坐标 0.5wvar y= x * 0.8;           // 圆心纵坐标 0.4wvar r = w *0.35;     //圆半径 0.35wvar num = timeStr.split(":")[0];  //截取小时（24小时制）var ctx = wx.createCanvasContext("turntableCanvas", obj);//获取画笔ctx.setStrokeStyle("#EFE7AF");    //设置边框颜色。（背景色）ctx.setLineWidth(1)               //设置边框宽度ctx.arc(x, y, r, 0, 2 * Math.PI, false); //画大转盘圆ctx.setFillStyle("#439A67");      //设置填充色ctx.fill();                       //填充大转盘圆for(var i = 0; i < 12; i++){      //画扇形分割线ctx.beginPath()ctx.arc(x, y, r, (1 / 6 * i -7/ 12) * Math.PI, (1 / 6 * (i + 1)-7/12) * Math.PI , false);//画扇形起始位置第二象限偏Y轴15度ctx.lineTo(x,y);                //链接圆心ctx.stroke()                    //显示画笔走过的路径if (parseInt(num / 2) == i) {   //改变指针指示区域颜色ctx.setFillStyle("#FF9E04");ctx.fill();}} ctx.beginPath()//画转盘小圆ctx.arc(x, y, r/1.3, 0, 2 * Math.PI , false);ctx.stroke();//画指针圆ctx.beginPath()ctx.arc(x, y, r / 2.7, 0, 2 * Math.PI, false);ctx.setFillStyle("#F84752");ctx.fill();ctx.save()                          //保存画笔状态//画指针ctx.beginPath()ctx.translate(x, y)                 //设置旋转中心ctx.rotate(num *15* Math.PI / 180)  //旋转角度ctx.moveTo(r/5, 0);                 //从旋转中心x偏移r/5ctx.lineTo(- r / 5, 0);             //链接旋转中心x反方向偏移r/5ctx.lineTo(0, - r / 1.8);           //链接Y轴反方向r/1.8ctx.setFillStyle("#F84752");        //设置填充色ctx.fill();                         //填充//画时钟圆ctx.restore();                      //恢复画笔状态ctx.beginPath()ctx.arc(x, y, r/3.8, 0, 2 * Math.PI, false);ctx.setFillStyle("#812028");ctx.fill();ctx.setFontSize(r/10)ctx.setFillStyle("#ffffff");ctx.fillText(timeStr,x-r/5,y+r/20);//设置文字var backgroundText = [{ "jing": "肝经", "shi": "丑时" },{ "jing": "肺经", "shi": "寅时" },{ "jing": "大肠经", "shi": "卯时" },{ "jing": "胃经", "shi": "辰时" },{ "jing": "脾经", "shi": "巳时" },{ "jing": "心经", "shi": "午时" },{ "jing": "小肠经", "shi": "未时" },{ "jing": "膀胱经", "shi": "申时" },{ "jing": "肾经", "shi": "酉时" },{ "jing": "心包经", "shi": "戌时" },{ "jing": "三焦经", "shi": "亥时" },{ "jing": "胆经", "shi": "子时" },]ctx.translate(x, y)for(var i = 0; i < 12; i++){ctx.rotate(30 * Math.PI / 180)ctx.setFontSize(r / 10)if(backgroundText[i].jing.length==2)ctx.fillText(backgroundText[i].jing, -0.1 * r, -0.83 * r); elsectx.fillText(backgroundText[i].jing, -0.15*r , -0.86*r);  ctx.fillText(backgroundText[i].shi, -0.10 * r, -0.65 * r);}ctx.draw();
}

效果图

微信小程序画布画时针转盘相关推荐

微信小程序Canvs画数据表格折线图
微信小程序Canvs画数据表格应设计要求,需要画个图标来显示用户历史数据的变化,所以就写了个方法,方便自己以后用的时候调用废话不多说,先上效果图现在.wxml文件中加入canvas 标签给他一 ...
微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
微信小程序canvas画价格走势图（六）
到上一篇,可以说,所有的工作已经完成了,那为什么还会有第六篇呢?因为,客户改需求了,UI设计图改了,我也就不得不改代码,画一个新的版本出来.我在大功告成,开始写第一篇的时候突然改的,我也就准备加一篇来 ...
微信小程序canvas画价格走势图（三）
今天继续更新在微信小程序上用canvas画价格走势图.上一篇讲了图上主要的部分,也就是折线图的绘制.假如我在我的绘图主函数中只调用了绘制折线图的函数,效果是这样的: 可以说除了作为坐标背景的<i ...
微信小程序canvas画价格走势图（一）
今天是周二,今天来开一个新坑吧.最近花了整整两个工作日的时间画了一个微信小程序端的价格走势图,现在来分享一下经验. 因为内容比较多,所以打算这次分为多篇博客来写,这样一篇博客的内容就会更少.更清晰.下 ...
android时钟小程序,超详细，用canvas在微信小程序上画时钟教程
Page({ data: { width:0, height:0}, onLoad:function(options) {var that = this //获取系统信息 wx.getSystemIn ...
微信小程序画布组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有 ...
【修复日常bug】微信小程序canvas画商品海报出现个别用户无法生成的情况
微信小程序,在使用canvas画海报的时候,会导致个别用户无法生成的情况,你们可以尝试把绘画某些块的代码注释掉再进行扫码调试,我前几天就遇到个别客户无法生成商品海报的情况,刚开始是以为上一个同事留的坑 ...
微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...

微信小程序画布画时针转盘

微信小程序画布画时针转盘相关推荐

最新文章

热门文章