Canvas 时钟小案例

约定不等于承诺〃 2022-06-10 08:37 284阅读 0赞

# 本人属于入门水平大神   创意改变生活 #

![Center][]

[点此查看][Link 1]

代码部分

(function () {
       function Clock(supeurview) {
         var canvas=document.createElement("canvas");
         this.ctx=canvas.getContext("2d");
         supeurview.appendChild(canvas);
         canvas.width=500;
         canvas.height=500;
         canvas.style.cssText="background:white;";
         this.ctx.clearRect(0,0,500,500);
    
       }
       Clock.prototype.bg=function () {
    
    
           this.ctx.restore();
           this.ctx.save();
           this.ctx.clearRect(0,0,500,500);
    
    
           var img=new Image();
           img.src="clock.png";
           //img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh this.ctx.drawImage(img,0,0,500,481,0,0,500,481);
       };
       Clock.prototype.shizhen=function () {
           // this.ctx.clearRect(0,0,500,500); var date=new Date();
    
    
          var du=Math.PI*2/60;
           this.ctx.translate(255,210);
           this.ctx.rotate(Math.PI+du*date.getSeconds());
    
          var shizhen= this.ctx.fillRect(-2.5,0,5,80);
             this.ctx.restore();
             this.ctx.save();
           this.ctx.translate(255,210);
    
           this.ctx.rotate(Math.PI+date.getMinutes()*du+du*date.getSeconds()/60);
    
          this.ctx.fillRect(-2.5,0,5,70);
           this.ctx.restore();
           this.ctx.save();
           this.ctx.translate(255,210);
           if(date.getHours()<=12){
               var hour=date.getHours();
           }
           else {
               hour=date.getHours()-12;
    
           }
           var du2=Math.PI*2/12;
    
           this.ctx.rotate(Math.PI+hour*du2+date.getMinutes()*du/60/12+du*date.getSeconds()/60/60/12);
    
           this.ctx.fillRect(-2.5,0,5,50);
           console.log(date.getSeconds());
           // this.ctx.translate(0,0); }
    
       window.Clock=Clock;
        var clock=new Clock(document.body);
        setInterval(function () {
    
    
            clock.bg();
            clock.shizhen();
        },1000);
    
    })();

[Center]: /images/20220610/202271a57eb645b995126cc924f224b8.png
[Link 1]: https://hanjixin.github.io/hanjixin/clock/index.html

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas 动画时钟

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" />

川长思鸟来/ 2023年10月06日 19:34/ 0 赞/ 75 阅读

相关利用canvas写七彩时钟！

利用canvas写七彩时钟！ 1、题目 > （1）、拿到一个时钟案例要求在页面上画出一个时钟，获取当前电脑的系统时间？（样式不限利用h5实现） 2、思路 >

快来打我*/ 2023年01月22日 07:00/ 0 赞/ 20 阅读

相关微信小程序——模拟时钟案例

文章目录案例效果图前导知识：canvas 代码部分案例效果图实时更新，因为我当时是六点多 ![在这里插入图片描

╰+哭是因爲堅強的太久メ/ 2022年11月16日 01:37/ 0 赞/ 392 阅读

相关 Canvas 学习（时钟绘图板）

canvas画圆为什么需要用canvas，如果用`onmousemove`，每一次移动都会进行DOM重绘，非常消耗性能，这时我们需要看一下 canvas

怼烎@/ 2022年10月15日 04:00/ 0 赞/ 238 阅读

相关 Canvas 时钟小案例

本人属于入门水平大神创意改变生活 ![Center][] [点此查看][Link 1] 代码部分 (function () { f

约定不等于承诺〃/ 2022年06月10日 08:37/ 0 赞/ 285 阅读

相关 Canvas--粒子时钟

digit.js digit = [ [ [0,0,1,1,1,0,0],

àì夳堔傛蜴生んèń/ 2022年05月31日 05:26/ 0 赞/ 277 阅读

相关 h5 Canvas时钟制作

canvas可以说是html5中最强大的元素之一下面我们就使用canvas来进行绘制一个时钟在绘制之前,我们需要知道需要绘制的元素都有哪些,其中包括钟最外边的圆圈、钟表上

待我称王封你为后i/ 2022年03月17日 15:43/ 0 赞/ 448 阅读

相关 canvas实现时钟小球掉落效果和倒计时效果

这个也是慕课网学的，挺好玩的，也是canvas实现的2d小球效果，可以把其中的代码注释一下就可以变为倒计时效果。 index.html <!DOCTYPE htm

逃离我推掉我的手/ 2022年03月17日 05:17/ 0 赞/ 269 阅读

相关 canvas画时钟

![70][] 效果如上，可以获取当前时间显示，秒针可以动．１．文件结构： ![70 1][] ２．html: <!DOCTYPE html>

忘是亡心i/ 2021年10月09日 04:18/ 0 赞/ 564 阅读

相关 Canvas学习-时钟绘制

Canvas学习-时钟绘制 1. 绘制时钟外边框创建画布 <div class="container"> <canvas

朱雀/ 2021年08月02日 12:08/ 0 赞/ 527 阅读