利用canvas实现钟表效果

今天学习了基础的canvas，发现canvas很有意思，具体的知识点先不总结，等我学完了一起总结，先上一个自己写的小实例，嗯、直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>钟表效果</title><style>body{background:black;}#c1{background:white; border-radius:50%;}</style>
</head>
<body>
<canvas id="c1" width="400" height="400"><span>该浏览器不支持canvas</span>
</canvas>
<script>var oC = document.getElementById('c1');var oGc = oC.getContext('2d');var x = 200;var y = 200;var r = 150;clock();setInterval(clock,1000);
function clock(){oGc.clearRect(0,0,oC.width,oC.height);//清楚画布中的内容var oDate = new Date();var oHour =( -90+oDate.getHours()*30+oDate.getMinutes()/2)*Math.PI/180;var oMin =( -90+oDate.getMinutes()*6)*Math.PI/180;var oSec = (-90+oDate.getSeconds()*6)*Math.PI/180;//获取弧度数oGc.beginPath();for(var i=0; i<60; i++){//画短线oGc.moveTo(x,y);oGc.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);}oGc.closePath();oGc.stroke();oGc.fillStyle = "white";//用白色填充的圆覆盖大圆的线条oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*19/20,0,360,false);oGc.closePath();oGc.fill();oGc.beginPath();for(var i=0; i<12; i++){//长一点的线oGc.moveTo(x,y);oGc.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);}oGc.closePath();oGc.stroke();oGc.fillStyle = "white";//用上面同样的方法覆盖oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*18/20,0,360,false);oGc.closePath();oGc.fill();oGc.lineWidth = 4;oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*8/20,oHour,oHour,false);//时针oGc.closePath();oGc.stroke();oGc.lineWidth = 2;oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*12/20,oMin,oMin,false);//分针oGc.closePath();oGc.stroke();oGc.save();//用save()和restore()方法，防止第二次时所有线条都变为红色的oGc.lineWidth = 1;oGc.strokeStyle = "red";oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*14/20,oSec,oSec,false);//秒针oGc.closePath();oGc.stroke();oGc.restore();oGc.lineWidth = 1;oGc.fillStyle = "black";oGc.beginPath();oGc.moveTo(x,y);oGc.arc(x,y,r*2/50,0,360,false);oGc.closePath();oGc.fill();}</script>
</body>
</html>

利用canvas实现钟表效果相关推荐

canvas js 实现钟表效果
canvas 实现钟表效果注意浏览器兼容问题代码如下 <!DOCTYPE html> <html lang="en"><head><m ...
canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
利用canvas绘制的拓扑动画效果
展示效果网址 reloadimage(callback){let imgArrs = [];this.imgArray.forEach((img,index,arrs)=>{imgArrs[in ...
在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前你需要了解一下方法的使用: beginPath() closePath() moveTo() lineTo() fill() stroke() fillRect() clearRect() ...
Android自定义sleep图,android自定义view实现钟表效果
本文实例为大家分享了android view实现钟表的具体代码,供大家参考,具体内容如下先看效果图: 自定义view大家肯定已经不陌生了,所以直接今天直接步入正题:如何利用canvas去绘制出一个钟 ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆发布时间:2021-07-08 16:32:10 来源:亿速云阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
小程序利用canvas 绘制图案（生成海报，生成有特色的头像）
小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

利用canvas实现钟表效果

利用canvas实现钟表效果相关推荐

最新文章

热门文章