canvas绘制圆形钟表
【前言】
分享个特效,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);
.
相关推荐
jinxiutong 2020-07-26
northwindx 2020-05-31
jinxiutong 2020-05-10
zrtlin 2020-11-09
xuebingnan 2020-11-05
wikiwater 2020-10-27
heheeheh 2020-10-19
Crazyshark 2020-09-15
softwear 2020-08-21
ZGCdemo 2020-08-16
jczwilliam 2020-08-16
littleFatty 2020-08-16
idning 2020-08-03
lanzhusiyu 2020-07-19
Skyline 2020-07-04
xiaofanguan 2020-06-25