用easyx画电子钟_Canvas入门－利用Canvas绘制好玩的电子时钟
在这之前
你需要了解一下方法的使用：
beginPath()
closePath()
moveTo()
lineTo()
fill()
stroke()
fillRect()
clearRect()
这些我在前面的文章介绍过，可以看：
画个圆
arc()方法
arc(x, y, radius, startAngle, endAngle, anticlockwise)
= > 画一个以(x,y)为圆心的以radius为半径的圆弧(圆)，从startAngle开始到endAngle结束，按照anticlockwise给定的方向(默认为顺时针)来生成。
该方法有五个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。
注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。
//画一个带边框的实心圆
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 600;
ctx.beginPath();
var x = 200, // x 坐标值
y = 200, // y 坐标值
radius = 50, //半径
startAngle = 0 ; //开始点
endAngle = Math.PI * 2; //结束点
anticlockwise = true; //逆时针
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.lineWidth = 10;
ctx.fillStyle = "#1208ff";
ctx.strokeStyle = "#333";
ctx.stroke();
ctx.fill();
实现的效果图如下：
准备工作
会画个圆之后呢，就要开始绘制我们的电子时钟。开始之前，我们需要理清思路。首先，我们要创建个二维数组放置我们从0-9的点阵图形，当元素的值为1的时候，就要将其绘制出来。以下是二维数组的片段：
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
]//0
我们要做的就是将 0 － 9 个数字用二维数组表示出来。
绘制电子时钟的数字
首先，我们要遍历我们的二维数组，如果元素的值为 1 ，则我们就将他绘制成圆形，那如何确定每个元素的圆心呢，看下面这张图：
接着我们写这样一个绘制数字的数字：
function drawNum(x, y, num, ctx){
for (var i = 0; i < digit[num].length; i++){
for(var j = 0; j < digit[num][i].length; j++){
if( digit[num][i][j] == 1){
ctx.beginPath();
ctx.fillStyle = "rgb(0, 102, 153)";
ctx.arc(x+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
}
}
}
}
然后，调用该函数来绘制我们的数字：
var RADIUS = 4; // 圆的半径
drawNum(0, 0, 1, ctx);
绘制的效果如下：
绘制简单的电子时钟
我们需要定义一个函数draw()来绘制我们的电子时钟。
function draw(ctx){
var curDate = new Date();
var hour = curDate.getHours();
var minute = curDate.getMinutes();
var seconds = curDate.getSeconds();
drawNum(Margin_X, Margin_Y, parseInt(hour/10), ctx);
drawNum(Margin_X + (RADIUS+1)*15, Margin_Y, parseInt(hour%10), ctx);
drawNum(Margin_X + (RADIUS+1)*30, Margin_Y, 10, ctx);
drawNum(Margin_X + (RADIUS+1)*45, Margin_Y, parseInt(minute/10), ctx);
drawNum(Margin_X + (RADIUS+1)*60, Margin_Y, parseInt(minute%10), ctx);
drawNum(Margin_X + (RADIUS+1)*75, Margin_Y, 10, ctx);
drawNum(Margin_X + (RADIUS+1)*90, Margin_Y, parseInt(seconds/10), ctx);
drawNum(Margin_X + (RADIUS+1)*105, Margin_Y, parseInt(seconds%10), ctx);
}
为了让每个数字之间有些间隔，不重叠在一起，定义了两个变量 Margin_X和Margin_Y来控制它距画布左边和顶部的距离。初始值都是30；
var Margin_X = 30; // 离 canvas 原点的坐标值 x
var Margin_Y = 30; // 离 canvas 原点的坐标值 y
让电子时钟动起来
setInterval()方法
setInterval(function,time)
= > 该方法会循环执行一个函数，时间间隔为 time(ms)
我们利用 setInterval方法让我们的电子时钟动起来。
setInterval(function(){
draw(ctx);
}, 500);
相应的，我们需要在重复绘制前，清楚我们的画布，不然会导致数字重叠在一起。这里用到了clearRect()清楚我们的画布。
ctx.clearRect(0,0,1024,786);
附上完整的代码：
canvas当前浏览器不支持canvas
//电子时钟
var RADIUS = 4; // 圆的半径
var Margin_X = 30; // 离 canvas 原点的坐标值 x
var Margin_Y = 30; // 离 canvas 原点的坐标值 y
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
setInterval(function(){
draw(ctx);
}, 500);
}
function draw(ctx){
ctx.clearRect(0,0,1024,786);
var curDate = new Date();
var hour = curDate.getHours();
var minute = curDate.getMinutes();
var seconds = curDate.getSeconds();
drawNum(Margin_X, Margin_Y, parseInt(hour/10), ctx);
drawNum(Margin_X + (RADIUS+1)*15, Margin_Y, parseInt(hour%10), ctx);
drawNum(Margin_X + (RADIUS+1)*30, Margin_Y, 10, ctx);
drawNum(Margin_X + (RADIUS+1)*45, Margin_Y, parseInt(minute/10), ctx);
drawNum(Margin_X + (RADIUS+1)*60, Margin_Y, parseInt(minute%10), ctx);
drawNum(Margin_X + (RADIUS+1)*75, Margin_Y, 10, ctx);
drawNum(Margin_X + (RADIUS+1)*90, Margin_Y, parseInt(seconds/10), ctx);
drawNum(Margin_X + (RADIUS+1)*105, Margin_Y, parseInt(seconds%10), ctx);
}
function drawNum(x, y, num, ctx){
for (var i = 0; i < digit[num].length; i++){
for(var j = 0; j < digit[num][i].length; j++){
if( digit[num][i][j] == 1){
ctx.beginPath();
ctx.fillStyle = "rgb(0, 102, 153)";
ctx.arc(x+(RADIUS+1)*2*j+(RADIUS+1), y+(RADIUS+1)*2*i+(RADIUS+1), RADIUS, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
}
}
}
}
digit.js
digit =
[
[
[0,0,1,1,1,0,0],
[0,1,1,0,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,0,1,1,0],
[0,0,1,1,1,0,0]
],//0
[
[0,0,0,1,1,0,0],
[0,1,1,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[1,1,1,1,1,1,1]
],//1
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,0,0,1,1],
[1,1,1,1,1,1,1]
],//2
[
[1,1,1,1,1,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,1,1,1,0,0],
[0,0,0,0,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//3
[
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,0],
[0,0,1,1,1,1,0],
[0,1,1,0,1,1,0],
[1,1,0,0,1,1,0],
[1,1,1,1,1,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,1,1]
],//4
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,1,1,1,1,0],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//5
[
[0,0,0,0,1,1,0],
[0,0,1,1,0,0,0],
[0,1,1,0,0,0,0],
[1,1,0,0,0,0,0],
[1,1,0,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//6
[
[1,1,1,1,1,1,1],
[1,1,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,0,0,1,1,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0],
[0,0,1,1,0,0,0]
],//7
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,1,1,0]
],//8
[
[0,1,1,1,1,1,0],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[1,1,0,0,0,1,1],
[0,1,1,1,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,0,1,1],
[0,0,0,0,1,1,0],
[0,0,0,1,1,0,0],
[0,1,1,0,0,0,0]
],//9
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
]//:
];
实现的效果图如下：
甚至我们还可以这样子：
相关文章：
前端开发工程师面试题之综合篇
温馨提示：以下系列的面试题是通过整合网上各位大牛的文章而成，站在巨人的肩膀上，能够让我们更进一步。 1、页面从输入URL到页面加载显示完成，这个过程中都发生了什么？ 输入域名地址发送域名地址至DNS服务器并获得对应W…
C语言基础(12)-输入和输出
1. int scanf(const char *format, ...) 说明：scanf用于通过控制台输入字符串。 注意： (1).通过scanf()函数输入的字符串，系统会自动在其后面补一个0,scanf默认回车和空格都是代表输入完成，这样会导致无法输入一个完整的字符串。 …
java static 可见性_Java多线程 synchronized与可见性的关系以及可见性问题总结
作者：七里香的编程之路出自：OSCHINA原文：my.oschina.net/u/4098550/blog/4548274能保证可见性的措施除了volatile 可以让变量保证可见性外.happens-before九大规则. 都是能够保证可见性的. 其中就包含了锁操作(synchronized 和 lock) 和 vola…
表达式树 java_表达树—构建表达式树、获取表达式（二）
public classExprTree {//最后访问头结点public BinaryTreeNode buildExprTree(char postfixExpr[],intsize){LinkedList stacknewLinkedList();BinaryTreeNode nodenull;for(int i0;inodenewBinaryTreeNode();node.setLeft(null);node.setRight(null);node.setData(postfixExp…
python 客户端 如何获取手机_Python学习---Django的request扩展[获取用户设备信息]
关于Django的request扩展【获取用户设备信息】settings.pyINSTALLED_APPS [...app01, # 注册app]STATICFILES_DIRS (os.path.join(BASE_DIR, "statics"),) # 现添加的配置,这里是元组，注意逗号TEMPLATES [...DIRS: [os.path.join(BASE_DIR, templates)…
: error c2062: 意外的类型“int”_Go 命令行解析 flag 包之扩展新类型
上篇文章 说到，除布尔类型 Flag，flag 支持的还有整型（int、int64、uint、uint64）、浮点型（float64）、字符串（string）和时长（duration）。flag 内置支持能满足大…
java英文字符串大小写转换 必须使用_【Java基础】之字符串大小写转换不利用API....
public class UpStr{static String str "AbcDeFdDSfgdsadeADFSAFCfdsa";public String transformUpperOrLower(String str, String type){//将字符串转换为char数组char[] ch str.toCharArray();if (type null || type.length() 0 || type.equals(""))…
.net core 17
转载于:https://www.cnblogs.com/qingwengang/p/6297486.html
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信？下面本篇文章就来给大家介绍一下Vue.js组件间通信方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。平时在使用Vue框架的业务开发中，组件不仅仅要把模板的内容进行复用，更…
以太坊RLP机制分析
目录 1 RLP 定义 2 RLP 编码规则 3 RLP 编码实例 4 RLP 分析 1 RLP 定义 RLP，即 Recursive Length Prefix, 递归长度前缀编码，是以太坊数据序列化的主要方法， 具有较好的数据处理效率，尤其是将长度和类型统一作为前缀，…
Android Studio导入Eclipse项目的两种方法
Android Studio导入Eclipse项目有两种方法，一种是直接把Eclipse项目导入Android Studio，另一种是在Eclipse项目里面进行转换，然后再导入Android Studio。 1. 直接导入 打开Android Studio，如果里面已经打开了项目，选择…
mediawiki java api_维基百科 MediaWiki API 解析
使用开放的 API 做一个自己的小项目，是一个很好的学习方法。但好像开放的 API 选择并不多。这里给大家多一个选择，简单介绍一下维基百科使用的 MediaWiki API。简介先简单介绍几个容易混淆的概念。WikiWiki 是一种在网络上开放且可供多人协同创作的超文本…
elasticdump安装_elasticsearch导出、导入工具-elasticdump
elasticsearch导出、导入工具-elasticdumpelasticsearch 数据导入到本地，或本地数据导入到elasticsearch中，或集群间的数据迁移，可以用elasticsearch的工具—elasticdumpelasticdump 可以用用npm安装本地运行，也可以用docker容器运…
mysql 无法登陆_MySQL root用户无法登录原因及解决办法
MySQL root密码正确，却怎么也bai无法du从本地登录MySQL登录提示ERROR 1045 (28000): Access denied for user rootlocalhost (using password: YES)可能原因是mysql库中bai的user表缺少一个root指向host：localhost的数据项，只有一个root指向h…
Spring Boot启动过程（二）
书接上篇 该说refreshContext(context)了，首先是判断context是否是AbstractApplicationContext派生类的实例，之后调用了强转为AbstractApplicationContext类型并调用它的refresh方法。由于AnnotationConfigEmbeddedWebApplicationContext继承自EmbeddedW…
dom vue 加载完 执行_前端面试题——Vue
前言前几天整理了一些 html css JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articles)，然后现在也是找了一些在 Vue 方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴。如果文章中有出现纰…
查看某个存储过程
show create procedure 存储过程的名称; ##主从同步是会同步存储过程的 转载于:https://www.cnblogs.com/yangxiaochu/p/9397108.html
java中的分页 效率考虑_面试官：数据量很大，分页查询很慢，有什么优化方案？...
当需要从数据库查询的表有上万条记录的时候，一次性查询所有结果会变得很慢，特别是随着数据量的增加特别明显，这时需要使用分页查询。对于数据库分页查询，也有很多种方法和优化的点。下面简单说一下我知道的一些方法。准备工作为了…
dede 后台 mysql_织梦dedecms使用Mysql8.0无法登录后台的解决办法
1//只允许用户名和密码用0-9,a-z,A-Z,,_,.,-这些字符2$this->userName preg_replace("/[^0-9a-zA-Z_!\.-]/", , $username);3$this->userPwd preg_replace("/[^0-9a-zA-Z_!\.-]/", , $userpwd);4$pwd substr(md5($this->userPwd), 5, 20);56$d…
怎样对拍、如何对拍、对拍模板
我写了一个对拍模板，套上直接可以用，还有使用说明在里面，这里附上github网站。 对拍全套模板 转载于:https://www.cnblogs.com/yichuan-sun/p/9624162.html
二叉树线索化示意图_103-线索化二叉树思路图解
2.网上数据结构和算法的课程不少，但存在两个问题：1)授课方式单一，大多是照着代码念一遍，数据结构和算法本身就比较难理解，对基础好的学员来说，还好一点，对基础不好的学生来说，基本上…
linux环境下搭建osm_web服务器一（Postgresql配置及osm2pgsql原始数据导入）：
Postgresql配置及osm2pgsql原始数据导入 2012年，Ubuntu 12.04LTS发布，又一个长效支持版，我们又该更新OpenStreetMap服务器了，这次，将详细在博客中记录配置过程。关于前面对OpenStreetMap的介绍，参考我的博文…
Java开发买低压本还是标压本_标压和低压，笔记本怎么选才最香？
华为最近发布了新款 MateBook 13/14 2020 锐龙版笔记本电脑，与之前的产品相比，它们都采用了 AMD 锐龙标压处理器。在体验这两款产品的同时，我一直在思考两个问题：它们与低压处理器相比强在哪里，以及是否值得购买。按照…
php mysql 备注_php,mysql备注信息1
/*---------------------------------------------------------------------------------------如何彻底地删除表?如果你不需要一个表了,你可以使用DROP.语法如下:DROP TABLE tablename例如:DROP TABLE employee_dataQuery OK,0 rows affected(0.01 sec);--------------------…
JSP和Servlet学习笔记1 - 访问配置
1. 访问 WebContent 目录下的 JSP 文件 在 WebContent 目录下的文件可以直接在浏览器中访问。新建一个 test.jsp 文件 <% page language"java" contentType"text/html; charsetISO-8859-1"pageEncoding"ISO-8859-1"%> <!DOCTYPE htm…
unity人物旋转移动代码_Unity3D研究院之脚本实现模型的平移与旋转（六）
123 说：雨松大大，有个问题想请教一下，我用UNET构建了个小场景，在电脑上可以客户端可以连接到服务器，Windows和Linux都可以，发布到安卓缺连不了，这是问什么呢说：求教一下，…
博客园的第一篇博文
以后所有技术相关的文章都记录在博客园啦，加油！转载于:https://www.cnblogs.com/dabenniu/p/6337549.html
java后台分页插件怎么写_Java分页技术(从后台传json到前台解析显示)
0 这是一篇我在初学习过程中，遇到的动态数据分页显示的问题，前台采用Ajax传给后台，后台在访问数据库取出分页数据再转换为json格式传递给前台，前台再解析显示到表格中。在此写出我在做的过程中遇到的问题，可以让其他人…
c 应用程序mysql_MySQL C 语言应用程序接口开发教程
从数据库中取回数据在这个实例中我们从表中取回数据。步骤：(1)创建连接(2)执行查询(3)获取结果集(4)提取所有可用的记录(5)释放结果集实例程序打印 writers 表中所有的记录(姓名)。#include #include int main(int argc, char * argv[]){MYSQL * conn;MYSQL_RES * r…
GreenPlum学习笔记：基础知识
一、介绍 GreenPlum分布式数据仓库，大规模并行计算技术。 无共享/MPP核心架构Greenplum数据库软件将数据平均分布到系统的所有节点服务器上，所以节点存储每张表或表分区的部分行，所有数据加载和查询都是自动在各个节点服务器上并行运行&…