[Canvas]新版箴言钟表
动态效果点此下载用浏览器打开观看。
本作Github地址：https://github.com/horn19782016/12MaximClock
图例：
代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>钟表 2019年3月4日19点30分 by:逆火狂飙 horn19782016@163.com</title>
</head>
<body onload="draw()">
<canvas id="myCanvus" width="400px" height="400px" style="border:0px 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);
ctx.fillStyle="red";
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var BL = width / 200;
var r=this.radius;
ctx.save();//保存一下最开始时钟的环境
ctx.beginPath();
ctx.lineWidth = 13.8 * BL;//线要 乘上 比例
ctx.arc(0, 0, r - ctx.lineWidth / 2, 2 * Math.PI, false);//乘上比例
ctx.strokeStyle = "#000080";
ctx.stroke();
ctx.fillStyle="white";
var hourNumber = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
ctx.font = 18 * BL + 'px Arial';//字体也有乘比例 字符串拼接
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumber.forEach(function (number, i) {
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) * (r - 30 * BL);
var y = Math.sin(rad) * (r - 30 * BL);
ctx.fillText(number, x, y);
});
for (var i = 0; i < 60; i++) {
var rad = 2 * Math.PI / 60 * i;
var x = Math.cos(rad) * (r - 18 * BL);
var y = Math.sin(rad) * (r - 18 * BL);
ctx.beginPath();
if (i % 5 == 0) {
ctx.fillStyle = '#800080';
ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);
} else {
ctx.fillStyle = '#c0c0c0';
ctx.arc(x, y, 2 * BL, 0, 2 * Math.PI, false);
}
ctx.fill();
}
ctx.restore();
};
// 画汉字
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='white';
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="white";
ctx.fillText(hour+":"+minute+":"+second,-20,-100);
var angleS=second*6;
var angleM=minute*6;
var angleH=hour*30+angleM/360*30;
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var BL = width / 200;
context.save();
context.rotate(getRad(-90));
var x,y;
// 画时针
x=(this.radius-60)*Math.cos(getRad(angleH));
y=(this.radius-60)*Math.sin(getRad(angleH));
ctx.strokeStyle = "white";
ctx.lineWidth = 3 * BL;//定义指针的宽
ctx.lineCap = 'round';//指针顶部为弧
ctx.beginPath();
ctx.moveTo(-x/8, -y/8);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
// 画分针
x=(this.radius-45)*Math.cos(getRad(angleM));
y=(this.radius-45)*Math.sin(getRad(angleM));
ctx.strokeStyle = "white";
ctx.lineWidth = 2 * BL;//定义指针的宽
ctx.lineCap = 'round';//指针顶部为弧
ctx.beginPath();
ctx.moveTo(-x/8, -y/8);
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
context.restore();
// 画秒针
ctx.save();
ctx.lineWidth=0.5;
ctx.strokeStyle = "black";
ctx.beginPath();
var r=this.radius;
ctx.rotate(getRad(angleS));
ctx.moveTo(-2 * BL, 20 * BL);//画出一个秒针 x轴-2 y轴20
ctx.lineTo(2 * BL, 20 * BL);
ctx.lineTo(1, -r + 18 * BL);
ctx.lineTo(-1, -r + 18 * BL);
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
};
}
// 常规函数:角度得到弧度
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>
2019年3月4日19点36分
[Canvas]新版箴言钟表的更多相关文章
- canvas 之 - 精灵 钟表动画
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 分别用canvas和css3的transform做出钟表的效果
两种方式实际上在js上的原理都是一样的.都是获取时间对象,再获取时间对象的时分秒,时分秒乘以其旋转一刻度(一秒.一分.一小时)对应的角度.css3中要赋值于transform:rotate(角度),c ...
- canvas石英钟
canvas石英钟:demo <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
- 基础canvas应用-钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表
制作一个画画板,有清屏有橡皮擦有画笔可以换颜色 style样式 <head> <meta charset="UTF-8"> <title>画画板 ...
- Canvas基础——钟表绘制
首先,canvas语法基础薄弱的小伙伴请点这里,剩下的小伙伴们可以接着往下看了. 一个表,需要画什么出来呢:3条线(时分秒针),1个圆(表盘),以及60条短线/点(刻度). 嗯,没毛病. 那接下来让我 ...
- HTML5 Canvas 绘制二十四字真言钟表
代码: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type ...
- HTML5 Canvas 画钟表
画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...
随机推荐
- .yaml 文件格式简介
命名 YAML 的意思其实是:"Yet Another Markup Language"(仍是一种置标语言)的缩写. 功能 YAML的语法和其他高阶语言类似,并且可以简单表达清单. ...
- linux 内核升级2 转
linux内核升级 一.Linux内核概览 Linux是一个一体化内核(monolithic kernel)系统. 设备驱动程序可以完全访问硬件. Linux内的设备驱动程序可以方便地以模块化(mod ...
- 收集的MySQL的面试题分享给大家
1.怎样登陆mysql数据库 mysql -u username -p 2.怎样开启/关闭mysql服务 service mysql start/stop 3.查看mysql的状态 service m ...
- 网速4M等于多少KB/S，等于多少kbps
4M=512KB/S=4096Kbps 1KB/S=8Kbps 8倍速 转:http://zhidao.baidu.com/link?url=8GAyhcY9BbVstQr8pE3I7QP_M53Km ...
- 【Devops】【docker】【CI/CD】Jenkins源代码管理 添加gitlab项目地址，报错Failed to connect to repository : Error performing command: ls-remote -h git@192.168.92.130:8090/root/swapping.git HEAD
Jenkins源代码管理 添加gitlab项目地址 报错如下: Failed to connect to repository : Error performing command: ls-remot ...
- 找了一个api管理工具
找了一个工具,https://github.com/nutsteam/apiManager选择了如下方式,进行了安装. ● 下载https://git.oschina.net/zhoujingjie/ ...
- Mysql 根据id查所有父级或子级
mysql递归查询,mysql中从子类ID查询所有父类(做无限分类经常用到) 由于mysql 不支持类似 oracle with ...connect的 递归查询语法 之前一直以为类似的查询要么用存储 ...
- byte数组怎么存放到Json中传递
可以把byte[]序列化成base64字符串后,再放json里传输就可以了.不需要考虑每个字节转成一个字符存到json字符串里. String str = Base64.encodeToString( ...
- 明日传奇第三季/全集Legends of Tomorrow迅雷下载
<明日传奇>第三季将加入一名新的女性角色.据Variety得到的消息称,塔拉·阿什(Tala Ashe)将作为<明日传奇>第三季的常规演员加入该剧.在第三季中,塔拉·阿什饰演的 ...
- 蓝精灵：寻找神秘村Smurfs: The Lost Village迅雷下载
蓝妹妹(黛米·洛瓦托 Demi Lovato 配音)发现了一张遗落的地图,由此引发精灵们对于神秘村庄真实性的猜想.于是,满怀好奇心的蓝妹妹与聪聪(丹尼·朴迪 Danny Pudi 配音).笨笨(杰克· ...