关键词：
前言
想要在自己做的网页中，加入canvas动画效果，但是发现模板各种调整不好，觉得还是要对canvas有所了解，才可以让自己的网页变得狂拽炫酷吊炸天！
一、绘制基础
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 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>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 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>
二、倒计时电子钟的实现
新建两个js文件：digit.js 存放一个三维数组，countdown.js实现时钟效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 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,1canvas制作倒计时炫丽效果
<!DOCTYPEhtml><head><title>canvas倒计时</title><style>.canvas{display:block;border:1pxsolid#000;margin:50pxauto;}</style></head><body><canvasclass="canv 查看详情
更新——canvas画布动画效果之实现倒计时
...anvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。上次的效果如下图所示，仅仅只是一个时间的静态显示而已：今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下：Canvas画布用于图形的... 查看详情
canvas基础绘制-绚丽时钟
效果图：与canvas基础绘制-绚丽倒计时的代码差异：//varendTime=newDate();//const声明变量，不可修改，必须声明时赋值；//endTime.setTime(endTime.getTime()+3600*1000);//当前时间向后一小时；varcurShowTimeSeconds=0;functiongetCurrentShowTimeSeconds(){varcur 查看详情
《每周一点canvas动画》——3d点线与水波动画(代码片段)
...次我们不涉及canvas3D的内容，主要分享一个比较炫的动画效果，可以算是上一篇文章《每周一点canvas动画》——3D点线与水波动画的加强版。动画效果来自codePen。在这篇文章中我们就分析这种效果是如何实现的，如果你对源码比... 查看详情
canvas绘图与动画详解
1、canvas绘制 当canvas不设置大小时，默认宽300，高150； 注意：不建议使用css设置大小，可以利用行内样式width="",height=""去设置（无单位）； canvas是基于状态进行绘制... 查看详情
canvas实现炫酷动画searchview(代码片段)
...图不可或缺的画笔Paint-滤镜篇Part1、Canvas实现炫酷的搜索效果~ 实现此功能很简单，只要动态改变圆弧区域和把手区域即可,这里我们让把手与竖直方向成45度角，如下图所示1、绘制正常的图形看代码privatevoiddrawNormalVi... 查看详情
tips——canvas闪屏问题的处理(代码片段)
...情况（大约1~2帧），造成用户体验不好。二、原因canvas的绘图过程是：先擦出整个画布；然后浏览器到达重绘时间点后，在空白的canvas上作画；xx毫秒后，这一帧动画上的所有元件完成绘画。那么，当采用setTimeout或setInterval等与... 查看详情
canvas基础用法
canvas是HTML5提供的一个用于展示绘图效果的标签.canvas原意画布,帆布.在HTML页面中用于展示绘图效果.最早canvas是苹果提出的一个方案,今天已经在大多数浏览器中实现. 非零环绕原则: 如果需要判断某一个区域是否需要... 查看详情
canvas动画循环
...。我们来模仿写一个球绕中心点的旋转，有三种方式最后效果：通过改变坐标系实现小球做圆周运动的效果,坐标系在上一次改变基础上变化通过显示圆的不同小段边框显示圆周运动通过三角函数改变球的x，y的值有时候我们需要... 查看详情
如何为绘图效果设置动画？ （最好只有 css3）
】如何为绘图效果设置动画？（最好只有css3）【英文标题】：HowcanIanimateadrawingeffect?(Preferablycss3only)【发布时间】：2012-12-2519:48:03【问题描述】：我想制作一个看起来像this的树的绘图效果，一个像here这样的渐进线。我宁愿只使... 查看详情
canvas基础绘制-倒计时(上)
效果：html:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>digit</title></head><body><canvasid="canvas"></canvas><scrip 查看详情
canvas动画：气泡上升效果(代码片段)
...升的动画，经过许久的思考和多次失败，终于做出了如下效果由于是录制的gif图，看着会有点卡顿，实际演示是很自然的想要做出这种效果需要用到大量的随机数先上代码：CSS+HTML <!DOCTYPEhtml><htmllang="en"><head><m... 查看详情
canvas基础(代码片段)
...rcontext=canvas.getContext("2d")//morecode如上，如果需要在画布上绘图，那么首先便需要获得绘图上下文。然后，使用canvas.toDataURL()方法便可以获取在<canvas>元素上绘制的图像，它只接受一个参数，即是我们要指定图像的MIME类型。if(... 查看详情
canvas基础绘制-绚丽倒计时
效果图：html：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>ball</title><scriptsrc="digit_1.js"></script><scriptsrc="countdown.js">< 查看详情
h5canvas实现圆形时间倒计时进度条(代码片段)
在项目中，我们会遇到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间... 查看详情
h5canvas实现圆形时间倒计时进度条(代码片段)
在项目中，我们会遇到需要显示进度条或者倒计时的功能，我们今天就来实现一下。一、效果展示实现效果要求：1.环形倒计时2.能够根据总时间和当前时间进行比例性的倒计时3.进度条环形能够有颜色渐变效果4.中间... 查看详情
androidcanvas绘图(代码片段)
...新刷新，然后绘制一个新的形状，这样达到2D动画效果。下面我们就主要来了解 查看详情
canvas动态画圆弧及requestanimationframe(代码片段)
...非常强大，下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。arc()实现画圆通过设置的开始角度和结束角度来做限定，然后通过累加临时的角度变量实现动画效果。相关函数：context.arc(x,y,r,sAngle... 查看详情