canvas绘制闹钟-方法2

78 阅读 0 评论 52 点赞

我是靠谱客的博主清脆机器猫，最近开发中收集的这篇文章主要介绍canvas绘制闹钟-方法2，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas</title>
<style>
#clock{border:1px solid #ccc}
</style>
</head>
<body>
<canvas id="clock" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
var canvas = document.querySelector("#clock");
var ctx = canvas.getContext("2d")
var canvasWidth = ctx.canvas.width;
var canvasHeight = ctx.canvas.height;
console.log(canvasWidth,canvasHeight)
var r = canvasWidth/2;
var rem = canvasWidth/200 //设置缩放时钟的比例
function drawBackground(){
ctx.save()
ctx.beginPath();
ctx.translate(r,r);
ctx.strokeStyle = "#257cc0";
ctx.lineWidth = 8*rem;
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,true) //true是逆时针
ctx.stroke() //一定要写，否则不知道是填充还是描边
//画数字1-12
var hoursNumbers =[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem + "px Arial";//除了大小一定要加字体类型
ctx.textAlign="center";
ctx.textBaseline="middle";
hoursNumbers.forEach(function(number,i){
var rad = 2*Math.PI/12*i
var x = Math.cos(rad)*(r-30*rem);
var y = Math.sin(rad)*(r-30*rem);
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-16*rem);
var y = Math.sin(rad)*(r-16*rem);
ctx.beginPath()
if(i%5==0){
ctx.fillStyle="#333"
}else{
ctx.fillStyle="#999"
}
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
ctx.fill()
}
}
function drawHour(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 = 6*rem;
ctx.lineCap ="round";
ctx.moveTo(0,10*rem);
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.lineWidth = 4*rem;
ctx.lineCap ="round";
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+40*rem)
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle="orange";
var rad = 2*Math.PI/60*second;
ctx.rotate(rad)
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem)
ctx.lineTo(-1,-r+18*rem);
ctx.fill()
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle="#fff";
ctx.arc(0,0,4*rem,0,2*Math.PI,false);
ctx.fill();
}
function draw(){
ctx.clearRect(0,0,canvasWidth,canvasHeight)
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
window.requestAnimationFrame(draw)
}
draw();
//setInterval(draw,1000);
</script>
</html>

drawBackground()里面的ctx.save() 为什么不能放到上面的原因：一般ctx.save() 与ctx.restore()是成对出现的。ctx.save() 的作用是保存状态，ctx.restore()指弹出保存的状态来使用，如果此函数中没有ctx.save()，则在draw()中执行ctx.restore(); 就没有意义，因为没有已经保存的状态，导致绘图有问题。

转载于:https://my.oschina.net/u/2612473/blog/2875074