全国咨询热线:18720358503

五个小程序赚钱_canvas 绘制圆形时钟

类别:企业动态 发布时间:2021-01-12 浏览人次:

canvas 绘制圆形时钟       本文主要分享了利用canvas如何绘制圆形时钟的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧

效果如下:

代码如下:

 !DOCTYPE html 
 html 
 head 
 meta name="viewport" content="width=device-width,initial-scale=1"/ 
 title canvas clock /title 
 style type="text/css" 
 div{
 text-align: center;
 margin-top: 250px;
 #clock{
 border: 1px solid #ccc;
 /style 
 /head 
 body 
 div 
 canvas id="clock" height="200px" width="200px" /canvas 
 /div 
 script type="text/javascript" 
 var dom=document.getElementById("clock");
 var ctx=dom.getContext("2d");
var width=ctx.canvas.width;
var heigth=ctx.canvas.height;
var r=width/2;
//描绘时分秒小数和小数点
function drawBackground(){
 ctx.save();
 ctx.translate(r,r); //中心原点位置
 ctx.beginPath(); //起始位置
 ctx.lineWidth=10;
 ctx.arc(0,0,r-5,0,2*Math.PI,false);
 ctx.stroke();
 var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
 ctx.font="18px Arial";
 ctx.textAlign="center";
 ctx.textBaseline="middle";
 hourNumbers.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 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.fill ;
 ctx.arc(x,y,2,2*Math.PI,false);
 }else{
 ctx.fill ;
 ctx.arc(x,y,2,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;
 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.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();
 ctx.fill ;
 var rad=2*Math.PI/60*second;
 ctx.rotate(rad);
 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.fill ;
 ctx.arc(0,0,3,0,2*Math.PI,false);
 ctx.fill();
function draw(){
 ctx.clearRect(0,0,width,heigth);
 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();
draw();
setInterval(draw,1000)
 /script 
 /body 
 /html 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!


下一篇:没有了

推荐阅读

五个小程序赚钱_canvas 绘制圆形时钟

canvas 绘图圆形数字时钟 文中关键共享了运用canvas怎样绘图圆形数字时钟的实例编码,具备非常好的参照使用价值,下边跟随网编一起來看看吧实际效果以下:编码以下:!DOCTYPE ...

2021-01-12
论新闻营销对企业宣传推广的作用

新闻报道营销推广(推广软文营销推广)——应用新闻报道为公司做营销推广宣传策划的一种营销推广方法。新闻报道营销推广在营销推广主题活动中综合性应用新闻报道报导等散播方式...

2021-01-12
当今行业网站赢利机会点在哪里?

做好制造行业网站对一个公司的商品的营销推广是相当关键的。要根据网站盈利就务必搞好下列几个方面!一:检索模块互联网信息内容的澎涨,决策了检索模块必定变成大家获得信息...

2021-01-12
电商网站设计要注意这几点

电子商务网站制作关键点伴随着大家日常生活方法的变化,电子器件商务接待在社会发展零售中常占的占比逐渐升高,电子商务网站变成公司和小商家及其网站站长人群关心的网络热点...

2021-01-12
深圳抖音微信小程序_Ajax完成不改写取最新商品

Ajax完成不更新取全新产品 文中关键详细介绍了Ajax 完成不更新取全新产品的方式。具备非常好的参照使用价值,下边跟随网编一起來看看吧$conn = mysql_connect('localhost','root','123456'...

2021-01-12
微信小程序大热门_在 Angular 中完成查找要害字高

在 Angular 中完成检索重要字高亮度实例 ,lonelyBurning 在 Angular 中,大家不可该尝试立即改动 DOM 的內容,当必须升级 DOM 內容的情况下,应当改动的实际上就是我们的数据信息实体模...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信