【前言】
分享个特效,canvas绘制圆形钟表
先看下效果
【主体】
<canvas width="200px" height="200px" id="clock"></canvas>
var dom = document.getElementById("clock"); var ctx = dom.getContext("2d"); var width = ctx.canvas.width; var height = ctx.canvas.height; var r= width / 2; var rem = width/200; function drawAround(){ ctx.save(); ctx.beginPath(); ctx.translate(r, r); ctx.lineWidth = 2 * rem; ctx.arc(0, 0, r-5, 0,2*Math.PI, false); ctx.strokeStyle = "#03a9f4"; ctx.stroke(); var housNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; ctx.font="18px Arial"; ctx.textAlign = "center"; ctx.textBaseline = 'middle'; housNumbers.forEach(function(number, i){ var rad = 2 * Math.PI/12 *i; var x = Math.cos(rad) * (r - 30); var y = Math.sin(rad) * (r -30); ctx.fillText(number, x, y); }); for(var i =0;i<60;i++){ var rad = 2 * Math.PI/60 * i; var x = Math.cos(rad) * (r - 18); var y = Math.sin(rad) * (r -18); ctx.beginPath(); if( i % 5 != 0){ ctx.fillStyle = "#eee"; }else { ctx.fillStyle = "#03a9f4"; } ctx.arc(x, y, 2, 0,2*Math.PI, false); ctx.fill(); } } function drawhHour(hour, minute){ ctx.save() ctx.beginPath(); var rad = 2 * Math.PI/12 *hour; var mrad = 2 * Math.PI / 12 /60 * minute; ctx.rotate(rad + mrad); ctx.lineWidth = 5; ctx.lineCap = "round" ctx.moveTo(0, 10); ctx.lineTo(0, -r/2); ctx.stroke(); ctx.restore(); } function drawMinute(minute){ ctx.save() ctx.beginPath(); var rad = 2 * Math.PI/60 *minute; ctx.rotate(rad); ctx.strokeStyle = "#80deea"; ctx.lineWidth = 3; ctx.lineCap = "round" ctx.moveTo(0, 10); ctx.lineTo(0, -r +30); ctx.stroke(); ctx.restore(); } function drawSecond(second){ ctx.save() ctx.beginPath(); var rad = 2 * Math.PI/60 *second; ctx.rotate(rad); ctx.fillStyle = "#f00"; ctx.moveTo(-2, 20); ctx.lineTo(2, 20); ctx.lineTo(1, -r + 18); ctx.lineTo(-1, -r + 18); ctx.fill(); ctx.restore(); } function drawDot(){ ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(0, 0,3,0,2*Math.PI,false); ctx.fill(); } function draw(){ ctx.clearRect(0, 0, width, height) var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds() drawAround(); drawhHour(hour, minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore(); } draw(); setInterval( draw,1000);
.
相关推荐
使用canvas绘制钟表 使用canvas绘制钟表 使用canvas绘制钟表
html5 canvas绘制时钟表时间是一款用canvas精灵绘制器绘制的时钟表时间特效。
html5 canvas绘制时钟表时间效果源码下载 html5 canvas绘制时钟表时间效果源码下载
html5 canvas绘制圆形气泡背景动画特效
html5 canvas画布绘制圆形时钟代码
QML--Canvas画布实现矩形圆形等圈定
1、通过自定义view 来实现指针钟表时间显示 2、详细看代码
Html5 Canvas绘制圆形仪表盘动画特效.zip
一款html5 canvas绘制圆形雷达扫描动画特效,带波信号坐标提示效果,左下方还有动态扫描数据信息显示。
使用canvas绘制的实时时钟
基于html5 canvas绘制圆形的钢丝ui动画特效.zip
网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效...
html5+canvas绘制圆形的资产分布图表特效源码.zip
js+html5实现canvas绘制椭圆形图案的方法.docx
canvas绘制动态心电图,和监护仪上的一样,可参考使用!
微信小程序canvas画布绘制矩形、椭(圆)、直线、文字
HTML5 canvas绘制流程图,无需flash,支持形状伸缩、编辑文字、拖拽、节点连线功能,类似visio。
ECG html canvas绘制心电图