var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); var rem = 500 / 200; function clock() { ctx.clearRect(0, 0, 500, 50 ...
分类：
其他好文 时间：
2019-12-27 00:09:07
阅读次数：
90
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style> #myCanvas{ border: 1px solid; } </style> </head> ...
分类：
Web程序 时间：
2019-09-15 19:03:04
阅读次数：
118
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制时钟Demo</title> <style> #myCanvas{ border: 1px solid; } </style> </head> ...
分类：
其他好文 时间：
2019-09-12 16:47:51
阅读次数：
84
准备工作 首先，找一张时钟的图片，就是下面这张了。 ——来自bigger than bigger的dribbble网站，图片来源（侵删） 第一步：创建Canvas标签 然后就开始用canvas实现这个逼格满满的时钟吧。在html代码中插入canvas标签 由于浏览器对HTML5标准支持不一致，所以， ...
分类：
其他好文 时间：
2019-08-02 20:06:49
阅读次数：
103
背景图的绘制（大圆、数字、小圆点） 掌握基础知识：圆的绘制（arc方法），关于圆的弧度的计算，数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/12 那么rad=i*2*Math.PI/12 x=Math.cos（rad）*所需要的长度（也就是 ...
分类：
其他好文 时间：
2019-01-04 12:29:10
阅读次数：
189
使用canvas绘制时钟并通过class面向对象 1、思路分析 钟表可分为静止的刻度和动态的指针两大部分由于指针具有动态性，必然需要定时器实时刷新清空并重绘但刻度部分如果一起清空并重绘会降低性能因此可以使用两个重叠在一起的canvas画板来分别绘制两个部分 2、绘制表盘步骤 2.1、首先获取第一个面 ...
分类：
其他好文 时间：
2018-09-08 16:50:04
阅读次数：
186
创建窗口步骤： （1）注册窗口类（RegisterClassEx） （2）创建窗口（CreateWindowEx） （3）在桌面显示窗口（ShowWindow） （4）更新窗口客户区（UpdateWindow） （5）进入无限的消息获取和处理的循环：获取消息（GetMessage）;分派消息至窗口函 ...
分类：
编程语言 时间：
2018-06-04 00:54:42
阅读次数：
302
使用canvas绘制时钟 下文是部分代码，完整代码参照：https://github.com/lemoncool/canvas-clock，可直接下载。 首先看一下效果图：每隔一秒会动态更新时间 一、前期准备 1. HTML中准备一个容器存放画布，并为其设置width，height。 2.在js中获 ...
分类：
其他好文 时间：
2018-03-08 15:57:36
阅读次数：
239
window.onload=function(){ var clock=document.getElementById("clock").getContext('2d');//通过获取canvas元素获取2d上下文 var width=clock.canvas.width;//得到画布的宽度 var ...
分类：
其他好文 时间：
2017-08-11 12:19:57
阅读次数：
172
在页面上加入canvas标签： js部分： 绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形，将它们拼接成一整个圆，然后用oGC.fill()画一个实心的圆，半径比之前拼接的那个圆短，用实心的圆挡住中间多余的线，这样秒的刻度就画出来了，以此类推可以画出分的刻度； 让时钟自动走起 ...
分类：
其他好文 时间：
2016-11-29 13:56:45
阅读次数：
189
