快速时钟开始游戏4399html5,HTML5 简单页面实现时钟效果_一世红蓝的博客-程序员宅基地

技术标签: 快速时钟开始游戏4399html5  

界面显示:

0818b9ca8b590ca3270a3433284dd417.png

html代码:

Document : 时钟

Created on : 2016-5-19, 9:49:29

Author : Administrator

--%>

JSP Page

canvas{

border: 1px solid black;

}

(function(){

//cavas元素对象

var canvas=null;

//canvas的3d上下文

var ctx=null;

//cavan的尺寸

var cw=0;

var ch=0;

/**

* 页面导入时的事件处理

*/

window.addEventListener("load",function(){

canvas=document.getElementById("sample");

ctx=canvas.getContext("2d");

cw=parseInt(canvas.width);

ch=parseInt(canvas.height);

ctx.translate(cw/2, ch/2);

//绘制时钟

draw_watch();

},false);

/**

* 绘制时钟

*/

function draw_watch(){

//清空Canvas

ctx.clearRect(-cw/2,-ch/2,cw,ch);

//计算针的最大长度

var len=Math.min(cw, ch)/2;

//绘制刻度盘

var tlen=len*0.85;

ctx.font="14px 'Arial'";

ctx.fillStyle="black";

ctx.textAlign="center";

ctx.textBaseLine="middle";

for(var i=0; i<12; i++){

var tag1=Math.PI*2*(3-i)/12;

var tx=tlen * Math.cos(tag1);

var ty=-tlen * Math.sin(tag1);

ctx.fillText(i,tx,ty);

}

//获取当前的时分秒

var d=new Date();

var h=d.getHours();

var m=d.getMinutes();

var s=d.getSeconds();

if(h >12 ){

h=h-12;

}

//绘制时针

var angle1 = Math.PI * 2 *(3 - (h+ m/60))/12;

var length1=len * 0.5;

var width1=5;

var color1="#000000";

drawhand(angle1,length1,width1,color1);

//绘制分针

var angle2 = Math.PI * 2 *(15 - (m+ s/60))/60;

var length2=len * 0.7;

var width2=3;

var color2="#555555";

drawhand(angle2,length2,width2,color2);

//绘制秒针

var angle3 = Math.PI * 2 *(15 - s)/60;

var length3=len * 0.8;

var width3=1;

var color3="#aa0000";

drawhand(angle3,length3,width3,color3);

//设置timer

setTimeout(draw_watch,1000);

}

/**

* 针绘制函数

*/

function drawhand(angle,len,width,color){

//计算针端的坐标

var x=len*Math.cos(angle);

var y=-len * Math.sin(angle);

//绘制针

ctx.strokeStyle=color;

ctx.lineWidth=width;

ctx.lineCap="round";

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(x,y);

ctx.stroke();

}

})();

重点:fillText  drawhand 使用 及其中角度的计算

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_35213963/article/details/117759728

智能推荐

Java——模拟实现ArrayList和LinkedList类(一)_monologuezjp的博客-程序员宅基地

由于数组一旦定义,其长度就无法改变,某些情况下给我们的编程带来了不便。Java提供了两个集合——ArrayList类和LinkedList类,用来代替数组,有效解决了数组长度不能动态改变的问题。为了加深对数组和这两个集合类的理解,于是模拟这两个类实现了两个Box类,用来代替Array。为了方便,这里只实现了存储int类。模拟实现ArrayListArrayList 的好处是:可以动态增...

用Eclipse调试Node.js代码_赶路人儿的博客-程序员宅基地_eclipse调试js代码

1、在eclipse上安装v8插件: 1)Help>Install New Software ,在弹出的界面上点击Add,然后输入name和location两个信息,如下图:Name:随便取一个;location:http://chromedevtools.googlecode.com/svn/update/dev/注:安装的时候需要使用vpn,因为这里的地址是请求到了go

【考研高数-线性代数-强化】第四章 线性方程组(重点,别马虎大意)_刘鑫磊up的博客-程序员宅基地

【考研高数-线性代数-基础】第四章 线性方程组【重点】课本讲义:P82~P111一:网络结构网络图二:基本内容与重要结论1.基础知识2.主要定理三:典型例题1.基础解系2.解方程组Ax=b通用方程组求解: 1.已知方程组 同解变形(行变换)讨论参数 2.抽象方程组 秩、解的结构、推理分析一:齐次方程组Ax=0 n-r(A)线性无关的解向量、基础解系二:非齐次方程组Ax=b 有解判...

73.ORM聚合函数详解:Count_长大的小蚂蚁的博客-程序员宅基地

Count:用来求某个数据的个数。在以下所有的示例中所采用的模型为:from django.db import models# 定义作者模型class Author(models.Model): name = models.CharField(max_length=100, unique=True) age = models.IntegerField() ema...

ZUPT的相关初步理解_slam让我头疼的博客-程序员宅基地_zupt算法

参考至https://zhuanlan.zhihu.com/p/115529319零速修正(Zero Velocity Update, ZUPT)即,当载体处于静止状态时,载体此时的速度为零,利用载体中的惯性系统的解算速度作为系统速度误差的观测量,对其他误差量进行修正,改善静止状态下的组合导航结果,不需要增加外部传感器,因而是一种有效且廉价易实现的技术。零速修正一般方法利用卡尔曼滤波进行。当检测到载体处于静止状态时,利用SINS子系统解算的速度作为系统速度误差的观测量,进行卡尔曼滤波估计,利用更新后的

html5 css3d,HTML5/CSS3雀跃的3D字符串_weixin_39841572的博客-程序员宅基地

CSS语言:CSSSCSS确定html,body {width: 100%;height: 100%;background: #76b852;background: -webkit-linear-gradient(to left, #76b852, #8DC26F);background: -webkit-linear-gradient(right, #76b852, #8DC26F);backg...

随便推点

mysql zimbra_Zimbra 相关设置_爱家小厨酱的博客-程序员宅基地

zimbra 相关的一些设置,不定期更新。更换 Logo 图标和链接mkdir /opt/zimbra/jetty/webapps/zimbra/logos/zmprov mcf zimbraSkinLogoURL https://mail.exsvc.cnzmprov md exsvc.cn zimbraSkinLogoURL https://mail.exsvc.cnzmprov md exs...

提升 iOS 开发效率! Xcode 9 内置模拟器的9个技巧_weixin_34324081的博客-程序员宅基地

iOS模拟器是在开发任意iOS应用程序过程中不可或缺、无法被忽视的一个部分。值得一提的是,Xcode 9的新模拟器带来了很多有用的功能,能够提升你的开发效率。对比历代模拟器的更新,这次有了很重大的改变。所以让我们开始这篇教程的重点吧,本文会列出我在新iOS模拟器中发现的新功能(一些技巧也可以在旧的模拟器中使用)。1. 在全屏模式下使用Xcode模拟器当你使用13寸的 Mac 时,Xcode ...

MySQL 基础 ———— 视图的应用与总结_圣斗士Morty的博客-程序员宅基地

引言视图是一种虚拟表,和普通表的使用是一样的,视图的一大特点就是“临时性”,是通过表动态生成的数据,只保存SQL逻辑,不保存查询结果。视图在实际生产中主要有两种应用场景:1、多个地方用到同样的查询结果;2、该查询使用的SQL比较复杂。下面,我们来总结一下这个在开发中经常会用到的知识点。一、视图的优势首先,视图并不能提高SQL的性能,它的作用在于更好的组织数据。优势有以下...

Mirai实现QQ机器人_只是六号z的博客-程序员宅基地_mirai机器人

Mirai实现机器人Java实现QQ机器人教程1.拉取项目demo2.修改配置文件3.滑动窗口验证(1)配置JVM参数(2)启动项目(3)获取ticket①让手机和电脑连接②开启调试模式③进行滑动验证4.简单测试Java实现QQ机器人教程要想实现Java版的QQ机器人,其实并不难,今天就给大家分享一下使用Mirai框架制作简单的QQ机器人。1.拉取项目demo首先,Miari是一个开源的框架,我们可以从GitHub上拉取项目进行查看,但是GitHub需要使用加速插件才能很好的访问,所以在这里我们可以

在centOs 上搭建nginx来部署静态页面网站_weixin_34392435的博客-程序员宅基地

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

LibreOJ #2036. 「SHOI2015」自动刷题机_weixin_30302609的博客-程序员宅基地

#2036. 「SHOI2015」自动刷题机内存限制:256 MiB时间限制:1000 ms标准输入输出题目类型:传统评测方式:文本比较题目描述曾经发明了信号增幅仪的发明家 SHTSC 又公开了他的新发明:自动刷题机——一种可以自动 AC 题目的神秘装置。自动刷题机刷题的方式非常简单:首先会瞬间得出题目的正确做法,然后开始写程序。每秒,自动刷...