html5 Canvas绘制时钟以及绘制运动的圆
1、绘制时钟
<!-- js代码 -->
<script type="text/javascript">
window.onload=function(){
var oC1=document.getElementById('c1')
var oGC=oC1.getContext('2d'); function toDraw(){
var x=200;
var y=200;
var r=150; oGC.clearRect(0,0,oC1.width,oC1.height); var iDate=new Date();
var iHou=iDate.getHours();
var iMin=iDate.getMinutes();
var iSce=iDate.getSeconds(); var oHoursValue = (-90 + iHou*30 + iMin/2) * Math.PI/180;
var oMinValue = (-90 + iMin*6) * Math.PI/180;
var oSenValue = (-90 + iSce*6) * Math.PI/180; oGC.beginPath(); for(var i=0;i<60;i++){
oGC.moveTo(x,y);
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
} oGC.closePath(); oGC.stroke(); oGC.fillStyle='#fff'; oGC.beginPath(); oGC.moveTo(x,y); oGC.arc(x,y,r*19/20,0,360*(i+1)*Math.PI/180,false); oGC.closePath(); oGC.fill(); oGC.lineWidth=3; oGC.beginPath(); for(var i=0;i<12;i++){ oGC.moveTo(x,y); oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
} oGC.closePath(); oGC.stroke(); oGC.fillStyle = '#fff'; oGC.beginPath(); oGC.moveTo(x,y); oGC.arc(x,y,r*18/20,0,360*(i+1)*Math.PI/180,false); oGC.closePath(); oGC.fill(); oGC.lineWidth = 5;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*9/20,oHoursValue,oHoursValue,false); oGC.closePath();
oGC.stroke(); oGC.lineWidth = 3;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*13/20,oMinValue,oMinValue,false); oGC.closePath();
oGC.stroke(); oGC.lineWidth = 1;
oGC.beginPath();
oGC.moveTo(x,y);
oGC.arc(x,y,r*18/20,oSenValue,oSenValue,false); oGC.closePath();
oGC.stroke();
}
setInterval(toDraw,1000);
toDraw();
}
</script>
<canvas id="c1" width="400" height="400"></canvas>
2、绘制运动的圆
<!-- js代码 -->
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
var setArr=[]; setInterval(function(){//进行运动操作 oGC.clearRect(0,0,oC.width,oC.height); for(var i=0;i<setArr.length;i++){
setArr[i].r+=1;//半径每次增大1
setArr[i].c4-=0.01; if(setArr[i].c4<=0){//删除背景为透明的,避免元素过大
setArr.splice(i,1);
}
}
for(var i=0;i<setArr.length;i++){
oGC.beginPath();
oGC.fillStyle='rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
oGC.moveTo(setArr[i].x,setArr[i].y);
oGC.arc(setArr[i].x,setArr[i].y,setArr[i].r,0,360*Math.PI/180,false);
oGC.closePath();
oGC.fill();
} },1000/60); setInterval(function(){//添加数据 var x=Math.floor(Math.random()*oC.width);//随机产生圆的x值
var y=Math.floor(Math.random()*oC.height);//随机产生圆的y值
var r=4;//圆的半径
//随机产生圆的颜色rgb
var c1=Math.floor(Math.random()*255);
var c2=Math.floor(Math.random()*255);
var c3=Math.floor(Math.random()*255);
var c4=1;//设置透明度 setArr.push({
x : x,
y : y,
r : r,
c1 : c1,
c2 : c2,
c3 : c3,
c4 : c4
}); },500);//往数组中放元素
}
</script>
<canvas id="c1" width="400" height="400"></canvas>
html5 Canvas绘制时钟以及绘制运动的圆的更多相关文章
- HTML5 Canvas(实战:绘制饼图2 Tooltip)
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框. Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域 ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- html5 canvas绘画时钟
本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...
- html5 canvas 笔记三(绘制文本和图片)
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- HTML5 Canvas ( 填充图形的绘制 ) closePath, fillStyle, fill
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 canvas 指针时钟
<!doctype html> <html> <head></head> <body> <canvas id="> 您 ...
- html5 canvas js(时钟)
<!doctype html> <html> <head> <title>canvas</title> </head> < ...
随机推荐
- 09--STL关联容器(map/multimap)
一:map/multimap的简介 map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. map中key值是唯一的.集合中的元素按一定的顺 ...
- Python面向对象进阶和socket网络编程-day08
写在前面 上课第八天,打卡: 为什么坚持?想一想当初: 一.面向对象进阶 - 1.反射补充 - 通过字符串去操作一个对象的属性,称之为反射: - 示例1: class Chinese: def __i ...
- SpringBoot系列:Pojo validation
JSR 303 规范了bean validation, Hibernate validator实现了JSR 303所有的规范, 同时也是最常用的validator 工具包. 使用 Hibernate ...
- 代码,python1
def main(): try: number1,number2=eval(input("please enter two number")) result=number1/num ...
- pygame学习点滴
pygame分为四块 引用/ 初始化/ 事件处理/ 窗口刷新 普通版壁球游戏 """ 引用部分 """ import pygame, sys ...
- Centos7.5 安装VirtualBox增强工具
一.安装 1.自带tools: 选择VirtualBox工具栏 => 设备 => 安装增强功能 2.挂载光驱 3.进入光驱目录,执行(一定要用root权限执行) ①安装gcc yum i ...
- Idea 问题记录
日常问题记录 下载IDEA, tomcat ,下载jdk 前言:java net对比 Java:JDK .NET:.NetFramework WEB服务器 Java:Tomcat,JBoss,Web ...
- 题解P3711:【仓鼠的数学题】
这题黑的丫!怎么会掉紫呢! noteskey 伯努利数... 这里 有介绍哟~ 写的非常详细呢~ 反正这题就是推柿子... 另外就是黈力算法的运用 QWQ 我们令 \(ANS(x)\) 为答案多项式, ...
- $Django 支付宝支付,微信服务号推送消息 (测试需要把应用程序部署到服务器上)
一 支付宝支付 大概 支付宝支付 正式环境:需要用营业执照去申请商户号,appid 测试环境:沙箱环境:https://openhome.alipay.com/platform/appDaily.ht ...
- 帆软报表(finereport) 复选框多值查询
定义数据集 SELECT * FROM 库存 设计模板 设置控件:控件名称 XX 要与 单元格中 取值公式 =$XX 对应,控件值可更改 下拉复选框控件: 设置控件名称(与模板中=$选仓库 ...