canvas闹钟

最新推荐文章于 2022-04-27 16:46:35 发布
最新推荐文章于 2022-04-27 16:46:35 发布
阅读量374 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xkdamowang/article/details/53038049
版权 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        canvas{
            background-color:#57baac;
        }
    </style>
</head>
<body>
    <canvas width="667px" height="881px" id="mycanvas"></canvas>


    <script type="text/javascript">
        var a=1;
        window.onload=function(){
            setInterval(drawClock,250);
        };

function drawClock(){
    var mycanvas=document.getElementById("mycanvas");
    var context=mycanvas.getContext("2d");

//清除画布
         context.clearRect(0,0,667,881);

//外层空心圆
         context.beginPath();
         context.arc(300,300,150,0,360*Math.PI/180);
         context.closePath();
         context.strokeStyle="#f26a4c";
         context.lineWidth=30;
         context.stroke();
//内层实心圆
         context.arc(300,300,120,0,360*Math.PI/180);
         context.fillStyle="white";
         context.fill();
//刻度
         context.save();
         context.translate(300,300);
         for(var i=0;i<60;i++){
             if(i%5==0){
                 context.beginPath();
                 context.moveTo(130,0);
                 context.lineTo(150,0);
                 context.rotate(6*Math.PI/180);
                 context.closePath();
                 context.lineWidth=7;
                 context.strokeStyle="#6a686a";
                 context.stroke();
             }else{
                 context.beginPath();
                 context.moveTo(140,0);
                 context.lineTo(150,0);
                 context.rotate(6*Math.PI/180);
                 context.closePath();
                 context.lineWidth=3;
                 context.strokeStyle="#acabac";
                 context.stroke();
             }
         }
         context.restore();

//圆心结
         context.beginPath();
         context.arc(300,300,15,0,360*Math.PI/180);
         context.closePath();
         context.fillStyle="#c04a0f";
         context.fill();
//秒针
         var date=new Date();
         var second=date.getSeconds();     //获取秒数
         context.save();
         context.translate(300,300);

         context.beginPath();
         context.rotate(6*second*Math.PI/180);
         context.moveTo(0,-120);
         context.lineTo(0,60);
         context.closePath();
         context.strokeStyle="#ad4614";
         context.lineWidth=2;
         context.stroke();
         context.restore();
//分针
         var minute=date.getMinutes();
         context.save();
         context.translate(300,300);
         context.beginPath();
         context.rotate((6*minute+second/10)*Math.PI/180);
         context.moveTo(0,-15);
         context.lineTo(0,-120);
         context.closePath();
         context.strokeStyle="#f5b564";
         context.lineWidth=10;
         context.lineCap=5;
         context.stroke();
         context.restore();
//小时
         var hour=date.getHours();
         context.save();
         context.translate(300,300);
         context.beginPath();
         context.rotate((second/3600+minute/60+hour)*30*Math.PI/180);
         context.moveTo(0,-15);
         context.lineTo(0,-80);
         context.closePath();
         context.strokeStyle="#f5b564";
         context.lineWidth=10;
         context.lineCap=5;
         context.stroke();
         context.restore();

//闹钟的两个脚
//    右脚
    context.save();
    context.translate(300,300);
    context.beginPath();
    context.rotate(63*Math.PI/180);
    context.moveTo(165,0);
    context.lineTo(200,0);
    context.closePath();
    context.strokeStyle="#877c84";
    context.lineWidth=20;
    context.lineCap=5;
    context.stroke();
    context.restore();
//左脚
    context.save();
    context.translate(300,300);
    context.beginPath();
    context.rotate(117*Math.PI/180);
    context.moveTo(165,0);
    context.lineTo(200,0);
    context.closePath();
    context.strokeStyle="#877c84";
    context.lineWidth=20;
    context.lineCap=5;
    context.stroke();
    context.restore();

//上半部分
//    圆环

    context.save();
    context.beginPath();
    context.arc(300,130,100,20*Math.PI/180,160*Math.PI/180,true);
//    context.closePath();
    context.strokeStyle="#867e86";
    context.lineWidth=12;
    context.stroke();
    context.restore();

//右边耳朵
    context.save();
    context.translate(300,300);
    context.beginPath();
    context.rotate((-60)*Math.PI/180);
    context.moveTo(180,0);
    context.lineTo(225,0);
    context.strokeStyle="#eb6d4e";
    context.lineWidth=118;
    context.stroke();
    context.restore();
//左边耳朵
    context.save();
    context.translate(300,300);
    context.beginPath();
    context.rotate((-120)*Math.PI/180);
    context.moveTo(180,0);
    context.lineTo(225,0);
    context.strokeStyle="#eb6d4e";
    context.lineWidth=118;
    context.stroke();
    context.restore();
//摆钟
    if(a==1){
        a=-1;
    }else{
        a=1;
    }
            context.save();
            console.log(a);
            context.translate(300,300);
            context.beginPath();
            context.rotate(a*8*Math.PI/180);
            context.moveTo(0,-165);
            context.lineTo(0,-185);
            context.closePath();
            context.strokeStyle="black";
            context.lineWidth=15;
            context.stroke();
            context.restore();
            context.save();
            context.translate(300,300);
            context.beginPath();
            context.rotate(a*8*Math.PI/180);
            context.arc(0,-195,15,0,360*Math.PI/180);
            context.closePath();
            context.fillStyle="black";
            context.fill();
            context.restore();
     }
    </script>
</body>
</html>

这里写图片描述

xkdamowang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现会动的闹钟
qq_41603606的博客
05-23 421
使用canvas实现闹钟Canvas标签初始化canvas标签要使用canvas实现闹钟功能只需要使用首先创建canvas标签设置初始化数值width='400',height='400'使用js获取到canvas标签选择2d打印，获得时间算出时间对应的度数因为canvas使用的弧线是从90°开始的，所以要实现闹钟0度为起始点，需要减去90°，以此类推而后将秒针刻度，分针刻度，时刻刻度都打印出来再...
Canvas时钟（纯js实现）
最新发布
09-29
canvas时钟，极其简单的一个纯网页时钟显示，没有框架，没有jQuery，仅仅使用canvas和原生js实现简单纯粹的闹钟。适合新手小白练习代码，也适合需要定制canvas时钟的场景可以参考本代码实现自己的需求。希望在这个...
canvas制作闹钟
wanan1215的博客
04-17 257
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
canvas绘制闹钟-方法1
weixin_34130269的博客
11-08 208
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas 实例之闹钟
weixin_42123213的博客
12-16 368
canvas实例闹钟 let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let x = canvas.width / 2, // y = canvas.height / 2; function draw() { ctx.translate(x, y); //将画布原点移到中心 默认画布原点在左上角 ctx.sav
android canvas 画闹钟 圆弧
u011324501的专栏
06-15 584
package com.example.hui; import java.util.ArrayList; import android.os.Bundle; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.C
使用canvas制作一个动态时钟
05-02
使用canvas实现动态时钟效果
HTML5 canvas超逼真的模拟时钟特效
12-12
除了HTML5 Canvas和jQuery，thooClock还涉及到音频处理，因为具备了定时闹钟功能。它包含了`alarm.ogg`和`alarm.mp3`两个音频文件，用于播放闹钟声音。在JavaScript中，可以使用HTML5的Audio API来控制音频的播放和...
Android自定义View 实现闹钟唤起播放闹钟铃声功能
01-05
先上图看一下闹钟唤期页面的效果 实现的功能： 1：转动的图片根据天气情况更换 2：转动时间可以设置，转动结束，闹铃声音就结束 3：光圈颜色渐变效果 直接上代码啦： package ...
HTML5闹钟代码
03-19
### HTML5闹钟代码知识点详解 #### 一、概述 ...本文档提供的闹钟代码不仅展示了HTML5 `<canvas>` 元素的强大功能，同时也涉及到了JavaScript的基础语法和一些数学原理的应用，非常适合初学者学习实践。
逼真的HTML5 canvas模拟时钟特效
08-18
thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。掩饰地址：http://www.jq22.com/jquery-info3928
html5动画基础（canvas,闹钟）
web前端技术交流分享
10-23 1785
#clock{background:#abcdef} 当前浏览器不支持canvas标签 var canvas=document.getElementById('clock'); //获取ID var cxt=canvas.getContext('2d'); function drawClock(){ cxt.clearRect(0,0,500,500); //清除画布
canvas示例 - 用canvas实现行走的闹钟
康一夏忙中偷闲的日子
01-07 138
完整js js/clock.js 获取绘图对象 表盘 表针 var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var p_canvas = document.getElementById('p_canvas'); var p_context = p_canvas.getCo...
HTML5 canvas时钟
daily886的博客
12-20 365
实现效果： html代码：        "Content-Type" content="text/html; charset=utf-8" />     Clock     "text/css">     *{         margin: 0;         padding: 0;     }     .canvas{         margin-left: 
Android 画布Canvas与画笔Paint （附带会动的钟表）
0729Liang
06-24 1200
一、Canvas绘制图形的直接对象1、两种绘制环境：（1）、使用普通View的canvas画图，（2）、使用专门的SurfaceView的canvas来画图。canvas主要是区别：第一种适合处理量比较小，帧率比较小的动画，比如说象棋游戏之类的；第二种主要用在游戏，高品质动画方面的画图。因为SurfaceView中定义一个专门的线程来完成画图工作，应用程序不需要等待View的刷图，提高了性能。Vi...
Android中使用Canvas绘制简单的图形(二) 进阶 绘制钟表
daweibalang717的专栏
06-29 2225
此文是http://blog.csdn.net/daweibalang717/article/details/51776446 的进阶版 通过上文可以学会简单的图形绘制，我们来进行一个钟表的绘制。 效果图： 布局文件： <RelativeLayout xmlns:android="http://schemas.android.com/a
Android canvas绘图基础之运动的时钟
哆啦A梦的博客
04-04 4268
一、canvas绘制图形canvas可以绘制很多几何图形、文本等很多东西： 1. drawText 2. drawPoint 3. drawLine 4. drawRect 5. drawCircle 6. drawOval 7. drawArc 8. drawPath 9. drawBitmap 关于绘图基础讲解这篇博客讲的非常细致，推荐大家可以去看一下， Android中C
canvas实现时钟特效
weixin_45665589的博客
04-27 1493
这两天在重读《JavaScript 高级程序设计第 4 版》，感觉有了一些新的认识和发现，收获还是挺多的。今天刚刚好阅读到动画和canvas这部分，书中给的一个小示例是一个闹钟 当时觉得挺有意思的，就想着自己着手也实现一个类似的特效（本来准备写论文的，前两天感冒了 ，有点不舒服，进度有点迟缓，不过这不影响写代码(▽)） 效果图 实现思路 闹钟的实现思路也比较容易，简单介绍一下思路。先创建一个大圆（闹钟的外层），闹钟的刻度是单个线条，实现单个线条也比较简单，主要就是moveTo和lineTo的使用，结合一
android时钟小程序,超详细，用canvas在微信小程序上画时钟教程
weixin_32297123的博客
05-26 549
Page({data: {width:0,height:0},onLoad:function(options) {var that = this//获取系统信息wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽高赋给页面的宽高success: function(res) {that.width=res.windowWidth//console.log(that.width) ...
深入探索HTML5 Canvas技术
第三章“Learning the Basics of Canvas”深入Canvas API，讲解如何在画布上绘制线条、形状、文本，以及如何设置颜色和样式。此外，还包括了坐标系统、路径绘制和图像绘制的基础知识。 第四章“Pushing Canvas ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值