canvas画钟表demo

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>钟表</title>
</head>
<body style="background: #000;"><canvas width="500" height="500" style="background: #fff;" id="cvs"></canvas></body>
</html><script>var cvs = document.getElementById('cvs');window.onload = function () {function toDraw(obj) {var ctx = obj.getContext('2d');var x = 200;var y = 200;//清理画布ctx.clearRect(0,0,cvs.width,cvs.height);var radius = 150;var oDate = new Date();var oHours = oDate.getHours();var oMinutes = oDate.getMinutes();var oSecond = oDate.getSeconds();var oHoursValue = (-90 + oHours * 30 + oMinutes / 2) * Math.PI / 180;var oMinutesValue = (-90 +  oMinutes * 6) * Math.PI / 180;var oSecondsValue = (-90 +  oSecond * 6) * Math.PI / 180;//开始路径ctx.beginPath();for (var i = 0; i < 60; i++){ctx.moveTo(x,y);ctx.arc(x,y,radius,6 * i * Math.PI / 180,6 * (i + 1) * Math.PI / 180,false);}//结束路径ctx.closePath();ctx.stroke();//白色圆盘ctx.fillStyle = '#fff';ctx.beginPath();for (var i = 0; i < 60; i++){ctx.moveTo(x,y);ctx.arc(x,y,radius * 19 / 20,0,360,false);}ctx.closePath();ctx.fill();//分针ctx.beginPath();for (var i = 0; i < 12; i++){ctx.moveTo(x,y);ctx.arc(x,y,radius,30 * i * Math.PI / 180,30 * (i + 1) * Math.PI / 180,false);}ctx.lineWidth = 3;ctx.closePath();ctx.stroke();ctx.fillStyle = '#f90';ctx.beginPath();for (var i = 0; i < 60; i++){ctx.moveTo(x,y);ctx.arc(x,y,radius * 19 / 22,0,360,false);}ctx.closePath();ctx.fill();//时针ctx.beginPath();ctx.lineWidth = 4;ctx.moveTo(x,y);ctx.arc(x,y,radius * 10 / 20,oHoursValue,oHoursValue,false);ctx.closePath();ctx.stroke();//分针ctx.beginPath();ctx.lineWidth = 3;ctx.moveTo(x,y);ctx.arc(x,y,radius * 14 / 20,oMinutesValue,oMinutesValue,false);ctx.closePath();ctx.stroke();//秒针ctx.beginPath();ctx.lineWidth = 1;ctx.moveTo(x,y);ctx.arc(x,y,radius * 18 / 20,oSecondsValue,oSecondsValue,false);ctx.closePath();ctx.stroke();}setInterval(function () {toDraw(cvs);},1000);toDraw(cvs);}
</script>

canvas画钟表demo相关推荐

Android用Canvas画钟表仪
在MainActivity中自定义一个View,重写OnDraw()方法即可实现下图效果: 代码如下: public class MainActivity extends AppCompatActiv ...
openlayers中使用rBush(R树）来存放要素等信息，本文修改了一点其中的rbush源码中的demo，使用canvas画出了insert和delete操作（建立树和删除树中数据）
openlayers中使用rBush(R树)来存放要素等信息,本文修改了一点其中的rbush源码中的demo,使用canvas画出了insert和delete操作(建立树和删除树中数据) 修改后的源代 ...
ios 三种颜色画笔和橡皮擦的画图板demo
demo功能:三种颜色画笔和橡皮擦的画图板demo [iphone 6.1 测试通过] demo说明:项目中PaintView.m 是demo的画板部分,PaintView和三个颜色按钮添加到View ...
微信小程序中base64格式的小程序码通过canvas画出来无效
使用场景小程序中的文章详情页面有一个分享功能:用户点击分享按钮,生成一张分享图片(包括封面图,简介以及带有文章ID的小程序码),方便用户保存在本地. 问题说明小程序码通过后台接口获取,格式如下:' ...
关于星空的java小程序_[Java教程]小程序使用Canvas画饼图_星空网
小程序使用Canvas画饼图 2018-10-24 0 先上效果图 -------------------------------------------------------------w --- ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
html5垂直线怎么画,HTML5 Canvas画线技巧
正统的HTML5 Canvas中如下代码复制代码代码如下: ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(3 ...

canvas画钟表demo

canvas画钟表demo相关推荐

最新文章

热门文章