用canvas画一个时钟

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="myCanvas" width="" height=""

    style="border:1px solid #000000;">您的浏览器不支持canvas

</canvas>

<script type="text/javascript">

    var c =document.querySelector('#myCanvas');

    // 标识画布并指明上下文

    var ctx = c.getContext('2d');

    // 1.表盘

    ctx.lineWidth = ;

    ctx.stroeStyle = '#000';

    ctx.beginPath();

    ctx.arc(,,,,,false);

    ctx.stroke()

    ctx.closePath()

    // 刻度

        //     时刻度

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

            ctx.save();

            ctx.lineWidth= ;

            ctx.strokeStyle = 'orange';

                // 设置0,0点位置

                ctx.translate(,);

                // 设置旋转角度

                ctx.rotate(i**Math.PI/);

                ctx.beginPath();

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.stroke();

                ctx.closePath();

                ctx.restore()

            }

        // 分刻度

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

            ctx.save();

            ctx.lineWidth= 4.5;

            ctx.strokeStyle = 'orange';

                // 设置0,0点位置

                ctx.translate(,);

                // 设置旋转角度

                ctx.rotate(i**Math.PI/);

                ctx.beginPath();

                ctx.moveTo(,);

                ctx.lineTo(,);

                ctx.stroke();

                ctx.closePath();

                ctx.restore()

            }

        // 时针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 分针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 秒针

        ctx.save();

        ctx.lineWidth=;

        ctx.strokeStyle="#000";

        ctx.translate(,);

        ctx.rotate(*Math.PI/);

        ctx.beginPath();

        ctx.moveTo(,);

        ctx.lineTo(,-);

        ctx.stroke();

        ctx.closePath();

        ctx.restore();

        // 表盘中心

        ctx.lineWidth=;

        ctx.storeStyle='red';

        ctx.beginPath();

        ctx.arc(,,3.5,,,false);

        ctx.stroke();

        ctx.fillStyle = 'white';

        ctx.fill();

        ctx.closePath();

        // 设置时针，秒针前面的小圆点

        ctx.translate(,);

        ctx.beginPath();

        ctx.arc(,,,,,false);

        ctx.stroke();

        ctx.fillStyle="white";

        ctx.fill();

        ctx.closePath()

    </script>

</body>

</html>

用canvas画一个时钟的更多相关文章

深夜，用canvas画一个时钟
深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...
canvas画一个时钟
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
10分钟，利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
用Canvas画一个刮刮乐
Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...
利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
用canvas绘制一个时钟
实现一个时钟的绘制和时间的显示一,首先是页面的搭建html部分以及一点点的css代码,因为css这块用的比较少,所以就没有单独出来: <!DOCTYPE html> <html l ...
通过H5的新标签canvas做出一个时钟的全过程，希望对初学者有帮助
最近学习了H5中的一个新标签canvas并且用它做出了一个时钟,最下面是成品图像,还不错吧,这只是我学习中的一个小demo,做得有点粗糙,但终究是做出来了,以后再写自己的网页主页再做一个好看点放上去. ...
html5入门：教你用canvas写一个时钟
今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧! 好了,闲话少数, ...

随机推荐

Ext.ux.UploadDialog上传大文件 HTTP 错误 413.1 - Request Entity Too Large Web 服务器拒绝为请求提供服务，因为该请求实体过大。Web 服务器无法为请求提供服务，因为它正尝试与客户证书进行协商，但请求实体过大。
问题描述问题:HTTP 错误 404.13 - Not Found 请求筛选模块被配置为拒绝超过请求内容长度的请求. 原因:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值(I ...
Set a Many-to-Many Relationship设置多对多关系（EF）
In this lesson, you will learn how to set relationships between business objects. For this purpose, ...
2018简约商务工作汇报工作总结公司培训团队介绍PPT模
这几款ppt模板都是简约大气类型的,32页足够丰富,有完整结构框架,可以修改文字图片直接套用模板,是通用的商务ppt模板. 模版来源:http://ppt.dede58.com/gongzuohuib ...
.netcore控制台->定时任务Quartz
之前做数据同步时,用过timer.window服务,现在不用那么费事了,可以使用Quartz,并且配置灵活,使用cron表达式配置XML就可以.我用的是3.0.7版本支持.netcore. 首先创建一 ...
ant 打包脚本
现在很多人都用ant脚本来进行打包,下面就介绍一下这个打包工具常见的用法.以及脚本如何编写  <targe ...
Vue.js2.0快速入门笔记
vue.js 解耦视图与数据,可复用的组件,前端路由,状态管理,虚拟DOM. MVVM模式:当View(视图层)变化时,会自动更新ViewModel(视图模型),View与ViewModel之间双向绑 ...
更改组织属性-以更改maxrecordsforexporttoexcel为例
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复232或者20161101可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
flvjs的unload(),detachMediaElement(),destroy()报错，undefined，not a function解决方案
首先,真的被网上一堆各种转载复制粘贴坑了不少,最后直接到GitHub上flvjs的看作者的demo和docs才解决,具体如下. 1.引入flvjs文件,新建实例 var flvUrl = '直播流地址 ...
hexdump 工具使用和 .txt 文件的二进制查看
最近使用txt文件进行数据处理的时候,突然发现txt文件是怎样编码数据的了,它是以二进制来进行存储的吗?为了知道这个情况,我使用hexdump工具进行查看txt文件的二进制形式,并顺道进行学习了hex ...
JavaScript内置对象及常见API
一.全局属性 Infinity:表示正无穷大 NaN:非数字值 undefined:未定义的值 decodeURI():对encodeURI()转义的字符串解码 decodeURIComponent( ...

用canvas画一个时钟

用canvas画一个时钟的更多相关文章

随机推荐

热门专题