HTML5 Canvas 绘制二十四字真言钟表
代码:
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>钟表</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="400px" height="400px" style="border:1px dashed black;">
出现文字表示你的浏览器不支持HTML5
</canvas>
</body>
</html>
<script type="text/javascript">
<!--
function draw(){
var canvas=document.getElementById('myCanvus');
canvas.width=400;
canvas.height=400;
context=canvas.getContext('2d');
context.translate(200,200);
clock=new Clock(200);
clock.init();
animate();
};
var context;
var clock;
function animate(){
context.clearRect(-200,-200,400,400);// 清屏
clock.paintBg(context);
clock.paintScale(context);
clock.paintPointers(context);
if(true){
// 让浏览器自行决定帧速率
window.requestAnimationFrame(animate);
}
}
// 钟表类
function Clock(radius){
this.radius=radius;
this.img;
this.init=function(){
this.img=new Image();
this.img.src="bg.jpg";
}
// 画背景
this.paintBg=function(ctx){
ctx.drawImage(this.img,0,0,400,400,-200,-200,400,400);
};
// 画刻度
this.paintScale=function(ctx){
var arr=["富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"];
var offset=16;
ctx.save();
ctx.rotate(getRad(-94.5));
for(var i=0;i<60;i++){
var degree=i*6;
var x=(this.radius-offset)*Math.cos(getRad(degree));
var y=(this.radius-offset)*Math.sin(getRad(degree));
if((i % 5)==0){
ctx.save();
var x1=(this.radius-20)*Math.cos(getRad(degree));
var y1=(this.radius-20)*Math.sin(getRad(degree));
ctx.translate(x1,y1);
ctx.rotate(getRad(degree+96));
ctx.font="bold 16px 宋体";
ctx.fillStyle=getColor(i/5);
ctx.fillText(arr[i/5],0,0);
ctx.restore();
}
}
ctx.restore();
};
// 画指针
this.paintPointers=function(ctx){
var date = new Date();
var hour=date.getHours();
var minute=date.getMinutes();
var second=date.getSeconds();
ctx.font="bold 12px 宋体";
ctx.fillStyle="navy";
ctx.fillText(hour+":"+minute+":"+second,-20,-120);
var angleS=second*6;
var angleM=minute*6;
var angleH=hour*30+angleM/360*30;
context.save();
context.rotate(getRad(-90));
var x,y;
context.lineWidth=0.5;
x=(this.radius-2)*Math.cos(getRad(angleS));
y=(this.radius-2)*Math.sin(getRad(angleS));
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.moveTo(-x/3, -y/3);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.lineWidth=1.5;
x=(this.radius-8)*Math.cos(getRad(angleM));
y=(this.radius-8)*Math.sin(getRad(angleM));
ctx.strokeStyle = "yellow";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.lineWidth=2;
x=(this.radius-25)*Math.cos(getRad(angleH));
y=(this.radius-25)*Math.sin(getRad(angleH));
ctx.strokeStyle = "maroon";
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.restore();
ctx.fillStyle="black";
ctx.arc(0,0,2.5,0,Math.PI*2,false);
ctx.fill();
};
}
// 常规函数:角度得到弧度
function getRad(degree){
return degree/180*Math.PI;
}
// 常规函数:得到颜色
function getColor(index){
if(index==0){
return "green";
}else if(index==1){
return "silver";
}else if(index==2){
return "lime";
}else if(index==3){
return "gray";
}else if(index==4){
return "white";
}else if(index==5){
return "yellow";
}else if(index==6){
return "maroon";
}else if(index==7){
return "navy";
}else if(index==8){
return "red";
}else if(index==9){
return "blue";
}else if(index==10){
return "purple";
}else if(index==11){
return "teal";
}else if(index==12){
return "fuchsia";
}else if(index==13){
return "aqua";
}else if(index==14){
return "black";
}
}
//-->
</script>
代码下载：
https://files.cnblogs.com/files/xiandedanteng/clock20170926.rar
HTML5 Canvas 绘制二十四字真言钟表的更多相关文章
- html5 canvas绘制环形进度条，环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用html5 canvas绘制图片
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- 使用html5 canvas绘制圆形或弧线
注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 解决html5 canvas 绘制字体、图片与图形模糊问题
html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
随机推荐
- python数据类型-----列表
今天来总结下python3.4版本列表的一些操作方法. 列表(list): 1.列表就像一个线性容器,但是比C++的 lis t扩展多得多,列表里的元素可以是相同类型,也可以包含各种类型,比如列表里嵌 ...
- Centos 7.2 双网卡绑定之踩坑
线上服务器,安装centos7.2 x64最小化安装,需要做链路聚合,双网卡绑定.在centos 6.x 和 centos 7上测试都OK,于是直接开搞. 说明下,以下环境是在虚拟机中实现的: 系统: ...
- 【 Linux 】Keepalived实现双主模型高可用集群
要求: 1. 两台web服务器安装wordpress,数据库通过nfs共享 2. 使用keepalived实现双主模型 环境: 主机: 系统:CentOS6.7 x64 ...
- 《Java编程思想》笔记 第十四章 类型信息
1.RTTI:在运行时识别一个对象类型 JAVA在运行时 有时要 识别对象和类的信息这个机制叫RTTI.Java提供了两种机制去做这件事.传统的RTTI 和 反射. 传统的RTTI 假定编译时就已经 ...
- GUI界面------tkinter
import tkinter as tk class APP: def __init__(self,master): frame = tk.Frame(master) frame.pack(side ...
- Selenium2+python自动化44-元素定位参数化（find_element）【转载】
前言 元素定位有八种方法,这个能看到这一篇的小伙伴都知道了,那么有没有一种方法,可以把八种定位合为一种呢?也就是把定位的方式参数化,如id,name.css等设置为一个参数,这样只需维护定位方式的参数 ...
- 怎么将string list 转成有特殊字符分开字符串
https://stackoverflow.com/questions/4021851/join-string-list-elements-with-a-delimiter-in-one-step Y ...
- opencv3.0 legacy和nonfree丢失
根据官方http://docs.opencv.org/3.1.0/db/dfa/tutorial_transition_guide.html链接可以知道 legacy和nofree模块已经被删除了
- （五）agentd端cpu的触发器配置
配置===>模板===>选择对应的模板===> 这里我验证触发器是否有效,定义的触发器的值超过0.01就出发报警,这里我做的是最新的T值超过0.01就触发触发器 验证,说明触发器触发 ...
- 计蒜客 30999.Sum-筛无平方因数的数 (ACM-ICPC 2018 南京赛区网络预赛 J)
J. Sum 26.87% 1000ms 512000K A square-free integer is an integer which is indivisible by any squar ...