Canvas基础学习(一)——实现简单时钟显示
HTML5最受欢迎的功能就是<canvas>元素。这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。关于<canvas>元素的一些基本用法可以参考w3school。
花了一下午时间熟悉了下常用的API,也参考了下网上的一些demo,实现了一个简单的时钟显示,代码记录如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>canvas-clock</title>
- <style type="text/css">
- /* canvas drawing */
- .clock {
- width: 300px;
- margin: 0 auto;
- }
- #clock {
- width: 300px;
- height: 300px;
- }
- </style>
- <script type="text/javascript">
- var clockDraw = function(context) {
- var now = new Date();
- context.save();
- context.clearRect(0, 0, 300, 300);
- context.scale(1, 0.5);
- context.translate(150, 150);
- // init hours
- context.save();
- for (var i = 0; i < 12; i++ ) {
- context.beginPath();
- context.rotate(Math.PI / 6);
- context.moveTo(0, -123);
- context.lineWidth = 5;
- context.lineTo(0, -110);
- context.stroke();
- }
- context.restore();
- // init minutes
- context.save();
- context.lineWidth = 5;
- for (i = 0; i < 60; i++) {
- if (i % 5 != 0) {
- context.beginPath();
- context.moveTo(0, 118);
- context.lineWidth = 2;
- context.lineTo(0, 115);
- context.stroke();
- }
- context.rotate(Math.PI / 30);
- }
- context.restore();
- var sec = now.getSeconds();
- var min = now.getMinutes();
- var hr = now.getHours();
- hr = hr >= 12 ? hr - 12 : hr;
- context.fillStyle = "black";
- // draw hour
- context.save();
- context.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);
- context.lineWidth = 7;
- context.beginPath();
- context.moveTo(0, 10);
- context.lineTo(0, -80);
- context.stroke();
- context.restore();
- // draw minute
- context.save();
- context.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
- context.lineWidth = 5;
- context.beginPath();
- context.moveTo(0, 20);
- context.lineTo(0, -100);
- context.stroke();
- context.restore();
- // draw second
- context.save();
- context.rotate(sec * Math.PI / 30);
- context.strokeStyle = "#D40000";
- context.fillStyle = "#D40000";
- context.lineWidth = 4;
- context.beginPath();
- context.moveTo(0, 30);
- context.lineTo(0, -113);
- context.stroke();
- context.beginPath();
- context.arc(0, 0, 5, 0, Math.PI * 2, false);
- context.fill();
- context.restore();
- context.beginPath();
- context.arc(0, 0, 125, 0, Math.PI * 2, false);
- context.lineWidth = 5;
- context.strokeStyle = '#325FA2';
- context.stroke();
- context.restore();
- };
- var initClock = function() {
- var clock = document.getElementById("clock");
- if (clock.getContext) {
- var context = clock.getContext("2d");
- clockDraw(context);
- setInterval((function() {
- return function() {
- clockDraw(context);
- }
- })(context), 1000);
- };
- };
- window.onload = function() {
- //canvas drawing
- initClock();
- };
- </script>
- </head>
- <body>
- <div class="clock">
- <canvas id="clock">A drawing of clock.</canvas>
- </div>
- </body>
- </html>
Canvas基础学习(一)——实现简单时钟显示的更多相关文章
- Java基础学习-- 继承 的简单总结
代码参考:Java基础学习小记--多态 为什么要引入继承? 还是做一个媒体库,里面可以放CD,可以放DVD.如果把CD和DVD做成两个没有联系的类的话,那么在管理这个媒体库的时候,要单独做一个添加CD ...
- canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...
- HTML5 <canvas> 基础学习
HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形 创建一个画布( ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- canvas基础学习(二)
一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在ca ...
- 【jQuery基础学习】10 简单了解jQuery Mobile及jQuery各个级别版本的变化
关于 jQuery Mobile jQuery Mobile是为了填补jQuery在移动设备应用上的一个新项目.它应用了HTML5和CSS3. 主要特性 基于jQuery构建. 采用与jQuery一致 ...
- salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning
lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...
- canvas基础学习笔记
canvas基本用法 1.什么是canvas(画布) <canvas> 是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,例如,它可以用于绘制图形,创建动 ...
- canvas基础学习(四)
今天逛天猫时,看见优衣库店铺首页有个这个飘雪效果,顿时觉得好酷炫,立马从里面copy代码进行学习. 之前我也做过一些canvas特效,往往在canvas全屏时,canvas下层的div就无法进行dom ...
随机推荐
- [ofbiz]less-than (<) and greater-than (>) symbols
问题描述: In field [updateItemStr] less-than (<) and greater-than (>) symbols are not allowed 此处的f ...
- Jquery表单与表格的运用
1,表单的应用: a. 单行文本框的应用 多行文本框的应用 b.复选框的框的应用 c.下拉框的应用 d.表单验证 2,表格的应用: a. 表格变色 b.表格展开关闭 d.表格内容筛选 3,多行文本框 ...
- vim 常用快捷键 二[转]
键盘移动 (Move) 一切都从键盘的移动k -> 上 upj -> 下 downh -> 左 leftl -> 右 rightz -> 重画屏幕,当前光标变成屏幕的第一 ...
- 世纪大争论:Linux还是GNU/Linux?
我们在网上已经习惯用“Linux”来称呼Linux操作系统了,然而,偶尔也用“GNU/Linux”来称呼和指代同样的操作系统和软件.同时人们也在争论这两种称呼哪个更合适. 本文将不会选边站队,仅力图向 ...
- 在Git中一定要关注的crlf自动转换
GitHub 第一坑:换行符自动转换 如果你已经做出了错误的选择,也不需要重新安装,可以直接使用命令行来修改设置.很简单,直接打开这货自带的命令行工具 Git Bash,输入以下命令,再敲回车即可: ...
- CSS开发经验
1.尽量用class来定义样式.尽量少使用 .div1 ul li{}这样的样式下去,因为如果li里面还有<div><ul><li>这些元素的话会造成干扰,应该给 ...
- 使用XAML在WPF项目中承载ArcGIS Engine地图控件开发
原文 http://blog.csdn.net/flexmapserver/article/details/5868882 用Windows Form进行ArcGIS Engine二次开发时常见的形式 ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- Erlang千万级用户游戏框架(Openpoker)源码文件分析清单
openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...
- poj1724
ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10804 Accepted: 3976 Descriptio ...