canvas制作钟表小案例

实现原理：canvas绘制圆的知识以及Date对象

window.onload=function (){var myCanvas=document.querySelector('#myCanvas');var cxt=myCanvas.getContext('2d');var timer=null;clearInterval(timer);//钟表函数function zhonbiao() {var x=200,y=200,r=150;//清除画布cxt.clearRect(0,0,myCanvas.width,myCanvas.height);//获取当前时间var day=new Date();var hour= day.getHours();var minute= day.getMinutes();var sec= day.getSeconds();var hourValue=(-90+hour*30+minute/2)*Math.PI/180;var minuteValue=(-90+minute*6)*Math.PI/180;var secValue=(-90+sec*6)*Math.PI/180;//秒针刻度cxt.beginPath();for(var i=0;i<60;i++){cxt.moveTo(x,y);cxt.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);cxt.stroke();}cxt.closePath();//绘制圆盖住一部分cxt.beginPath();cxt.fillStyle="#fff";cxt.moveTo(x,y);cxt.arc(x,y,r*19/20,0,Math.PI*2,false);cxt.fill();cxt.closePath();//制作重要刻度 30度cxt.beginPath();cxt.lineWidth=3;for(var i=0;i<12;i++){cxt.moveTo(x,y);cxt.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);cxt.stroke();}cxt.closePath();//绘制圆盖住一部分cxt.beginPath();cxt.fillStyle="#fff";cxt.moveTo(x,y);cxt.arc(x,y,r*18/20,0,Math.PI*2,false);cxt.fill();cxt.closePath();//绘制时针cxt.beginPath();cxt.lineWidth=5;cxt.moveTo(x,y);cxt.arc(x,y,r*10/20,hourValue,hourValue,false);cxt.closePath();cxt.stroke()//绘制分针cxt.beginPath();cxt.lineWidth=3;cxt.moveTo(x,y);cxt.arc(x,y,r*14/20,minuteValue,minuteValue,false);cxt.closePath();cxt.stroke()//绘制秒针cxt.beginPath();cxt.lineWidth=1;cxt.moveTo(x,y);cxt.arc(x,y,r*17/20,secValue,secValue,false);cxt.closePath();cxt.stroke()}timer= setInterval(zhonbiao,1000);zhonbiao();}</script>

canvas制作钟表小案例相关推荐

linux 电子表小程序,微信小程序Taro开发(3)：canvas制作钟表
制作钟表分成两部分,一部分是表盘,一部分是时针.分针.秒针的走动,首先,先绘制表盘: // 绘制表盘 getDialClock = () => { const width = this.stat ...
canvas制作钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
uniapp实现canvas制作微信小程序海报,线上图片
先看下效果图生成海报后,点击保存到相册,会调起请求权限,是否同学调用我们的相册,允许之后,这张海报就会自动存入我们的相册具体实现: <view class='canvas-box' v-sh ...
html5+canvas+九宫格,javascript+canvas制作九宫格小程序
js核心代码 /* *canvasid:html canvas标签id *imageid:html img 标签id *gridcountX:x轴图片分割个数 *gridcountY:y轴图片分割个数 ...
H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
前端实战小案例--canvas实战之FlappyBird小游戏
前端实战小案例--canvas实战之FlappyBird小游戏想练习更多前端案例,请进个人主页,点击前端实战案例->传送门觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里 ...
canvas制作简单钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
Unity制作随机数字抽奖小案例
Unity制作随机数字抽奖小案例 1. 搭建 UI 界面 2. 实现思路 2-1. 创建 RandomNumber 类 [挂载在每个抽奖格子(Numbers下面的Image)] 2-2. 创建 Sta ...
婚恋交友平台小程序制作开发代码案例
这个是目前比较常见的婚恋交友平台小程序制作开发代码案例解析,很多功能大家都可以参考借鉴,比如关注功能,会员付费功能,权限设置等功能. 上几张图片看看效果首页部分 class DiaryControl ...

canvas制作钟表小案例

canvas制作钟表小案例相关推荐

最新文章

热门文章