Canvas 时钟小案例

约定不等于承诺〃 2022-06-10 08:37 259阅读 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 条评论，259人围观）

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

相关阅读

相关 Canvas 动画时钟

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

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

相关微信小程序入门案例——绘制时钟

微信小程序入门案例——绘制时钟 > 涉及内容：canvas、每秒刷新页面、绘制 > 目录结构: > > ![watermark_type_ZmFuZ3poZW

男娘i/ 2022年12月14日 06:20/ 0 赞/ 371 阅读

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

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

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

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

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

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

相关 Canvas 时钟小案例

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

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

相关 Canvas--粒子时钟

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

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

相关 js时钟案例

> 之前觉得利用js来实现时钟功能是一件特别优秀的事，现在，我发现它不仅优秀而且可以练习代码，难度适中。总体思想：时钟的针及表框为图片；各种针的转动为css样式；利用da

悠悠/ 2022年03月25日 06:08/ 0 赞/ 320 阅读

相关 h5 Canvas时钟制作

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

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

相关 canvas画时钟

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

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

相关 Canvas学习-时钟绘制

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

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