ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词: ag旗舰厅官网,ag旗舰厅下载客户端

计算机网络

当前位置:ag旗舰厅官网 > 计算机网络 > canvas绘制超炫,html5石英钟实今世码

canvas绘制超炫,html5石英钟实今世码

来源:http://www.pedaLyourcycLe.com 作者:ag旗舰厅官网 时间:2019-11-26 12:23

点评:html5下实现的闹钟代码,喜欢的朋友可以参考下。

使用canvas绘制超炫时钟,canvas绘制超炫

这篇文章主要介绍了使用canvas绘制超炫时钟的方法及代码,非常的漂亮,这里推荐给大家

先上效果图:

图片 1

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas钟表</title>
<meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css">
body{margin:0;}
</style>
</head>
<body onload="run()">
<canvas id="canvas" width=400 height=400 style="border: 1px #ccc solid;">如果你看到这段文字,说明你的浏览器弱爆了!</canvas>
<script>
window.onload=draw;
function draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
context.save(); ///////////////////////////////////保存
context.translate(200,200);
var deg=2*Math.PI/12;
//////////////////////////////////////////////////表盘
context.save();
context.beginPath();
for(var i=0;i<13;i++){
var x=Math.sin(i*deg);
var y=-Math.cos(i*deg);
context.lineTo(x*150,y*150);
}
var c=context.createRadialGradient(0,0,0,0,0,130);
c.addColorStop(0,"#22f");
c.addColorStop(1,"#0ef")
context.fillStyle=c;
context.fill();
context.closePath();
context.restore();
//////////////////////////////////////////////////数字
context.save();
context.beginPath();
for(var i=1;i<13;i++){
var x1=Math.sin(i*deg);
var y1=-Math.cos(i*deg);
context.fillStyle="#fff";
context.font="bold 20px Calibri";
context.textAlign='center';
context.textBaseline='middle';
context.fillText(i,x1*120,y1*120);
}
context.closePath();
context.restore();
//////////////////////////////////////////////////大刻度
context.save();
context.beginPath();
for(var i=0;i<12;i++){
var x2=Math.sin(i*deg);
var y2=-Math.cos(i*deg);
context.moveTo(x2*148,y2*148);
context.lineTo(x2*135,y2*135);
}
context.strokeStyle='#fff';
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////////小刻度
context.save();
var deg1=2*Math.PI/60;
context.beginPath();
for(var i=0;i<60;i++){
var x2=Math.sin(i*deg1);
var y2=-Math.cos(i*deg1);
context.moveTo(x2*146,y2*146);
context.lineTo(x2*140,y2*140);
}
context.strokeStyle='#fff';
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
///////////////////////////////////////////////////文字
context.save();
context.strokeStyle="#fff";
context.font=' 34px sans-serif';
context.textAlign='center';
context.textBaseline='middle';
context.strokeText('canvas',0,65);
context.restore();
/////////////////////////////////////////////////new Date
var time=new Date();
var h=(time.getHours()%12)*2*Math.PI/12;
var m=time.getMinutes()*2*Math.PI/60;
var s=time.getSeconds()*2*Math.PI/60;</p> <p>////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
context.restore();/////////////////////////////栈出
setTimeout(draw, 1000);/////////////////////////////计时器</p> <p>}</p> <p></script>
</body>
</html>

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
canvas{position:absolute;top:0px;left:0px;}
</style>
<title>时钟</title>
</head>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<canvas id="p_canvas" width="200" height="200"></canvas>
<script type="text/javascript">
//获取绘图对象
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var p_canvas = document.getElementById('p_canvas');
var p_context = p_canvas.getContext('2d');

var height=200,width=200;
//画大圆
context.beginPath();
context.strokeStyle="#009999";
context.arc(width/2,height/2,width/2-1,0,Math.PI*2,true);
context.stroke();
context.closePath();
//画中间点
context.beginPath();
context.fillStyle="#000";
context.arc(width/2,height/2,3,0,Math.PI*2,true);
context.fill();
context.closePath();

//画小刻度
var angle = 0,radius = width/2 - 4;
for(var i=0;i<60;i++){
context.beginPath();
context.strokeStyle="#000";
//确认刻度的起始点
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
//这里是用来将刻度的另一点指向中心点,并给予正确的角度
//PI是180度,正确的角度就是 angle+180度,正好相反方向
var temp_angle = Math.PI +angle;
context.lineTo(x +3*Math.cos(temp_angle),y+3*Math.sin(temp_angle));
context.stroke();
context.closePath();
angle+=6/180*Math.PI;
}
//大刻度
angle = 0,radius = width/2 - 4;
context.textBaseline = 'middle';
context.textAlign = 'center';
context.lineWidth = 2;
for(var i=0;i<12;i++){
var num = i+3>12? i+3-12:i+3 ;
context.beginPath();
context.strokeStyle="#FFD700";
var x = width/2 + radius*Math.cos(angle),y = height/2 + radius*Math.sin(angle);
context.moveTo(x,y);
var temp_angle = Math.PI +angle;
context.lineTo(x +8*Math.cos(temp_angle),y+8*Math.sin(temp_angle));
context.stroke();
context.closePath();
//大刻度 文字
context.fillText(num,x+16*Math.cos(temp_angle),y+16*Math.sin(temp_angle));
angle+=30/180*Math.PI;
}

function Pointer(){
var p_type = [['#000',70,1],['#ccc',60,2],['red',50,3]];
function drwePointer(type,angle){
type = p_type[type];
angle = angle*Math.PI*2 - 90/180*Math.PI;
var length= type[1];
p_context.beginPath();
p_context.lineWidth = type[2];
p_context.strokeStyle = type[0];
p_context.moveTo(width/2,height/2);
p_context.lineTo(width/2 + length*Math.cos(angle),height/2 + length*Math.sin(angle));
p_context.stroke();
p_context.closePath();

}
setInterval(function (){
p_context.clearRect(0,0,height,width);
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
h = h>12?h-12:h;
h = h+m/60;
h=h/12;
m=m/60;
s=s/60;
drwePointer(0,s);
drwePointer(1,m);
drwePointer(2,h);
},500);
}
var p = new Pointer();
</script>
</body>
</html>

本文由ag旗舰厅官网发布于计算机网络,转载请注明出处:canvas绘制超炫,html5石英钟实今世码

关键词:

上一篇:视频播放

下一篇:没有了