文档章节

Canvas绘制时钟

忘川秋水
 忘川秋水
发布于 2015/07/28 13:22
字数 449
阅读 37
收藏 0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
canvas{ background:#eee;}
</style>
<script>
window.onload = function(){
    var can = document.getElementById('canvas');
    var ocan = can.getContext('2d');
    var cirx = 200;
    var ciry = 200;
    var radius =100;
    
    /*添加音频监听事件*/
    var audio = document.getElementById('audio');
    audio.ontimeupdate = function(){
        if(audio.currentTime>=0.1){
        audio.pause();
        }
    }
    setInterval(function(){
        ocan.clearRect(0,0,500,500);//清除画布
        
        audio.currentTime = 0;
        audio.play();
        
        /*阴影*/
        ocan.shadowColor = "#888";// 设置阴影颜色
        ocan.shadowOffsetX = 1;// 设置阴影形状水平距离
        ocan.shadowOffsetY = 1;// 设置阴影形状垂直距离
        ocan.shadowBlur = 3;// 设置阴影模糊值
        
        /*渐变色*/
        var ccan = ocan.createRadialGradient(cirx,ciry,1,cirx,ciry,100);// 创建环形渐变
        ccan.addColorStop(0,"#efefef");// 规定渐变对象中的颜色和停止位置
        ccan.addColorStop(1,"#cecece");
        ocan.fillStyle = ccan;// 设置填充颜色
        ocan.strokeStyle = ccan;//设置边框颜色
        ocan.lineWidth = 8;// 设置边框大小
        ocan.beginPath();// 起始一条路径
        ocan.arc(cirx,ciry,radius,0,2*Math.PI);// 创建一个圆形
        ocan.stroke();// 绘制已定义的路径
        ocan.fill();// 填充当前路径
        
        /*表盘绘制:1.去掉阴影 2.画刻度 3.画针*/
        ocan.shadowOffsetX = 0;
        ocan.shadowOffsetY = 0;
        ocan.shadowBlur = 0;
        ocan.strokeStyle = "#222";
        drawScale();//画刻度
        /*中心小圆*/
        ocan.beginPath();
        ocan.fillStyle = "#999";
        ocan.arc(cirx,ciry,4,0,2*Math.PI);
        ocan.stroke();
        ocan.fill();
        
        /*获取当前系统时间*/
        var date = new Date();
        var hou = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        
        var houAngle = 30*hou+6*min/12-90;
        drawNeedle(75,3,houAngle,"#888");//绘制时针
        
        var minAngle = 6*min-90;
        drawNeedle(95,3,minAngle,"#888");//绘制分针
        
        var secAngle = 6*sec-90;
        drawNeedle(95,1,secAngle,"red");//绘制秒针
    },1000);

    /*画针*/
    function  drawNeedle(length,width,angle,color){
        ocan.beginPath();
        ocan.lineWidth = width;
        ocan.strokeStyle = color;
        ocan.moveTo(cirx,ciry);
        ocan.lineTo(cirx+length*Math.cos(angle*Math.PI/180),cirx+length*Math.sin(angle*Math.PI/180));
        ocan.stroke();
    }

    /*绘制刻度*/
    function drawScale(){
        for(var i=0; i<60; i++){
            // 每一小刻度为6度,转换为弧度制
            var angle = i*6*Math.PI/180;
            var r = radius-2;
            var w = 1;
            if(i%5==0){
                r = radius-7;
                w = 3;
            }
            ocan.beginPath();
            ocan.lineWidth = w;
            ocan.moveTo(cirx+r*Math.cos(angle),ciry+r*Math.sin(angle));
            ocan.lineTo(cirx+radius*Math.cos(angle),ciry+radius*Math.sin(angle));
            ocan.stroke();
       }
    }
}
</script>
</head>
<body>
    <canvas id="canvas" width=500 height=500>
        您的浏览器out了
    </canvas>
    <audio src="1.wav" id="audio"></audio>
</body>
</html>

最终效果:

© 著作权归作者所有

上一篇: Canvas绘制转盘
下一篇: Canvas绘制转盘
忘川秋水
粉丝 0
博文 2
码字总数 799
作品 0
武汉
私信 提问
canvas制作主题可配置化,可拖拽时钟

最近学习了canvas之后,就用canvas制作了一个主题可配置化,可拖拽时钟。话不多说,直接看效果图: 具体的实现思路也很简单:首先绘制表盘,其次绘制时针分针秒针,然后获取时间进行渲染,最...

tiancai啊呆
2017/11/19
0
0
canvas中普通动效与粒子动效的实现

canvas用于在网页上绘制图像、动画,可以将其理解为画布,在这个画布上构建想要的效果。 canvas可以绘制动态效果,除了常用的规则动画之外,还可以采用粒子的概念来实现较复杂的动效,本文分...

薄荷前端
2018/12/29
0
0
Android自定义View:另一种实现手表指针转动的方法

在上一篇Android自定义View:如何实现一个模拟时钟?中我们实现了一款模拟时钟。在上一篇中,我们使用了Canvas中的canvas.rotate()方法让坐标系旋转从而绘制出指针。 但是,其实我们也可以使...

kinga22
2016/08/25
916
0
Python ——tkinter应用之时钟

  通常在电脑面前我们常常会关注的一个事物就是时钟,用tkinter模块中的画布组件也可以绘制出一个模拟的时钟。需要画出一个圆,时钟的秒针,分针和时针都是来自圆心的线,这些线指向我们的...

Python爱好者
2017/06/10
0
0
【canvas】js 绘制真实时钟

canvas绘制钟表 一、效果如图所示 二、详细设计过程 1. 分析 这个图形较为简单,使用的canvas api arc() 画圆 fillRect() 画矩形 fillText() 画字 2. 拆分 & 图层 图形虽简单,但由于涉及的图...

hans0000
07/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashMap源码分析

read

V丶zxw
31分钟前
4
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
49分钟前
5
0
【JS复习笔记】03 继承(从ES5到ES6)

本文转载于:专业的前端网站➫【JS复习笔记】03 继承(从ES5到ES6) 前言 很久以前学习《Javascript语言精粹》时,写过一个关于js的系列学习笔记。 最近又跟别人讲什么原型和继承什么的,发现...

前端老手
53分钟前
8
0
简单动态网站搭建

如何在windows服务器上配置wordPress和discuz 网站建设中的概念讲解 网站建设的基础操作 网站程序的基础使用 网站程序的优化 简单动态网站搭建 软件部署 域名和主机的购买 域名解析 环境部署...

达达前端小酒馆
今天
6
0
Java每日面试题_03

15、构造器是否可被override constructor(构造器)不能被继承,所以不能被override(重写),但是可以被overloading(重载)。 16、抽象类和接口的区别 抽象类是什么 含有abstract修饰符的class即...

庭前云落
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部