炫丽的倒计时效果Canvas绘图与动画基础

digit.js

  1 digit = [
  2         [
  3         //0
  4         [0, 0, 1, 1, 1, 0, 0],
  5         [0, 1, 1, 0, 1, 1, 0],
  6         [1, 1, 0, 0, 0, 1, 1],
  7         [1, 1, 0, 0, 0, 1, 1],
  8         [1, 1, 0, 0, 0, 1, 1],
  9         [1, 1, 0, 0, 0, 1, 1],
 10         [1, 1, 0, 0, 0, 1, 1],
 11         [1, 1, 0, 0, 0, 1, 1],
 12         [0, 1, 1, 0, 1, 1, 0],
 13         [0, 0, 1, 1, 1, 0, 0]
 14         ],
 15
 16         [
 17         //1
 18         [0, 0, 0, 1, 1, 0, 0],
 19         [0, 1, 1, 1, 1, 0, 0],
 20         [0, 0, 0, 1, 1, 0, 0],
 21         [0, 0, 0, 1, 1, 0, 0],
 22         [0, 0, 0, 1, 1, 0, 0],
 23         [0, 0, 0, 1, 1, 0, 0],
 24         [0, 0, 0, 1, 1, 0, 0],
 25         [0, 0, 0, 1, 1, 0, 0],
 26         [0, 0, 0, 1, 1, 0, 0],
 27         [1, 1, 1, 1, 1, 1, 1]
 28         ],
 29
 30         [
 31         //2
 32         [0, 1, 1, 1, 1, 1, 0],
 33         [1, 1, 0, 0, 0, 1, 1],
 34         [0, 0, 0, 0, 0, 1, 1],
 35         [0, 0, 0, 0, 1, 1, 0],
 36         [0, 0, 0, 1, 1, 0, 0],
 37         [0, 0, 1, 1, 0, 0, 0],
 38         [0, 1, 1, 0, 0, 0, 0],
 39         [1, 1, 0, 0, 0, 0, 0],
 40         [1, 1, 0, 0, 0, 0, 0],
 41         [1, 1, 1, 1, 1, 1, 1]
 42         ],
 43
 44         [
 45         //3
 46         [1, 1, 1, 1, 1, 1, 1],
 47         [0, 0, 0, 0, 0, 1, 1],
 48         [0, 0, 0, 0, 1, 1, 0],
 49         [0, 0, 0, 1, 1, 0, 0],
 50         [0, 0, 1, 1, 1, 0, 0],
 51         [0, 0, 0, 0, 1, 1, 0],
 52         [0, 0, 0, 0, 0, 1, 1],
 53         [0, 0, 0, 0, 0, 1, 1],
 54         [1, 1, 0, 0, 0, 1, 1],
 55         [0, 1, 1, 1, 1, 1, 0]
 56         ],
 57
 58         [
 59         //4
 60         [0, 0, 0, 0, 1, 1, 0],
 61         [0, 0, 0, 1, 1, 1, 0],
 62         [0, 0, 1, 1, 1, 1, 0],
 63         [0, 1, 1, 0, 1, 1, 0],
 64         [1, 1, 0, 0, 1, 1, 0],
 65         [1, 1, 1, 1, 1, 1, 1],
 66         [0, 0, 0, 0, 1, 1, 0],
 67         [0, 0, 0, 0, 1, 1, 0],
 68         [0, 0, 0, 0, 1, 1, 0],
 69         [0, 0, 0, 1, 1, 1, 1]
 70         ],
 71
 72         [
 73         //5
 74         [1, 1, 1, 1, 1, 1, 1],
 75         [1, 1, 0, 0, 0, 0, 0],
 76         [1, 1, 0, 0, 0, 0, 0],
 77         [1, 1, 1, 1, 1, 1, 0],
 78         [0, 0, 0, 0, 0, 1, 1],
 79         [0, 0, 0, 0, 0, 1, 1],
 80         [0, 0, 0, 0, 0, 1, 1],
 81         [0, 0, 0, 0, 0, 1, 1],
 82         [1, 1, 0, 0, 0, 1, 1],
 83         [0, 1, 1, 1, 1, 1, 0]
 84         ],
 85
 86         [
 87         //6
 88         [0, 0, 0, 0, 1, 1, 0],
 89         [0, 0, 1, 1, 0, 0, 0],
 90         [0, 1, 1, 0, 0, 0, 0],
 91         [1, 1, 0, 0, 0, 0, 0],
 92         [1, 1, 0, 1, 1, 1, 0],
 93         [1, 1, 0, 0, 0, 1, 1],
 94         [1, 1, 0, 0, 0, 1, 1],
 95         [1, 1, 0, 0, 0, 1, 1],
 96         [1, 1, 0, 0, 0, 1, 1],
 97         [0, 1, 1, 1, 1, 1, 0]
 98         ],
 99
100         [
101         //7
102         [1, 1, 1, 1, 1, 1, 1],
103         [1, 1, 0, 0, 0, 1, 1],
104         [0, 0, 0, 0, 1, 1, 0],
105         [0, 0, 0, 0, 1, 1, 0],
106         [0, 0, 0, 1, 1, 0, 0],
107         [0, 0, 0, 1, 1, 0, 0],
108         [0, 0, 1, 1, 0, 0, 0],
109         [0, 0, 1, 1, 0, 0, 0],
110         [0, 0, 1, 1, 0, 0, 0],
111         [0, 0, 1, 1, 0, 0, 0]
112         ],
113
114         [
115         //8
116         [0, 1, 1, 1, 1, 1, 0],
117         [1, 1, 0, 0, 0, 1, 1],
118         [1, 1, 0, 0, 0, 1, 1],
119         [1, 1, 0, 0, 0, 1, 1],
120         [0, 1, 1, 1, 1, 1, 0],
121        [1, 1, 0, 0, 0, 1, 1],
122         [1, 1, 0, 0, 0, 1, 1],
123         [1, 1, 0, 0, 0, 1, 1],
124         [1, 1, 0, 0, 0, 1, 1],
125         [0, 1, 1, 1, 1, 1, 0]
126         ],
127
128         [
129         //9
130         [0, 1, 1, 1, 1, 1, 0],
131         [1, 1, 0, 0, 0, 1, 1],
132         [1, 1, 0, 0, 0, 1, 1],
133         [1, 1, 0, 0, 0, 1, 1],
134         [0, 1, 1, 1, 0, 1, 1],
135         [0, 0, 0, 0, 0, 1, 1],
136         [0, 0, 0, 0, 0, 1, 1],
137         [0, 0, 0, 0, 1, 1, 0],
138         [0, 0, 0, 1, 1, 0, 0],
139         [0, 1, 1, 0, 0, 0, 0]
140         ],
141
142         [
143         //:
144         [0, 0, 0, 0],
145         [0, 0, 0, 0],
146         [0, 1, 1, 0],
147         [0, 1, 1, 0],
148         [0, 0, 0, 0],
149         [0, 0, 0, 0],
150         [0, 1, 1, 0],
151         [0, 1, 1, 0],
152         [0, 0, 0, 0],
153         [0, 0, 0, 0]
154         ]
155
156 ]

时间： 2024-10-09 19:44:35

炫丽的倒计时效果Canvas绘图与动画基础的相关文章

canvas-炫丽的倒计时效果Canvas绘图与动画基础

canvas 是基于转台来绘制的来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支持的话要提示的也不提示,开发者工具中的Element中的代码也什么都没有. HTML: <canvas id="canvas" style="border:1px solid red;"></canvas> JS : var canvas = d

HTML5-炫丽的时钟效果Canvas绘图与动画基础练习

源自慕课网效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> ne

学习Canvas绘图与动画基础制作弧和圆（五）

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>制作弧和圆</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; disp

学习Canvas绘图与动画基础为多边形着色（三）

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>多边形着色</title> 6 </head> 7 <body> 8 <canvas id="canvas" style="border:1px solid #aaa; disp

学习Canvas绘图与动画基础（一）

一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="1024" height=&

[ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解及创建万花筒效果

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

Canvas绘图与动画详解

1.canvas 绘制当canvas不设置大小时,默认宽300,高150: 注意:不建议使用css 设置大小,可以利用行内样式 width="",height=""去设置(无单位): canvas 是基于状态进行绘制的: 举例说明: 上述代码显示结果为全部均为黑色: 如何更改? 在绘制前context.beginPath(),结束后 context.closePat

canvas绘图详解-03-绚丽的倒计时效果

制作一个上面这种倒计时效果,只截图了三秒此效果源码github连接:https://github.com/wufangfang0614/fanggit/tree/master/canvas/%E5%80%92%E8%AE%A1%E6%97%B6%E6%97%B6%E9%92%9F 首先分析这个得有一定的数学知识和物理知识(看这个课程的时候,心想要是让我自己想明白这个过程我可弄不明白.)

必备的Canvas接口和动画效果大全

1.概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript 通过操作它的 API,在上面生成图像.它的底层是一个个像素,基本上<canvas>是一个可以用 JavaScript 操作的位图(bitmap).它与 SVG 图像的区别在于,<canvas>是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像.使用 Canvas API 之前,需要在网页里面新建一个<canvas>元素. <canvas