HTML5 Canvas 画钟表

画钟表是2D画图的老生常谈，我也不能免俗弄了一个。代码如下：

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>钟表</title></head><body onload="draw()"><canvas id="myCanvus" width="200px" height="200px" style="border:1px dashed black;">出现文字表示你的浏览器不支持HTML5</canvas></body>
</html>
<script type="text/javascript">
<!--
function draw(){var canvas=document.getElementById('myCanvus');    canvas.width=200;canvas.height=200;    context=canvas.getContext('2d');    context.translate(100,100);clock=new Clock(100);    clock.init();animate();
};var context;
var clock;function animate(){    context.clearRect(-100,-100,200,200);// 清屏
        clock.paintBg(context);clock.paintScale(context);clock.paintNumbers(context);clock.paintPointers(context);if(true){// 让浏览器自行决定帧速率
        window.requestAnimationFrame(animate);}
}// 钟表类
function Clock(radius){this.radius=radius;this.img;this.init=function(){this.img=new Image();this.img.src="clock7.jpg";}// 画背景this.paintBg=function(ctx){ctx.drawImage(this.img,66,50,880,880,-100,-100,200,200);};// 画刻度this.paintScale=function(ctx){for(var i=0;i<60;i++){var degree=i*6;var x=this.radius*Math.cos(getRad(degree));var y=this.radius*Math.sin(getRad(degree));ctx.strokeStyle = "black";ctx.fillStyle="black";ctx.beginPath();if((i % 5)==0){ctx.arc(x,y,1.5,0,Math.PI*2,false);}else{//ctx.arc(x,y,0.5,0,Math.PI*2,false);
            }            ctx.closePath();ctx.fill();}};// 画数字this.paintNumbers=function(ctx){ctx.font="bold 16px 宋体";ctx.fillStyle="Red";        ctx.fillText("XII",-12,-80);ctx.fillText("VI",-8,93);ctx.fillText("IX",-94,5);ctx.fillText("III",68,5);};// 画指针this.paintPointers=function(ctx){var date = new Date();var hour=date.getHours();var minute=date.getMinutes();var second=date.getSeconds();ctx.font="bold 6px 宋体";ctx.fillStyle="navy";ctx.fillText(hour+":"+minute+":"+second,12,-50);var angleS=second*6;var angleM=minute*6;var angleH=hour*30+angleM/360*30;
context.save();context.rotate(getRad(-90));var x,y;context.lineWidth=0.5;x=(this.radius-2)*Math.cos(getRad(angleS));y=(this.radius-2)*Math.sin(getRad(angleS));ctx.strokeStyle = "black";ctx.beginPath();ctx.moveTo(-x/3, -y/3);ctx.lineTo(x,y);ctx.stroke();ctx.closePath();context.lineWidth=1.5;x=(this.radius-8)*Math.cos(getRad(angleM));y=(this.radius-8)*Math.sin(getRad(angleM));ctx.strokeStyle = "yellow";ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(x,y);ctx.stroke();ctx.closePath();context.lineWidth=2;x=(this.radius-25)*Math.cos(getRad(angleH));y=(this.radius-25)*Math.sin(getRad(angleH));ctx.strokeStyle = "maroon";ctx.beginPath();ctx.moveTo(0, 0);ctx.lineTo(x,y);ctx.stroke();ctx.closePath();context.restore();ctx.fillStyle="black";ctx.arc(0,0,2.5,0,Math.PI*2,false);ctx.fill();};
}//  常规函数:角度得到弧度
function getRad(degree){return degree/180*Math.PI;
}//  常规函数:得到颜色
function getColor(index){if(index==0){return "green";}else if(index==1){return "silver";}else if(index==2){return "lime";}else if(index==3){return "gray";}else if(index==4){return "white";}else if(index==5){return "yellow";}else if(index==6){return "maroon";}else if(index==7){return "navy";}else if(index==8){return "red";}else if(index==9){return "blue";}else if(index==10){return "purple";}else if(index==11){return "teal";}else if(index==12){return "fuchsia";}else if(index==13){return "aqua";}else if(index==14){return "black";}
}//-->
</script>

完整代码从这里下载：https://files.cnblogs.com/files/xiandedanteng/clock.rar

HTML5 Canvas 画钟表相关推荐

html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...
html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
毛边效果 html,Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html画布直线代码,图文详解如何用html5 canvas画一条直线
是HTML5 中新增的元素,它可以结合JavaScript脚本绘制出各种各样的图形,对于canvas你了解多少?你会用canvas画直线吗?这篇文章就和大家讲讲如何用canvas画一条直线,有一定的参 ...
毛边效果 html,详解Html5 Canvas画线有毛边解决方法
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按 ...
Html5 Canvas画线有毛边解决方法
例外参考:http://jo2.org/html5-canvas%E7%94%BB%E5%9B%BE3%EF%BC%9A1px%E7%BA%BF%E6%9D%A1%E6%A8%A1%E7%B3%8A% ...
html 圆饼画布,html5 canvas画饼
2. [文件] lqdpie.html ~ 801B 下载(7) 刘强东吃饼 Your browser does not support the HTML5 canvas tag. var ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
html5 canvas画粗线时座标指定注意事项
画粗线时,座标不能定位在画布边界上,就是0或者width或者height.这是因为canvas画线粗线时是以你给定座标值为中心向两侧绘制,如果把座标定位到画布边界上,那么画出来的线就只有你给定粗细值的 ...

HTML5 Canvas 画钟表

HTML5 Canvas 画钟表相关推荐

最新文章

热门文章