末世异形_炫丽的倒计时效果Canvas绘图与动画基础

前言

想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天!

一、绘制基础

1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6 head>
 7 <body>
 8     <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
 9     canvas>
10 
11     <script>
12         window.onload=function (ev) {
13             var canvas=document.getElementById("canvas");
14         //画布的长宽,没有单位的
15             canvas.width=1024;
16             canvas.height=600;
17             var context=canvas.getContext("2d");
18             //使用context绘制,画图之前的配置
19 
20            
21             //1.绘制折线图形
22             context.beginPath();
23             context.moveTo(100,100);
24             context.lineTo(500,500);
25             context.lineTo(100,500);
26             context.lineTo(100,100);
27             context.closePath();
28 //图线的状态,如果用context.beginPath();.... context.closePath();包住,才只对下面最近的一个 context.stroke();(画线)命令起作用,不然就对所有 context.stroke();起作用
29 
30             context.lineWidth=5;//画线的粗细
31             context.strokeStyle="#005588";
32             context.stroke();
33 
34             context.beginPath();
35             context.moveTo(200,100);
36             context.lineTo(600,500);
37             context.closePath();
38 
39             context.strokeStyle="black"; //画线的颜色
40             context.stroke();
41 
42 
43         }
44     script>
45 body>
46 html>
图线 Code
 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6 head>
 7 <body>
 8     <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
 9     canvas>
10 
11     <script>
12         window.onload=function (ev) {
13             var canvas=document.getElementById("canvas");
14             canvas.width=1024;
15             canvas.height=600;
16             var context=canvas.getContext("2d");
17             //使用context绘制
18 
19             context.lineWidth=5;
20             context.strokeStyle="#005588";
21 
22             for(var i=0;i<10;i++){
23                 context.beginPath();
24                 context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
25                 context.closePath();
26 
27                 context.stroke()
28             }
29 
30             for(var i=0;i<10;i++){
31                 context.beginPath();
32                 context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
33                 // context.closePath();
34 
35                 context.stroke()
36             }
37 
38 
39             for(var i=0;i<10;i++){
40                 context.beginPath();
41                 context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
42                 context.closePath();
43 
44                 context.stroke()
45             }
46 
47             for(var i=0;i<10;i++){
48                 context.beginPath();
49                 context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
50                 // context.closePath();
51 
52                 context.stroke()
53             }
54 
55             context.fillStyle="#005588";
56             for(var i=0;i<10;i++){
57                 context.beginPath();
58                 context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10);
59                 context.closePath();
60 
61                 context.fill()
62             }
63             
64         }
65     script>
66 body>
67 html>
圆弧Code

二、倒计时电子钟的实现

新建两个js文件:digit.js 存放一个三维数组,countdown.js实现时钟效果

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 6 head>
 7 <body>
 8     <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
 9     canvas>
10 
11     <script src="digit.js">script>
12     <script src="countdown.js">script>
13 
14 body>
15 html>
  1 digit =
  2     [
  3         [
  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         ],//0
 15         [
 16             [0,0,0,1,1,0,0],
 17             [0,1,1,1,1,0,0],
 18             [0,0,0,1,1,0,0],
 19             [0,0,0,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             [1,1,1,1,1,1,1]
 26         ],//1
 27         [
 28             [0,1,1,1,1,1,0],
 29             [1,1,0,0,0,1,1],
 30             [0,0,0,0,0,1,1],
 31             [0,0,0,0,1,1,0],
 32             [0,0,0,1,1,0,0],
 33             [0,0,1,1,0,0,0],
 34             [0,1,1,0,0,0,0],
 35             [1,1,0,0,0,0,0],
 36             [1,1,0,0,0,1,1],
 37             [1,1,1,1,1,1,1]
 38         ],//2
 39         [
 40             [1,1,1,1,1,1,1],
 41             [0,0,0,0,0,1,1],
 42             [0,0,0,0,1,1,0],
 43             [0,0,0,1,1,0,0],
 44             [0,0,1,1,1,0,0],
 45             [0,0,0,0,1,1,0],
 46             [0,0,0,0,0,1,1],
 47             [0,0,0,0,0,1,1],
 48             [1,1,0,0,0,1,1],
 49             [0,1,1,1,1,1,0]
 50         ],//3
 51         [
 52             [0,0,0,0,1,1,0],
 53             [0,0,0,1,1,1,0],
 54             [0,0,1,1,1,1,0],
 55             [0,1,1,0,1,1,0],
 56             [1,1,0,0,1,1,0],
 57             [1,1,1,1,1,1,1],
 58             [0,0,0,0,1,1,0],
 59             [0,0,0,0,1,1,0],
 60             [0,0,0,0,1,1,0],
 61             [0,0,0,1,1,1,1]
 62         ],//4
 63         [
 64             [1,1,1,1,1,1,1],
 65             [1,1,0,0,0,0,0],
 66             [1,1,0,0,0,0,0],
 67             [1,1,1,1,1,1,0],
 68             [0,0,0,0,0,1,1],
 69             [0,0,0,0,0,1,1],
 70             [0,0,0,0,0,1,1],
 71             [0,0,0,0,0,1,1],
 72             [1,1,0,0,0,1,1],
 73             [0,1,1,1,1,1,0]
 74         ],//5
 75         [
 76             [0,0,0,0,1,1,0],
 77             [0,0,1,1,0,0,0],
 78             [0,1,1,0,0,0,0],
 79             [1,1,0,0,0,0,0],
 80             [1,1,0,1,1,1,0],
 81             [1,1,0,0,0,1,1],
 82             [1,1,0,0,0,1,1],
 83             [1,1,0,0,0,1,1],
 84             [1,1,0,0,0,1,1],
 85             [0,1,1,1,1,1,0]
 86         ],//6
 87         [
 88             [1,1,1,1,1,1,1],
 89             [1,1,0,0,0,1,1],
 90             [0,0,0,0,1,1,0],
 91             [0,0,0,0,1,1,0],
 92             [0,0,0,1,1,0,0],
 93             [0,0,0,1,1,0,0],
 94             [0,0,1,1,0,0,0],
 95             [0,0,1,1,0,0,0],
 96             [0,0,1,1,0,0,0],
 97             [0,0,1,1,0,0,0]
 98         ],//7
 99         [
100             [0,1,1,1,1,1,0],
101             [1,1,0,0,0,1,1],
102             [1,1,0,0,0,1,1],
103             [1,1,0,0,0,1,1],
104             [0,1,1,1,1,1,0],
105             [1,1,0,0,0,1,1],
106             [1,1,0,0,0,1,1],
107             [1,1,0,0,0,1,1],
108             [1,1,0,0,0,1,1],
109             [0,1,1,1,1,1,0]
110         ],//8
111         [
112             [0,1,1,1,1,1,0],
113             [1,1,0,0,0,1,1],
114             [1,1,0,0,0,1,1],
115             [1,1,0,0,0,1,1],
116             [0,1,1,1,0,1,1],
117             [0,0,0,0,0,1,1],
118             [0,0,0,0,0,1,1],
119             [0,0,0,0,1,1,0],
120             [0,0,0,1,1,0,0],
121             [0,1,1,0,0,0,0]
122         ],//9
123         [
124             [0,0,0,0],
125             [0,0,0,0],
126             [0,1,1,0],
127             [0,1,1,0],
128             [0,0,0,0],
129             [0,0,0,0],
130             [0,1,1,0],
131             [0,1,1,0],
132             [0,0,0,0],
133             [0,0,0,0]
134         ]//:
135     ];
digit.js
 1 var WINDOW_WIDTH=1024;
 2 var WINDOW_HEIGHT=600;
 3 var RADIUS=8;
 4 var MARGIN_TOP=60;
 5 var MARGIN_LIFT=30;
 6 const endTime=new Date("2018/3/20,18:47:52");//js中的月份是从0-11,如果要表示7月,则用6表示,const代表常量
 7 var curShowTimeSeconds=0;
 8 
 9 
10 window.onload=function () {
11 
12     var canvas=document.getElementById("canvas");
13     var context=canvas.getContext("2d");
14 
15     canvas.width=WINDOW_WIDTH;
16     canvas.height=WINDOW_HEIGHT;
17 
18     curShowTimeSeconds=getCurrentShowTimeSeconds();
19     render(context);
20 };
21 
22 function getCurrentShowTimeSeconds() {
23     var curTime=new Date();
24     var ret=endTime.getTime()-curTime.getTime();
25     ret=Math.round(ret/1000);
26     return ret>=0?ret:0;
27 }
28 
29 
30 function render(cxt) {
31     var hours=parseInt(curShowTimeSeconds/3600);
32     var minutes=parseInt((curShowTimeSeconds-hours * 3600)/60);
33     var seconds=curShowTimeSeconds%60;
34 
35     renderDigit(MARGIN_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
36     renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
37     renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
38     renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
39     renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
40     renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
41     renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
42     renderDigit(MARGIN_LIFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);
43 
44 }
45 
46 function renderDigit(x,y,num,cxt) {
47     cxt.fillStyle="rgb(0,102,153)";
48 
49     for(var i=0;i<digit[num].length;i++)
50         for(var j=0;j51             if(digit[num][i][j]==1){
52             cxt.beginPath();
53             cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);
54             cxt.closePath();
55 
56             cxt.fill()
57             }
58 }
countdown.js

注意:数组阵列中,只能从0-9,如果超过10,就会报错,换言之,定义的到期时间距离程序当前时间不能超过100个小时,也就是四天。

三、倒计时电子钟的实现

1.实现倒计时效果,修改countdown.js

 1 var WINDOW_WIDTH=1024;
 2 var WINDOW_HEIGHT=600;
 3 var RADIUS=8;
 4 var MARGIN_TOP=60;
 5 var MARGIN_LIFT=30;
 6 const endTime=new Date("2018/3/20,18:47:52");//js中的月份是从0-11,如果要表示7月,则用6表示,const代表常量
 7 var curShowTimeSeconds=0;
 8 
 9 
10 window.onload=function () {
11 
12     var canvas=document.getElementById("canvas");
13     var context=canvas.getContext("2d");
14 
15     canvas.width=WINDOW_WIDTH;
16     canvas.height=WINDOW_HEIGHT;
17 
18     curShowTimeSeconds=getCurrentShowTimeSeconds();
19     // render(context);
20     setInterval(function () {
21         render(context);
22         updata();
23 
24     },
25         50)
26 };
27 
28 function updata() {
29     var nextShowTimeSeconds=getCurrentShowTimeSeconds();
30 
31     var nextHours=parseInt(nextShowTimeSeconds/3600);
32     var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);
33     var nextSeconds=nextShowTimeSeconds%60;
34 
35     var curHours=parseInt(curShowTimeSeconds/3600);
36     var curMinutes=parseInt((curShowTimeSeconds-curHours * 3600)/60);
37     var curSeconds=curShowTimeSeconds%60;
38 
39     if(nextSeconds!=curSeconds){
40         curShowTimeSeconds=nextShowTimeSeconds;
41     }
42 
43 
44 }
45 
46 function getCurrentShowTimeSeconds() {
47     var curTime=new Date();
48     var ret=endTime.getTime()-curTime.getTime();
49     ret=Math.round(ret/1000);
50     return ret>=0?ret:0;
51 }
52 
53 function render(cxt) {
54 
55     cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对整个画布进行刷新,防止新画的跟以前画的叠加
56     var hours=parseInt(curShowTimeSeconds/3600);
57     var minutes=parseInt((curShowTimeSeconds-hours * 3600)/60);
58     var seconds=curShowTimeSeconds%60;
59 
60     renderDigit(MARGIN_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
61     renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
62     renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
63     renderDi

san dao ji shi dian zi zhong de shi xian 1. shi xian dao ji shi xiao guo, xiu gai countdown. js 1 var WINDOW_WIDTH 1024 2 var WINDOW_HEIGHT 600 3 var RADIUS 8 4 var MARGIN_TOP 60 5 var MARGIN_LIFT 30 6 const endTime new Date" 2018 3 20, 18: 47: 52" js zhong de yue fen shi cong 011, ru guo yao biao shi 7 yue, ze yong 6 biao shi, const dai biao chang liang 7 var curShowTimeSeconds 8 9 10 window. onload function 11 12 var canvas document. getElementById" canvas" 13 var context canvas. getContext" 2d" 14 15 canvas. width WINDOW_WIDTH 16 canvas. height WINDOW_HEIGHT 17 18 curShowTimeSeconds getCurrentShowTimeSeconds 19 render context 20 setInterval function 21 render context 22 updata 23 24 , 25 50 26 27 28 function updata 29 var nextShowTimeSeconds getCurrentShowTimeSeconds 30 31 var nextHours parseInt nextShowTimeSeconds 3600 32 var nextMinutes parseInt nextShowTimeSecondsnextHours 3600 60 33 var nextSeconds nextShowTimeSeconds 60 34 35 var curHours parseInt curShowTimeSeconds 3600 36 var curMinutes parseInt curShowTimeSecondscurHours 3600 60 37 var curSeconds curShowTimeSeconds 60 38 39 if nextSeconds! curSeconds 40 curShowTimeSeconds nextShowTimeSeconds 41 42 43 44 45 46 function getCurrentShowTimeSeconds 47 var curTime new Date 48 var ret endTime. getTime curTime. getTime 49 ret Math. round ret 1000 50 return ret gt 0? ret: 51 52 53 function render cxt 54 55 cxt. clearRect 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT dui zheng ge hua bu jin xing shua xin, fang zhi xin hua de gen yi qian hua de die jia 56 var hours parseInt curShowTimeSeconds 3600 57 var minutes parseInt curShowTimeSecondshours 3600 60 58 var seconds curShowTimeSeconds 60 59 60 renderDigit MARGIN_LIFT, MARGIN_TOP, parseInt hours 10, cxt 61 renderDigit MARGIN_LIFT 15 RADIUS 1, MARGIN_TOP, parseInt hours 10, cxt 62 renderDigit MARGIN_LIFT 30 RADIUS 1, MARGIN_TOP, 10, cxt 63 renderDi

当前文章:http://www.xjj3292.com/i1ll6zq7g/8581-923973-21333.html

发布时间:04:05:21

www.576777.com??9999kk.com??开奖结果??64848开奖网??新码王??香港金吊桶论坛??最快开奖结果现场直播??www.331717.com??412333.com??凤凰天机报??

  • Copyright @ 2016-2018 蜘蛛资讯网 版权所有