├── Canvas星星跟流星背景动画特效 └── index.html ├── Canvas梦幻大树生长动画特效 ├── index.html ├── js │ └── jquery-1.4.2.min.js └── 说明.txt ├── Canvas粒子线条连接动态背景特效 ├── index.html ├── js │ └── jquery.min.js └── 说明.txt ├── Canvas自适应宽度大转盘抽奖代码 ├── images │ ├── 1.png │ ├── 10.png │ ├── 11.png │ ├── 2.png │ ├── 3.png │ ├── 4.png │ ├── 5.png │ ├── 6.png │ ├── 7.png │ ├── 9.png │ ├── body_bg.jpg │ ├── body_bg2.jpg │ ├── cj_bg.png │ ├── eventDetails.jpg │ ├── jt.png │ ├── jt2.png │ ├── red5.png │ ├── red6.png │ ├── turnplate-bg.png │ └── turnplate-pointer.png ├── index.html ├── js │ ├── awardRotate.js │ └── jquery-1.10.2.js ├── 说明.htm └── 说明.txt ├── Canvas菱角背景动画特效 ├── index.html ├── js │ ├── Stats.min.js │ └── TweenMax.min.js └── 说明.txt ├── Canvas酷炫全屏动态背景动画特效 ├── css │ └── style.css ├── index.html └── js │ ├── TweenMax.min.js │ ├── index.js │ ├── jquery.min.js │ ├── jrj6out.js │ ├── prefixfree.min.js │ └── three.min.js ├── Canvas雪花散开放大动画特效 ├── index.html └── js │ └── jquery.min.js ├── Canvas鼠标箭头跟随动画特效 ├── demo.html ├── index.html └── js │ └── jquery.min.js ├── Canvas鼠标经过星星连成线特效 ├── demo.html ├── demo2.html ├── index.html └── 说明.txt ├── H5lock ├── H5lock.js ├── index.html └── 说明.htm ├── HTML5 Canvas岩浆动画背景特效 ├── index.html └── js │ ├── chroma.min.js │ └── dat.gui.min.js ├── HTML5 Canvas气泡背景特效 ├── demo.html ├── index.html └── js │ ├── background.js │ └── background.min.js ├── HTML5 Canvas点击泡沫横飞特效 ├── index.html └── js │ ├── Stats.min.js │ └── three.min.js ├── HTML5 Canvas粒子数字时钟特效 ├── index.html └── 说明.txt ├── HTML5 Canvas粒子文字特效 └── index.html ├── HTML5 Canvas赛车游戏动画 ├── css │ ├── normalize.css │ └── style.css ├── index.html └── js │ └── main.js ├── HTML5 canvas写字板涂鸦画板 ├── index.html └── js │ ├── huabu.js │ └── jquery.min.js ├── HTML5 canvas制作海浪动画效果 ├── css │ └── style.css ├── index.html ├── js │ └── ctx.js └── 说明.htm ├── HTML5 canvas扑克牌花式洗牌动画 ├── demo.html └── js │ └── jquery.min.js ├── HTML5 canvas移动端手机刮刮卡代码 ├── css │ └── style.css ├── images │ ├── foreground.jpg │ ├── loose.jpg │ ├── piece.cur │ ├── piece.png │ ├── scratch-over.jpg │ └── win.jpg ├── index.html └── js │ └── Scratch.js ├── HTML5 canvas简单五子棋小游戏 ├── index.html └── 说明.htm ├── HTML5 canvas粒子烟花绽放动画 └── index.html ├── HTML5 canvas绘制七巧板代码 ├── index.html └── 说明.htm ├── HTML5 canvas网页背景生成器 ├── css │ └── style.css ├── index.html └── js │ └── index.js ├── HTML5 canvas高通量能量线条动画 ├── demo.html └── js │ ├── perlin.js │ └── three.js ├── canvas1-loading ├── css │ └── style.css ├── index.html └── js │ └── index.js ├── canvas2-xjx-line └── index.html ├── canvas3-Snake ├── index.html └── js │ ├── RetroSnaker.js │ └── RetroSnaker.min.js ├── canvas4-paperdrop └── index.html ├── canvas5-rainbow ├── css │ └── style.css ├── index.html ├── js │ └── index.js └── scss │ └── style.scss ├── canvas6-squareroundtext ├── css │ └── style.css ├── index.html └── js │ ├── index.js │ ├── particles.js │ ├── shape.js │ ├── sidebar.js │ └── utils.js ├── canvas贪吃蛇 └── index.html ├── canvas通过sin实现波动线条 ├── README.txt ├── css │ └── style.css ├── index.html ├── js │ ├── index.js │ └── sine-waves.min.js ├── license.txt ├── scss │ └── style.scss └── 说明.htm ├── canvas黑客帝国代码雨特效 ├── index.html └── 说明.htm ├── demo ├── demo2.html ├── demo4.html ├── index1.html ├── index3.html └── index5.html ├── html5 canvas游动的水母特效 ├── index.html └── js │ └── jquery.min.js └── 俄罗斯方块 ├── audio └── bg.wav ├── css ├── 4.css └── bootstrap.min.black.css ├── images ├── 1.jpg └── blocks.png ├── index.html ├── js ├── Block.js ├── Board.js ├── Canvas.js ├── Keyboard.js ├── Leval.js ├── Nextshape.js ├── ResourceManager.js ├── Score.js ├── Shape.js ├── Tetris.js ├── Timer.js ├── app.js ├── config.js └── highscore.js ├── vendor └── howler.min.js └── 说明.htm /Canvas星星跟流星背景动画特效/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Canvas星星跟流星背景动画特效 - 站长素材 6 | 7 | 16 | 17 | 18 | 19 | 20 |
21 | 你的浏览器不支持canvas 22 |
23 | 24 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /Canvas梦幻大树生长动画特效/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas梦幻大树生长动画特效/说明.txt -------------------------------------------------------------------------------- /Canvas粒子线条连接动态背景特效/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Canvas粒子线条连接动态背景特效 - A5源码 6 | 7 | 77 | 78 | 79 |
80 |

PLASM.it - 2017

81 |

CONNECTIONS

82 |

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.

不支持Safari、IE8及以下浏览器。


83 |

来源：A5源码

84 |
257 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /Canvas粒子线条连接动态背景特效/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas粒子线条连接动态背景特效/说明.txt -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/1.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/10.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/11.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/2.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/3.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/4.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/5.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/6.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/7.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/9.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/body_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/body_bg.jpg -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/body_bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/body_bg2.jpg -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/cj_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/cj_bg.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/eventDetails.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/eventDetails.jpg -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/jt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/jt.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/jt2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/jt2.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/red5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/red5.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/red6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/red6.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/turnplate-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/turnplate-bg.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/images/turnplate-pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/images/turnplate-pointer.png -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/说明.htm -------------------------------------------------------------------------------- /Canvas自适应宽度大转盘抽奖代码/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas自适应宽度大转盘抽奖代码/说明.txt -------------------------------------------------------------------------------- /Canvas菱角背景动画特效/js/Stats.min.js: -------------------------------------------------------------------------------- 1 | var Stats=function(){function e(e){return n.appendChild(e.dom),e}function t(e){for(var t=0;ti+1e3&&(r.update(1e3*o/(e-i),100),i=e,o=0,c)){var t=performance.memory;c.update(t.usedJSHeapSize/1048576,t.jsHeapSizeLimit/1048576)}return e},update:function(){a=this.end()}}};Stats.Panel=function(e,t,l){var n=1/0,a=0,i=Math.round,o=i(window.devicePixelRatio||1),r=80*o,f=48*o,c=3*o,d=2*o,s=3*o,p=15*o,u=74*o,m=30*o,h=document.createElement("canvas");h.width=r,h.height=f,h.style.cssText="width:80px;height:48px";var S=h.getContext("2d");return S.font="bold "+9*o+"px Helvetica,Arial,sans-serif",S.textBaseline="top",S.fillStyle=l,S.fillRect(0,0,r,f),S.fillStyle=t,S.fillText(e,c,d),S.fillRect(s,p,u,m),S.fillStyle=l,S.globalAlpha=.9,S.fillRect(s,p,u,m),{dom:h,update:function(f,v){n=Math.min(n,f),a=Math.max(a,f),S.fillStyle=l,S.globalAlpha=1,S.fillRect(0,0,r,p),S.fillStyle=t,S.fillText(i(f)+" "+e+" ("+i(n)+"-"+i(a)+")",c,d),S.drawImage(h,s+o,p,u-o,m,s,p,u-o,m),S.fillRect(s+u-o,p,o,m),S.fillStyle=l,S.globalAlpha=.9,S.fillRect(s+u-o,p,o,i((1-f/v)*m))}}},"object"==typeof module&&(module.exports=Stats); -------------------------------------------------------------------------------- /Canvas菱角背景动画特效/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas菱角背景动画特效/说明.txt -------------------------------------------------------------------------------- /Canvas酷炫全屏动态背景动画特效/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: relative; 3 | margin: 0; 4 | overflow: hidden; 5 | } 6 | 7 | .intro-container { 8 | position: absolute; 9 | top: 50%; 10 | transform: translateY(-50%); 11 | color: white; 12 | text-align: center; 13 | margin: 0 auto; 14 | right: 0; 15 | left: 0; 16 | } 17 | 18 | h1 { 19 | font-family: 'brandon-grotesque', sans-serif; 20 | font-weight: bold; 21 | margin-top: 0px; 22 | margin-bottom: 0; 23 | font-size: 20px; 24 | } 25 | @media screen and (min-width: 860px) { 26 | h1 { 27 | font-size: 40px; 28 | line-height: 52px; 29 | } 30 | } 31 | 32 | .fancy-text { 33 | font-family: "adobe-garamond-pro",sans-serif; 34 | font-style: italic; 35 | letter-spacing: 1px; 36 | margin-bottom: 17px; 37 | } 38 | 39 | .button { 40 | position: relative; 41 | cursor: pointer; 42 | display: inline-block; 43 | font-family: 'brandon-grotesque', sans-serif; 44 | text-transform: uppercase; 45 | min-width: 200px; 46 | margin-top: 30px; 47 | } 48 | .button:hover .border { 49 | box-shadow: 0px 0px 10px 0px white; 50 | } 51 | .button:hover .border .left-plane, .button:hover .border .right-plane { 52 | transform: translateX(0%); 53 | } 54 | .button:hover .text { 55 | color: #121212; 56 | } 57 | .button .border { 58 | border: 1px solid white; 59 | transform: skewX(-20deg); 60 | height: 32px; 61 | border-radius: 3px; 62 | overflow: hidden; 63 | position: relative; 64 | transition: .10s ease-out; 65 | } 66 | .button .border .left-plane, .button .border .right-plane { 67 | position: absolute; 68 | background: white; 69 | height: 32px; 70 | width: 100px; 71 | transition: .15s ease-out; 72 | } 73 | .button .border .left-plane { 74 | left: 0; 75 | transform: translateX(-100%); 76 | } 77 | .button .border .right-plane { 78 | right: 0; 79 | transform: translateX(100%); 80 | } 81 | .button .text { 82 | position: absolute; 83 | left: 0; 84 | right: 0; 85 | top: 50%; 86 | transform: translateY(-50%); 87 | transition: .15s ease-out; 88 | } 89 | 90 | .x-mark { 91 | right: 10px; 92 | top: 10px; 93 | position: absolute; 94 | cursor: pointer; 95 | opacity: 0; 96 | } 97 | .x-mark:hover .right { 98 | transform: rotate(-45deg) scaleY(1.2); 99 | } 100 | .x-mark:hover .left { 101 | transform: rotate(45deg) scaleY(1.2); 102 | } 103 | .x-mark .container { 104 | position: relative; 105 | width: 20px; 106 | height: 20px; 107 | } 108 | .x-mark .left, .x-mark .right { 109 | width: 2px; 110 | height: 20px; 111 | background: white; 112 | position: absolute; 113 | border-radius: 3px; 114 | transition: .15s ease-out; 115 | margin: 0 auto; 116 | left: 0; 117 | right: 0; 118 | } 119 | .x-mark .right { 120 | transform: rotate(-45deg); 121 | } 122 | .x-mark .left { 123 | transform: rotate(45deg); 124 | } 125 | 126 | .sky-container { 127 | position: absolute; 128 | color: white; 129 | text-transform: uppercase; 130 | margin: 0 auto; 131 | right: 0; 132 | left: 0; 133 | top: 2%; 134 | text-align: center; 135 | opacity: 0; 136 | } 137 | @media screen and (min-width: 860px) { 138 | .sky-container { 139 | top: 18%; 140 | right: 12%; 141 | left: auto; 142 | } 143 | } 144 | .sky-container__left, .sky-container__right { 145 | display: inline-block; 146 | vertical-align: top; 147 | font-weight: bold; 148 | } 149 | .sky-container__left h2, .sky-container__right h2 { 150 | font-family: 'brandon-grotesque', sans-serif; 151 | font-size: 26px; 152 | line-height: 26px; 153 | margin: 0; 154 | } 155 | @media screen and (min-width: 860px) { 156 | .sky-container__left h2, .sky-container__right h2 { 157 | font-size: 72px; 158 | line-height: 68px; 159 | } 160 | } 161 | .sky-container__left { 162 | margin-right: 5px; 163 | } 164 | .sky-container .thirty-one { 165 | letter-spacing: 4px; 166 | } 167 | 168 | .text-right { 169 | text-align: right; 170 | } 171 | 172 | .text-left { 173 | text-align: left; 174 | } 175 | 176 | .twitter:hover a { 177 | transform: rotate(-45deg) scale(1.05); 178 | } 179 | .twitter:hover i { 180 | color: #21c2ff; 181 | } 182 | .twitter a { 183 | bottom: -40px; 184 | right: -75px; 185 | transform: rotate(-45deg); 186 | } 187 | .twitter i { 188 | bottom: 7px; 189 | right: 7px; 190 | color: #00ACED; 191 | } 192 | 193 | .social-icon a { 194 | position: absolute; 195 | background: white; 196 | color: white; 197 | box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3); 198 | display: inline-block; 199 | width: 150px; 200 | height: 80px; 201 | transform-origin: 50% 50%; 202 | transition: .15s ease-out; 203 | } 204 | .social-icon i { 205 | position: absolute; 206 | pointer-events: none; 207 | z-index: 1000; 208 | transition: .15s ease-out; 209 | } 210 | 211 | .youtube:hover a { 212 | transform: rotate(45deg) scale(1.05); 213 | } 214 | .youtube:hover i { 215 | color: #ec4c44; 216 | } 217 | .youtube a { 218 | bottom: -40px; 219 | left: -75px; 220 | transform: rotate(45deg); 221 | } 222 | .youtube i { 223 | bottom: 7px; 224 | left: 7px; 225 | color: #E62117; 226 | } 227 | -------------------------------------------------------------------------------- /Canvas酷炫全屏动态背景动画特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas酷炫全屏动态背景动画特效 6 | 7 | 8 | 9 | 10 | 239 | 240 | 241 | 242 | 243 | 244 | 245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 | 253 |

ONE WITH AN EVERLASTING DESIRE
FOR THE UNKNOWN & UNTOLD

254 | 255 |
256 |
257 |
258 |
259 |
260 |
To The Stars
261 |
262 |
263 |
264 |
265 |

266 | PORTFOLIO 267 |

268 |

269 | resurrection 270 |

271 |
272 |
273 |

274 | 08 275 |

276 |

277 | 31 278 |

279 |

280 | 2016 281 |

282 |
283 |
284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 |
292 |

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

293 |

来源：A5源码

294 |
295 | 296 | 297 | -------------------------------------------------------------------------------- /Canvas酷炫全屏动态背景动画特效/js/prefixfree.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StyleFix 1.0.3 & PrefixFree 1.0.7 3 | * @author Lea Verou 4 | * MIT license 5 | */(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a 2 | 3 | 4 | 5 | Canvas雪花散开放大动画特效 - A5源码 6 | 7 | 8 | 9 | 23 | 24 | 25 | 26 |
27 | 28 | 218 | 219 |
220 |

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

221 |

来源：A5源码

222 |
223 | 224 | 225 | 226 | -------------------------------------------------------------------------------- /Canvas鼠标箭头跟随动画特效/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 16 | 17 | 18 | 19 | 95 | 96 | -------------------------------------------------------------------------------- /Canvas鼠标箭头跟随动画特效/index.html: -------------------------------------------------------------------------------- 1 |  3 | 4 | 5 | 6 | 86 | 87 | 88 | 漂亮的Canvas鼠标箭头跟随动画特效 89 | 90 | 91 | 92 | 93 | 94 |
95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 |
106 | 206 | 207 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /Canvas鼠标经过星星连成线特效/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 16 | 17 | 18 | 19 | 20 | 63 | 64 | -------------------------------------------------------------------------------- /Canvas鼠标经过星星连成线特效/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 16 | 17 | 18 | 19 | 20 | 111 | 112 | -------------------------------------------------------------------------------- /Canvas鼠标经过星星连成线特效/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/Canvas鼠标经过星星连成线特效/说明.txt -------------------------------------------------------------------------------- /H5lock/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | H5lock-A5源码 7 | 16 | 17 | 18 | 19 | 20 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /H5lock/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/H5lock/说明.htm -------------------------------------------------------------------------------- /HTML5 Canvas岩浆动画背景特效/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | HTML5 Canvas岩浆动画背景特效 - A5源码 6 | 7 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |

The Floor is Lava

62 | 63 | 256 | 257 | 258 | -------------------------------------------------------------------------------- /HTML5 Canvas气泡背景特效/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 | 14 | 15 | 16 | 24 | 25 | -------------------------------------------------------------------------------- /HTML5 Canvas气泡背景特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 Canvas气泡背景特效 - A5源码 8 | 9 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

38 |

来源：A5源码

39 |
40 | 41 | -------------------------------------------------------------------------------- /HTML5 Canvas气泡背景特效/js/background.min.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("load",function(){function e(e,t,n){return n*(t-e)+e}function t(e){return e<0?0:e>1?1:e}function n(e){return Math.random()*(e.max-e.min)+e.min}function o(){return new a(n(g.gradient.hue),n(g.gradient.saturation),n(g.gradient.lightness))}function s(){return f.force||navigator.userAgent.match(/Android/i)||navigator.userAgent.match(/webOS/i)||navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||navigator.userAgent.match(/iPod/i)||navigator.userAgent.match(/BlackBerry/i)||navigator.userAgent.match(/Windows Phone/i)}function a(e,t,n){this.h=e,this.s=t,this.l=n,this.str=function(){return this.h+", "+this.s+"%, "+this.l+"%"}}function r(t,n,o){this.x=t,this.y=n,this.oldColor=o,this.newColor=o,this.step=0,this.speed=0,this.color=function(){return new a(e(this.oldColor.h,this.newColor.h,this.step),e(this.oldColor.s,this.newColor.s,this.step),e(this.oldColor.l,this.newColor.l,this.step))}}function h(t,n,o,i){this.oldX=t,this.oldY=n,this.oldSize=o,this.oldAlpha=i,this.newX=0,this.newY=0,this.newAlpha=0,this.newSize=0,this.step=0,this.speed=0,this.x=function(){return e(this.oldX,this.newX,this.step)},this.y=function(){return e(this.oldY,this.newY,this.step)},this.alpha=function(){return e(this.oldAlpha,this.newAlpha,this.step)},this.size=function(){return e(this.oldSize,this.newSize,this.step)}}function l(e){e.newX=t(e.oldX+n({min:-g.bokeh.jitter.x,max:g.bokeh.jitter.x})),e.newY=t(e.oldY+n({min:-g.bokeh.jitter.y,max:g.bokeh.jitter.y}))}function d(){var e=window.innerWidth,t=window.innerHeight;y=e*g.resolution,z=t*g.resolution,S=Math.sqrt(y*z),p.canvas.width=e,p.canvas.height=t,p.scale(1/g.resolution,1/g.resolution);var n=g.bokeh.size.max*S;b.canvas.width=2*n+1,b.canvas.height=2*n+1,b.fillStyle="rgb(255, 255, 255)",b.beginPath(),b.arc(n,n,n,0,E),b.closePath(),b.fill(),s()&&c()}function u(e,t){var n=0;for(var o in e)t.hasOwnProperty(o)&&0==u(e[o],t[o])&&(t[o]=e[o]),n++;return n}function w(){var e=Date.now();k+=e-(m||e),x++;var t=(e-(m||e))/(1e3/A);m=e,k>1e3&&(C=1e3/(k/x),k-=1e3,x=0),F.forEach(function(e){e.step+=e.speed*t,e.step>=1&&(e.step=0,e.oldColor=e.newColor,e.newColor=o(),e.speed=n(g.speed))}),R.forEach(function(e){e.step+=e.speed*t,e.step>=1&&(e.step=0,e.oldX=e.newX,e.oldY=e.newY,e.oldAlpha=e.newAlpha,e.oldSize=e.newSize,l(e),e.newAlpha=n(g.bokeh.alpha),e.newSize=n(g.bokeh.size),e.speed=n(g.speed))})}function c(){w(),F.forEach(function(e){var t=e.x*g.gradient.resolution,n=e.y*g.gradient.resolution,o=v.createRadialGradient(t,n,g.gradient.smallRadius,t,n,g.gradient.resolution);o.addColorStop(0,"hsla("+e.color().str()+", 255)"),o.addColorStop(1,"hsla("+e.color().str()+", 0)"),v.fillStyle=o,v.fillRect(0,0,g.gradient.resolution,g.gradient.resolution)}),p.globalCompositeOperation="source-over",p.drawImage(v.canvas,0,0,y,z),p.globalCompositeOperation="overlay",g.debug.strokeBokeh&&(p.strokeStyle="yellow"),R.forEach(function(e){var t=e.size()*S;p.globalAlpha=e.alpha(),p.drawImage(b.canvas,e.x()*y-t/2,e.y()*z-t/2,t,t),g.debug.strokeBokeh&&(p.globalAlpha=1,p.globalCompositeOperation="source-over",p.strokeRect(e.x()*y-t/2,e.y()*z-t/2,t,t),p.globalCompositeOperation="overlay")}),p.globalAlpha=1,g.debug.showFps&&(p.fillStyle=C<=10?"red":"yellow",p.font="20px sans-serif",p.fillText(Math.round(C)+" fps",10,20)),window.requestAnimFrame(c)}var m,p=document.getElementById("background").getContext("2d"),g={resolution:1,gradient:{resolution:4,smallRadius:0,hue:{min:0,max:360},saturation:{min:40,max:80},lightness:{min:25,max:35}},bokeh:{count:30,size:{min:.1,max:.3},alpha:{min:.05,max:.4},jitter:{x:.3,y:.3}},speed:{min:1e-4,max:.001},debug:{strokeBokeh:!1,showFps:!1}},f={force:!1,resolution:.5,bokeh:{count:6}},v=document.createElement("canvas").getContext("2d"),b=document.createElement("canvas").getContext("2d"),A=60,k=0,x=0,C=0,y=0,z=0,S=0,E=2*Math.PI;window.requestAnimFrame=function(e){return s()?function(e){window.setTimeout(e,100)}:window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e){window.setTimeout(e,1e3/60)}}();var F=[new r(0,0,new a(196,59,34)),new r(0,1,new a(269,79,32)),new r(1,0,new a(30,42,33)),new r(1,1,new a(304,47,27))],R=[];window.addEventListener("resize",d),function(){for(v.canvas.height=g.gradient.resolution,v.canvas.width=g.gradient.resolution,s()&&u(f,g),d(),F.forEach(function(e){e.oldColor=o(),e.newColor=o(),e.speed=n(g.speed)}),i=0;it+1e3&&(d=Math.round(1e3*s/(r-t)),l=Math.min(l,d),o=Math.max(o,d),h.textContent=d+" FPS ("+l+"-"+o+")",y(f,Math.min(30,30-d/100*30)),t=r,s=0),r},update:function(){e=this.end()}}}; -------------------------------------------------------------------------------- /HTML5 Canvas粒子数字时钟特效/说明.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 Canvas粒子数字时钟特效/说明.txt -------------------------------------------------------------------------------- /HTML5 Canvas粒子文字特效 /index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | HTML5 Canvas粒子文字特效 - A5源码 6 | 7 | 38 | 39 | 40 |
41 | 42 | 45 |
46 | 47 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /HTML5 Canvas赛车游戏动画/css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /HTML5 Canvas赛车游戏动画/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #F8F3A9; 3 | margin: 0; 4 | display: -webkit-box; 5 | display: -webkit-flex; 6 | display: -ms-flexbox; 7 | display: flex; 8 | -webkit-box-align: center; 9 | -webkit-align-items: center; 10 | -ms-flex-align: center; 11 | align-items: center; 12 | -webkit-box-pack: center; 13 | -webkit-justify-content: center; 14 | -ms-flex-pack: center; 15 | justify-content: center; 16 | min-height: 100vh; 17 | } 18 | 19 | canvas { 20 | border-radius: .4em; 21 | } 22 | -------------------------------------------------------------------------------- /HTML5 Canvas赛车游戏动画/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 Canvas赛车游戏动画 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

来源:A5源码

21 |
22 | 23 | -------------------------------------------------------------------------------- /HTML5 canvas写字板涂鸦画板/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 你画我猜 6 | 7 | 8 | 45 | 46 | 47 |
48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 | 58 |
59 |
60 | 61 |
62 |
63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 |
72 | 73 |
74 |
75 |
76 |

更多源码：A5源码

77 |
78 | 79 | -------------------------------------------------------------------------------- /HTML5 canvas写字板涂鸦画板/js/huabu.js: -------------------------------------------------------------------------------- 1 | var canvas;//定义全局画布 2 | var context;//定义全局context 3 | var img1=[];//储存图像数组，用于撤销 4 | var canX;//画布左上角的x坐标 5 | var canY;//画布左上角y坐标 6 | $(function(){ 7 | canvas = $('#cavs')[0];//获取画布的dom 8 | context = canvas.getContext('2d');//获取context 9 | canX=canvas.offsetLeft;//获取画布左上角的x坐标 10 | canY=canvas.offsetTop;//获取画布左上角的y坐标 11 | // var imgData=context.getImageData(0,0,canvas.width,canvas.height); 12 | // img1.push(imgData); 13 | var paint=Object.create(Line);//定义父类，初始化获取画线条的对象 14 | context.lineCap="round";//线条起始和结尾样式 15 | context.lineJoin="round";//线条转弯样式 16 | $('#Line').click(function(event) {//点击线条按钮，获取线条对象 17 | context.lineWidth = $('#thickness').val(); 18 | paint=Object.create(Line); 19 | context.strokeStyle = $("#color").val(); 20 | console.log(paint); 21 | }); 22 | $('#xpc').click(function(event) { 23 | context.lineWidth = $('#thickness').val(); 24 | paint=Object.create(xpc); 25 | context.strokeStyle = "#FFF"; 26 | console.log(paint); 27 | }); 28 | $('#qingping').click(function(event) { 29 | context.clearRect(0,0,canvas.width,canvas.height); 30 | //context的clearRect方法 31 | }); 32 | $('#chexiao').click(function() { 33 | context.putImageData(img1.pop(),0,0); 34 | }); 35 | paint.draw(); 36 | $("#xiazai").click(function(event) { 37 | xiazai.draw(); 38 | }); 39 | }); 40 | var Line={ 41 | name:"line", 42 | draw:function(){ 43 | var painting = false;//初始化设置为不可画状态 44 | var p_x;//画笔初始x坐标 45 | var p_y;//画笔初始y坐标 46 | // var canvas = $('#cavs')[0];//获取画布的dom 47 | // var context = canvas.getContext('2d');//获取绘制2d图形的context 48 | //初始化画笔颜色 49 | console.log(context.strokeStyle); 50 | $('#cavs').mousemove(function(e){//当鼠标在画布上移动时执行 51 | if(painting===true){//判断是否是可绘画状态 52 | var x = e.pageX;//鼠标当前x坐标 53 | var y = e.pageY;//鼠标当前y坐标 54 | context.lineTo(x-canX,y-canY);//确定线的结束位置，canvas.offsetLeft画板离浏览器左侧的距离，canvas.offsetTop画板离浏览器上部的距离 55 | context.stroke(); 56 | } 57 | }); 58 | $('#cavs').mousedown(function(e){//当鼠标按下时触发 59 | painting = true;//鼠标按下可以作画 60 | p_x = e.pageX;//画笔起始x坐标 61 | p_y = e.pageY;//画笔起始y坐标 62 | context.beginPath();//开始作画 63 | context.moveTo(p_x-canX,p_y-canY);//画笔开始位置 64 | $('#cavs').css('cursor','pointer');//将鼠标图形设置成小手 65 | //复制图像，为了撤销 66 | var imgData=context.getImageData(0,0,canvas.width,canvas.height); 67 | //加入数组 68 | img1.push(imgData); 69 | }); 70 | $('#cavs').mouseup(function(e){ 71 | painting = false;//鼠标松开，禁止作画 72 | context.closePath();//关闭画笔路径 73 | $('#cavs').css('cursor','');//消除鼠标小手 74 | 75 | }); 76 | $('#cavs').mouseleave(function(e){//鼠标移出时，禁止作画 77 | painting = false; 78 | context.closePath(); 79 | $('#cavs').css('cursor','');//消除鼠标小手 80 | }); 81 | $("#color").change(function(event) {//当颜色改变时触发 82 | context.strokeStyle = $(this).val();//改变画笔颜色 83 | }); 84 | $("#cuxi").change(function(event) { 85 | context.lineWidth = $(this).val(); 86 | }); 87 | } 88 | } 89 | var xpc={ 90 | name:"xpc", 91 | draw:function(){ 92 | var painting = false;//初始化设置为不可画状态 93 | var p_x;//画笔初始x坐标 94 | var p_y;//画笔初始y坐标 95 | console.log(context.strokeStyle); 96 | ontext.lineWidth = $("#cuxi").val(); 97 | $('#cavs').mousemove(function(e){//当鼠标在画布上移动时执行 98 | if(painting===true){//判断是否是可绘画状态 99 | var x = e.pageX;//鼠标当前x坐标 100 | var y = e.pageY;//鼠标当前y坐标 101 | context.lineTo(x-canX,y-canY);//确定线的结束位置，canvas.offsetLeft画板离浏览器左侧的距离，canvas.offsetTop画板离浏览器上部的距离 102 | context.stroke(); 103 | } 104 | }); 105 | $('#cavs').mousedown(function(e){//当鼠标按下时触发 106 | painting = true;//鼠标按下可以作画 107 | p_x = e.pageX;//画笔起始x坐标 108 | p_y = e.pageY;//画笔起始y坐标 109 | context.beginPath();//开始作画 110 | context.moveTo(p_x-canX,p_y-canY);//画笔开始位置 111 | $('#cavs').css('cursor','pointer');//将鼠标图形设置成小手 112 | //复制图像，为了撤销 113 | var imgData=context.getImageData(0,0,canvas.width,canvas.height); 114 | //加入数组 115 | img1.push(imgData); 116 | }); 117 | $('#cavs').mouseup(function(e){ 118 | painting = false;//鼠标松开，禁止作画 119 | context.closePath();//关闭画笔路径 120 | $('#cavs').css('cursor','');//消除鼠标小手 121 | }); 122 | $('#cavs').mouseleave(function(e){//鼠标移出时，禁止作画 123 | painting = false; 124 | context.closePath(); 125 | }); 126 | $("#cuxi").change(function(event) {//修改粗细时，进行赋值 127 | context.lineWidth = $(this).val(); 128 | }); 129 | } 130 | } 131 | 132 | var xiazai={ 133 | draw:function(){ 134 | // 保存图片，下载到本地 135 | var type = 'png'; 136 | var imgData = $('#cavs')[0].toDataURL(type); 137 | /** 138 | * 获取mimeType 139 | * @param {String} type the old mime-type 140 | * @return the new mime-type 141 | */ 142 | var _fixType = function(type) { 143 | type = type.toLowerCase().replace(/jpg/i, 'jpeg'); 144 | var r = type.match(/png|jpeg|bmp|gif/)[0]; 145 | return 'image/' + r; 146 | }; 147 | // 加工image data，替换mime type 148 | imgData = imgData.replace(_fixType(type),'image/octet-stream'); 149 | /** 150 | * 在本地进行文件保存 151 | * @param {String} data 要保存到本地的图片数据 152 | * @param {String} filename 文件名 153 | */ 154 | var saveFile = function(data, filename){ 155 | var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); 156 | save_link.href = data; 157 | save_link.download = filename; 158 | 159 | var event = document.createEvent('MouseEvents'); 160 | // initMouseEvent()方法参数解释在 http://blog.sina.com.cn/s/blog_3e9b01a50100leyj.html 161 | event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 162 | save_link.dispatchEvent(event); 163 | }; 164 | // 下载后的文件名 165 | var filename = 'xiaoguangren' + (new Date()).getTime() + '.' + type; 166 | // download 167 | saveFile(imgData,filename); 168 | } 169 | } -------------------------------------------------------------------------------- /HTML5 canvas制作海浪动画效果/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas制作海浪动画效果/css/style.css -------------------------------------------------------------------------------- /HTML5 canvas制作海浪动画效果/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 canvas制作海浪动画效果_A5源码 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 啊哦，你的浏览器不支持canvas. sorry~ 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 |
22 |

来源:A5源码

23 |
24 | 25 | -------------------------------------------------------------------------------- /HTML5 canvas制作海浪动画效果/js/ctx.js: -------------------------------------------------------------------------------- 1 | var canvas,ctx; 2 | var vertexes = []; 3 | var diffPt = [];var autoDiff = 1000; 4 | var verNum = 250; 5 | var canvasW = window.innerWidth+40; 6 | var addListener = function( e, str, func ) { 7 | if( e.addEventListener ) { 8 | e.addEventListener( str, func, false ); 9 | }else if( e.attachEvent ) { 10 | e.attachEvent( "on" + str, func ); 11 | }else { 12 | 13 | } 14 | }; 15 | 16 | addListener( window, "load", init ); 17 | 18 | function resize(){ 19 | canvasW = document.getElementById('container').offsetWidth + 40; initCanvas(canvasW,window.innerHeight); 20 | var cW = canvas.width; 21 | var cH = canvas.height; 22 | for(var i = 0;i < verNum;i++) 23 | vertexes[i] = new Vertex(cW / (verNum -1) * i , cH / 2,cH/2); 24 | initDiffPt(); 25 | var win_3 = window.innerWidth/3; 26 | 27 | } 28 | function init(){ 29 | resize(); 30 | var FPS =30; 31 | var interval = 1000 / FPS >> 0; 32 | var timer = setInterval( update, interval ); 33 | if ( window.addEventListener ) addListener( window, "DOMMouseScroll", wheelHandler ); 34 | addListener( window, "mousewheel", wheelHandler ); 35 | addListener(window,"resize",resize); 36 | 37 | canvas.onmousedown=function(e) 38 | { 39 | //div.innerHTML=e.clientX+":"+e.clientY; 40 | //var mx = document.getElementById("mx"); 41 | 42 | //alert(1); 43 | var mouseX,mouseY; 44 | if (e) { 45 | mouseX = e.pageX; 46 | mouseY = e.pageY; 47 | }else { 48 | mouseX = event.x + document.body.scrollLeft; 49 | mouseY = event.y + document.body.scrollTop; 50 | } 51 | 52 | 53 | if(window.innerHeight/2 - mouseY < 50 && window.innerHeight/2 - mouseY> -50) 54 | //diffPt[150] = autoDiff; 55 | { 56 | autoDiff = 1000; 57 | if(mouseX 0 ? ( dd > 15 ? dd-- : dd=dd) : ( dd < 50 ? dd++ : dd=dd ); 70 | }; 71 | 72 | function initDiffPt(){ 73 | for(var i=0;i0;i--) 89 | { 90 | var d = xx-i; 91 | if(d > dd)d=dd; 92 | diffPt[i] -= (diffPt[i]-diffPt[i+1])*(1-0.01*d); 93 | } 94 | //右侧 95 | for(var i=xx+1;i dd)d=dd; 99 | diffPt[i] -= (diffPt[i]-diffPt[i-1])*(1-0.01*d); 100 | } 101 | 102 | //更新点Y坐标 103 | for(var i = 0;i < vertexes.length;i++){ 104 | vertexes[i].updateY(diffPt[i]); 105 | } 106 | 107 | draw(); 108 | 109 | } 110 | var color1="#6ca0f6"; 111 | var color2 = "#367aec"; 112 | function draw(){ 113 | ctx.beginPath(); 114 | ctx.moveTo(0,window.innerHeight); 115 | ctx.fillStyle=color1; 116 | ctx.lineTo(vertexes[0].x,vertexes[0].y); 117 | for(var i = 1;i < vertexes.length;i++){ 118 | ctx.lineTo(vertexes[i].x,vertexes[i].y); 119 | } 120 | ctx.lineTo(canvas.width,window.innerHeight); 121 | ctx.lineTo(0,window.innerHeight); 122 | ctx.fill(); 123 | 124 | ctx.beginPath(); 125 | ctx.moveTo(0,window.innerHeight); 126 | ctx.fillStyle=color2; 127 | ctx.lineTo(vertexes[0].x+15,vertexes[0].y+5); 128 | for(var i = 1;i < vertexes.length;i++){ 129 | ctx.lineTo(vertexes[i].x+15,vertexes[i].y+5); 130 | } 131 | ctx.lineTo(canvas.width,window.innerHeight); 132 | ctx.lineTo(0,window.innerHeight); 133 | ctx.fill(); 134 | 135 | ctx.fillStyle="#777"; 136 | ctx.font="12px sans-serif"; 137 | ctx.textBaseline="top"; 138 | ctx.fillText("点击该液体的表面",70,canvas.height/2-20); 139 | ctx.fillStyle="#fff"; 140 | ctx.fillText("用鼠标滚轮来改变粘度",70,canvas.height/2+15); 141 | ctx.fillText("滚轮改变粘稠度 / Viscosity: "+((dd-15)*20/7).toFixed(2)+"%",70,canvas.height-20); 142 | } 143 | function initCanvas(width,height){ 144 | canvas = document.getElementById("canvas"); 145 | canvas.width = width; 146 | canvas.height = height; 147 | ctx = canvas.getContext("2d"); 148 | } 149 | 150 | function Vertex(x,y,baseY){ 151 | this.baseY = baseY; 152 | this.x = x; 153 | this.y = y; 154 | this.vy = 0; 155 | this.targetY = 0; 156 | this.friction = 0.15; 157 | this.deceleration = 0.95; 158 | } 159 | 160 | Vertex.prototype.updateY = function(diffVal){ 161 | this.targetY = diffVal + this.baseY; 162 | this.vy += this.targetY - this.y 163 | this.y += this.vy * this.friction; 164 | this.vy *= this.deceleration; 165 | } 166 | var blue = function(){ 167 | color1 = "#6ca0f6"; 168 | color2 = "#367aec"; 169 | } 170 | var black = function(){ 171 | color1 = "#595959"; 172 | color2 = "#000000"; 173 | } 174 | 175 | var purple = function(){ 176 | color1 = "#ff92ec"; 177 | color2 = "#f727d2"; 178 | } -------------------------------------------------------------------------------- /HTML5 canvas制作海浪动画效果/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas制作海浪动画效果/说明.htm -------------------------------------------------------------------------------- /HTML5 canvas扑克牌花式洗牌动画/demo.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 简单卡动画 6 | 7 | 8 | 9 | 22 | 23 | 24 |
25 | 26 | 176 |
177 |

A5源码

178 |
179 | 180 | 181 | -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 20px; 3 | padding: 0; 4 | margin: 0; 5 | font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif; 6 | } 7 | 8 | .text-intro { 9 | position: relative; 10 | margin: 0 auto 50px auto; 11 | text-align: center; 12 | max-width: 600px; 13 | } 14 | 15 | .max-width { 16 | position: relative; 17 | margin: 0 auto; 18 | max-width: 600px; 19 | } 20 | 21 | .code { 22 | background-color: #e5e5e5; 23 | border-radius: 10px; 24 | } 25 | 26 | /* Scratch */ 27 | .scratch_container { 28 | position: relative; 29 | margin: 0 auto; 30 | max-width: 1024px; 31 | } 32 | 33 | .scratch_viewport { 34 | position: relative; 35 | max-width: 250px; 36 | max-height: 250px; 37 | margin: 0 auto; 38 | z-index: 0; 39 | } 40 | 41 | .scratch_picture-under { 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | width: 100%; 46 | display: block; 47 | z-index: -1; 48 | } 49 | 50 | .scratch_container canvas { 51 | position: relative; 52 | width: 100%; 53 | height: auto; 54 | z-index: 1; 55 | } -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/foreground.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/foreground.jpg -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/loose.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/loose.jpg -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/piece.cur: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/piece.cur -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/piece.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/piece.png -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/scratch-over.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/scratch-over.jpg -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/images/win.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas移动端手机刮刮卡代码/images/win.jpg -------------------------------------------------------------------------------- /HTML5 canvas移动端手机刮刮卡代码/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 canvas移动端手机刮刮卡代码 - A5源码 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

在这个例子中，当你刮开90%的面积时，回调函数就会被执行。

16 |
17 |
18 | 19 |
20 |
21 |
22 | 23 | 24 | 46 | 47 | 56 | 57 | 58 |
59 |

来源:A5源码

60 |
61 | 62 | -------------------------------------------------------------------------------- /HTML5 canvas简单五子棋小游戏/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | HTML5 canvas简单五子棋小游戏 5 | 6 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

来源:A5源码

19 |
20 | 21 | 231 | -------------------------------------------------------------------------------- /HTML5 canvas简单五子棋小游戏/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas简单五子棋小游戏/说明.htm -------------------------------------------------------------------------------- /HTML5 canvas绘制七巧板代码/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas绘制七巧板代码/index.html -------------------------------------------------------------------------------- /HTML5 canvas绘制七巧板代码/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/HTML5 canvas绘制七巧板代码/说明.htm -------------------------------------------------------------------------------- /HTML5 canvas网页背景生成器/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body { 4 | font-family: "Vidaloka", serif; 5 | font-smoothing: antialiased; 6 | font-weight: normal; 7 | background: #151618; 8 | color: #FFF; 9 | margin: 0; 10 | } 11 | 12 | h1 { 13 | text-transform: uppercase; 14 | letter-spacing: 4px; 15 | font-weight: normal; 16 | font-size: 16px; 17 | } 18 | 19 | p { 20 | line-height: 1.6em; 21 | text-align: center; 22 | font-size: 14px; 23 | } 24 | 25 | p + p { 26 | margin-top: 1.0em; 27 | } 28 | 29 | a { 30 | transition: color 0.2s ease-out; 31 | text-decoration: none; 32 | color: #FBB; 33 | } 34 | 35 | a:hover { 36 | color: #444; 37 | } 38 | 39 | .overlay { 40 | pointer-events: none; 41 | position: absolute; 42 | height: 100%; 43 | width: 100%; 44 | left: 0; 45 | top: 0; 46 | } 47 | 48 | .container { 49 | position: absolute; 50 | height: 100%; 51 | width: 100%; 52 | } 53 | 54 | 55 | .controls { 56 | font-smoothing: subpixel-antialiased; 57 | position: absolute; 58 | right: 20px; 59 | top: 0; 60 | 61 | } 62 | 63 | .links { 64 | position: absolute; 65 | list-style: none; 66 | width: 120px; 67 | bottom: 40px; 68 | right: 20px; 69 | padding: 0; 70 | margin: 0; 71 | 72 | } 73 | 74 | .links p{ 75 | font-smoothing: subpixel-antialiased; 76 | font-family: 'Dosis', sans-serif; 77 | text-transform: uppercase; 78 | text-align: center; 79 | padding: 0.25em 0; 80 | letter-spacing: 2px; 81 | font-weight: 200; 82 | font-size: 10px; 83 | display: block; 84 | width: 100%; 85 | opacity: 0.6; 86 | color: #FFF; 87 | } 88 | 89 | .links li { 90 | border-bottom: #222 1px solid; 91 | border-bottom: rgba(255,255,255,0.1) 1px solid; 92 | } 93 | 94 | .links li a { 95 | transition: opacity 0.2s ease-out; 96 | font-smoothing: subpixel-antialiased; 97 | font-family: 'Dosis', sans-serif; 98 | text-transform: uppercase; 99 | text-align: right; 100 | padding: 0.25em 0; 101 | letter-spacing: 2px; 102 | font-weight: 200; 103 | font-size: 12px; 104 | display: block; 105 | width: 100%; 106 | opacity: 0.4; 107 | color: #FFF; 108 | } 109 | 110 | .links li a:hover { 111 | opacity: 0.8; 112 | } 113 | 114 | .links li .who:before { 115 | opacity: 0.5; 116 | content: '@'; 117 | float: left; 118 | } 119 | 120 | .links li .source:before { 121 | opacity: 0.5; 122 | content: '{}'; 123 | float: left; 124 | } 125 | 126 | .links li .blog:before { 127 | opacity: 0.5; 128 | content: '&'; 129 | float: left; 130 | } 131 | 132 | .hide { 133 | opacity: 0; 134 | } -------------------------------------------------------------------------------- /HTML5 canvas网页背景生成器/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML5 canvas网页背景生成器 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 | 19 | 20 |
21 |

来源:A5源码

22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /HTML5 canvas高通量能量线条动画/demo.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 通量 6 | 7 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

长按任意键

47 | 48 | 152 |
153 |

更多源码：A5源码

154 |
155 | 156 | 157 | -------------------------------------------------------------------------------- /canvas1-loading/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #000; 3 | } 4 | 5 | img { 6 | display: block; 7 | float: left; 8 | margin: 0 1px 0 0; 9 | } 10 | 11 | canvas { 12 | background: #131c35 linear-gradient(#192853, #131c35); 13 | display: block; 14 | float: left; 15 | 16 | /* uncomment to test overlay */ 17 | 18 | /* 19 | position: absolute; 20 | left: 0; 21 | opacity: .5; 22 | top: 0; 23 | */ 24 | 25 | } -------------------------------------------------------------------------------- /canvas1-loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas 发光loading动画 6 | 7 | 8 | 9 | 10 | 11 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /canvas1-loading/js/index.js: -------------------------------------------------------------------------------- 1 | /* super inefficient right now, could be improved */ 2 | var c = document.getElementById('c'), 3 | ctx = c.getContext('2d'), 4 | cw = c.width = 1000, 5 | ch = c.height = 600, 6 | rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);}, 7 | dToR = function(degrees){ 8 | return degrees * (Math.PI / 180); 9 | }, 10 | circle = { 11 | x: (cw / 2) + 5, 12 | y: (ch / 2) + 22, 13 | radius: 90, 14 | speed: 2, 15 | rotation: 0, 16 | angleStart: 270, 17 | angleEnd: 90, 18 | hue: 220, 19 | thickness: 18, 20 | blur: 25 21 | }, 22 | particles = [], 23 | particleMax = 100, 24 | updateCircle = function(){ 25 | if(circle.rotation < 360){ 26 | circle.rotation += circle.speed; 27 | } else { 28 | circle.rotation = 0; 29 | } 30 | }, 31 | renderCircle = function(){ 32 | ctx.save(); 33 | ctx.translate(circle.x, circle.y); 34 | ctx.rotate(dToR(circle.rotation)); 35 | ctx.beginPath(); 36 | ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true); 37 | ctx.lineWidth = circle.thickness; 38 | ctx.strokeStyle = gradient1; 39 | ctx.stroke(); 40 | ctx.restore(); 41 | }, 42 | renderCircleBorder = function(){ 43 | ctx.save(); 44 | ctx.translate(circle.x, circle.y); 45 | ctx.rotate(dToR(circle.rotation)); 46 | ctx.beginPath(); 47 | ctx.arc(0, 0, circle.radius + (circle.thickness/2), dToR(circle.angleStart), dToR(circle.angleEnd), true); 48 | ctx.lineWidth = 2; 49 | ctx.strokeStyle = gradient2; 50 | ctx.stroke(); 51 | ctx.restore(); 52 | }, 53 | renderCircleFlare = function(){ 54 | ctx.save(); 55 | ctx.translate(circle.x, circle.y); 56 | ctx.rotate(dToR(circle.rotation+185)); 57 | ctx.scale(1,1); 58 | ctx.beginPath(); 59 | ctx.arc(0, circle.radius, 30, 0, Math.PI *2, false); 60 | ctx.closePath(); 61 | var gradient3 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 30); 62 | gradient3.addColorStop(0, 'hsla(330, 50%, 50%, .35)'); 63 | gradient3.addColorStop(1, 'hsla(330, 50%, 50%, 0)'); 64 | ctx.fillStyle = gradient3; 65 | ctx.fill(); 66 | ctx.restore(); 67 | }, 68 | renderCircleFlare2 = function(){ 69 | ctx.save(); 70 | ctx.translate(circle.x, circle.y); 71 | ctx.rotate(dToR(circle.rotation+165)); 72 | ctx.scale(1.5,1); 73 | ctx.beginPath(); 74 | ctx.arc(0, circle.radius, 25, 0, Math.PI *2, false); 75 | ctx.closePath(); 76 | var gradient4 = ctx.createRadialGradient(0, circle.radius, 0, 0, circle.radius, 25); 77 | gradient4.addColorStop(0, 'hsla(30, 100%, 50%, .2)'); 78 | gradient4.addColorStop(1, 'hsla(30, 100%, 50%, 0)'); 79 | ctx.fillStyle = gradient4; 80 | ctx.fill(); 81 | ctx.restore(); 82 | }, 83 | createParticles = function(){ 84 | if(particles.length < particleMax){ 85 | particles.push({ 86 | x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness), 87 | y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-85))) + (rand(0, circle.thickness*2) - circle.thickness), 88 | vx: (rand(0, 100)-50)/1000, 89 | vy: (rand(0, 100)-50)/1000, 90 | radius: rand(1, 6)/2, 91 | alpha: rand(10, 20)/100 92 | }); 93 | } 94 | }, 95 | updateParticles = function(){ 96 | var i = particles.length; 97 | while(i--){ 98 | var p = particles[i]; 99 | p.vx += (rand(0, 100)-50)/750; 100 | p.vy += (rand(0, 100)-50)/750; 101 | p.x += p.vx; 102 | p.y += p.vy; 103 | p.alpha -= .01; 104 | 105 | if(p.alpha < .02){ 106 | particles.splice(i, 1) 107 | } 108 | } 109 | }, 110 | renderParticles = function(){ 111 | var i = particles.length; 112 | while(i--){ 113 | var p = particles[i]; 114 | ctx.beginPath(); 115 | ctx.fillRect(p.x, p.y, p.radius, p.radius); 116 | ctx.closePath(); 117 | ctx.fillStyle = 'hsla(0, 0%, 100%, '+p.alpha+')'; 118 | } 119 | }, 120 | clear = function(){ 121 | ctx.globalCompositeOperation = 'destination-out'; 122 | ctx.fillStyle = 'rgba(0, 0, 0, .1)'; 123 | ctx.fillRect(0, 0, cw, ch); 124 | ctx.globalCompositeOperation = 'lighter'; 125 | } 126 | loop = function(){ 127 | clear(); 128 | updateCircle(); 129 | renderCircle(); 130 | renderCircleBorder(); 131 | renderCircleFlare(); 132 | renderCircleFlare2(); 133 | createParticles(); 134 | updateParticles(); 135 | renderParticles(); 136 | } 137 | 138 | /* Append Canvas */ 139 | //document.body.appendChild(c); 140 | 141 | /* Set Constant Properties */ 142 | ctx.shadowBlur = circle.blur; 143 | ctx.shadowColor = 'hsla('+circle.hue+', 80%, 60%, 1)'; 144 | ctx.lineCap = 'round' 145 | 146 | var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius); 147 | gradient1.addColorStop(0, 'hsla('+circle.hue+', 60%, 50%, .25)'); 148 | gradient1.addColorStop(1, 'hsla('+circle.hue+', 60%, 50%, 0)'); 149 | 150 | var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius); 151 | gradient2.addColorStop(0, 'hsla('+circle.hue+', 100%, 50%, 0)'); 152 | gradient2.addColorStop(.1, 'hsla('+circle.hue+', 100%, 100%, .7)'); 153 | gradient2.addColorStop(1, 'hsla('+circle.hue+', 100%, 50%, 0)'); 154 | 155 | /* Loop It, Loop It Good */ 156 | setInterval(loop, 16); -------------------------------------------------------------------------------- /canvas2-xjx-line/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 相交线 6 | 7 | 18 | 19 | 20 | 21 | 22 | 23 | 172 |
173 |

A5源码

174 |
175 | 176 | 177 | -------------------------------------------------------------------------------- /canvas3-Snake/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Retro Snaker 6 | 26 | 27 | 28 | 29 | 30 | 36 |
37 |

来源:A5源码

38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /canvas3-Snake/js/RetroSnaker.min.js: -------------------------------------------------------------------------------- 1 | var Game=(()=>{"use strict";function m(){a.clearRect(0,0,g,h),a.fillStyle="white",a.font=2*h/15+"px Lucida Console",a.fillText("You are Dead!",g/6,h/2,2*g/3),a.font=1*h/25+"px Lucida Console",a.fillStyle="#ccc",a.fillText("History High Score:"+j,6.5*g/20,5*h/8,2*g/5),a.fillText('Press "Enter" to Restart',3*g/10,11*h/15,2*g/5)}function n(b){b.preventDefault();var c=b.keyCode||b.which,d=p(l.difficulty),j=37==c||38==c||39==c||40==c;j&&(f&&(clearTimeout(e),clearTimeout(f)),x.publish("Dir-change",c),2==Math.abs(i-c)&&(c=i),f=setTimeout(function b(){var f=y.pos,i=z.pos;e=setTimeout(b,d),a.clearRect(0,0,g,h),x.publish("Game-rendering",{f:f,s:i,code:c})},50))}function o(b,c,d,e){a.beginPath(),a.arc(b+.5*d,c+.5*d,.5*d,0,2*Math.PI),a.fillStyle=e,a.fill()}function p(a){switch(a){case"easy":return 150;case"hard":return 70;case"hell":return 50;default:case"normal":return 100}}function q(e,f,i,j,k,m){var o=document.getElementById(e);l.difficulty=j||l.difficulty,g=f||500,h=i||500,a=o.getContext("2d"),d=Math.floor(h/20),b=Math.floor(g/d),c=Math.floor(h/d),o.width=b*d,o.height=c*d,z.color=k||l.snakeColor,y.color=m||l.foodColor,y.score=0,document.removeEventListener("keyup",u),document.addEventListener("keyup",n),x.publish("Game-init",{d:d,ctx:a,xCount:b,yCount:c})}function r(){k=!1,document.removeEventListener("keyup",n),clearTimeout(e),clearTimeout(f),a.clearRect(0,0,g,h),x.publish("Game-over"),document.addEventListener("keyup",u)}function s(a){if("number"==typeof a[0]){var b=a[0]*d,c=a[1]*d;o(b,c,d,y.color)}else"object"==typeof a[0]?a.forEach((a=>{var b=a[0]*d,c=a[1]*d;o(b,c,d,z.color)})):console.error("You enter a wrong arr!")}function t(a){var b=Math.floor(Math.random()*a);return b}function u(a){13==a.keyCode&&(q("canvas",g,h,l.difficulty,l.snakeColor,l.foodColor),x.publish("Game-init"))}function v(){var b="Score:"+y.score;a.fillStyle="#ccc",a.font="20px Lucida Console",a.fillText(b,d,d)}function w(){a.clearRect(0,0,g,h),a.fillStyle="white",a.font=2*h/15+"px Lucida Console",a.fillText("Retro Snaker",g/6,h/2,2*g/3),a.font=1*h/25+"px Lucida Console",a.fillText('Press "↑ ↓ ← →" to Start',3*g/10,11*h/15,2*g/5)}var a,b,c,d,e,f,g,h,i,j=window.localStorage.highScore||0,k=!0,l={snakeColor:"red",foodColor:"blue",difficulty:"easy"},x=function(){var a={},b=a.hasOwnProperty;return{subscrible:(c,d)=>{b.call(a,c)||(a[c]=[]);a[c].push(d)-1;return{remove:function(b){delete a[c][b]}}},publish:(c,d)=>{b.call(a,c)&&a[c].forEach(function(a){a(void 0!=d?d:{})})}}}(),y={pos:[],score:0,init:function(){var a=this.pos;a[0]=t(b),a[1]=t(c),this.initCheck(a,z.pos),console.log("Init Food Successed!")},initCheck:function(a,b){if(void 0!=b)for(let c of b)a[0]==c[0]&&a[1]==c[1]&&(console.info("Prevent success!"),this.init())},collideCheck:function(a,b){var c=b[b.length-1];c[0]==a[0]&&c[1]==a[1]&&(this.score+=1,x.publish("Get-score",this.score),j=j>this.score?j:this.score,window.localStorage.highScore=j,y.init(),b.unshift(a))}},z={pos:[],initLength:4,init:function(){var a=[],d=this.initLength;a[0]=[],a[0][0]=t(b-1.2*d),a[0][1]=t(c-1.2*d);for(var e=a.length;e=b||a[1]<0||a[1]>=c;if(e)return void r();for(let f of d)if(d.indexOf(f)!=d.length-1&&f[0]==a[0]&&f[1]==a[1])return void r()}};return x.subscrible("Game-rendering",function(a){var b=a.f,c=a.s,d=a.code;s(b),s(z.move(d)),y.collideCheck(b,c),z.collideCheck(c[c.length-1],c),v()}),x.subscrible("Game-init",function(){k&&w(),z.init(),y.init()}),x.subscrible("Game-over",m),{init:q,addons:x.subscrible}})(); -------------------------------------------------------------------------------- /canvas4-paperdrop/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Canvas五彩纸屑飘落动画特效 6 | 7 | 12 | 13 | 14 | 15 | 16 | 205 | 206 | 207 | 208 | 209 | 210 | -------------------------------------------------------------------------------- /canvas5-rainbow/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | overflow: hidden; 3 | margin: 0; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | .c { 9 | background: black; 10 | } 11 | -------------------------------------------------------------------------------- /canvas5-rainbow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | canvas彩虹波动动画 6 | 7 | 9 | 10 | 11 | 24 | 25 | 26 | 27 | 28 | 29 | canvas彩虹波动动画 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /canvas5-rainbow/js/index.js: -------------------------------------------------------------------------------- 1 | var c = document.querySelector('.c') /* canvas element */, 2 | w /* canvas width */, h /* canvas height */, 3 | ctx = c.getContext('2d') /* canvas context */, 4 | 5 | /* previous & current coordinates */ 6 | x0, y0, x, y, 7 | t = 0, t_step = 1/20, 8 | tmp, 9 | 10 | /* just me being lazy */ 11 | exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 12 | PI = Math.PI, sin = Math.sin, cos = Math.cos; 13 | 14 | 15 | /* FUNCTIONS */ 16 | /* a random number between min & max */ 17 | var rand = function(max, min) { 18 | var b = (max === 0 || max) ? max : 1, a = min || 0; 19 | 20 | return a + (b - a)*Math.random(); 21 | }; 22 | 23 | var trimUnit = function(input_str, unit) { 24 | return parseInt(input_str.split(unit)[0], 10); 25 | }; 26 | 27 | var initCanvas = function() { 28 | var s = getComputedStyle(c); 29 | 30 | w = c.width = trimUnit(s.width, 'px'); 31 | h = c.height = trimUnit(s.height, 'px'); 32 | }; 33 | 34 | var wave = function() { 35 | x0 = -1, y0 = h/2; 36 | 37 | ctx.clearRect(0, 0, w, h); 38 | 39 | tmp = pow(t, 1.75)/19; /* keep computation out of loop */ 40 | 41 | for(x = 0; x < w; x = x + 3) { 42 | y = 9*sqrt(x)*sin(x/23/PI + t/3 + sin(x/29 + t)) + 43 | 32*sin(t)*cos(x/19 + t/7) + 44 | 16*cos(t)*sin(sqrt(x) + rand(3, 2)*tmp) + h/2; 45 | 46 | ctx.beginPath(); 47 | ctx.moveTo(x0, y0); 48 | ctx.lineTo(x, y); 49 | ctx.lineWidth = 2; 50 | ctx.strokeStyle = 'hsl(' + (2*x/w + t)*180 + ', 100%, 65%)'; 51 | ctx.stroke(); 52 | 53 | x0 = x; 54 | y0 = y; 55 | } 56 | 57 | 58 | 59 | t += t_step; 60 | 61 | requestAnimationFrame(wave); 62 | }; 63 | 64 | 65 | /* START THE MADNESS */ 66 | setTimeout(function() { 67 | initCanvas(); 68 | wave(); 69 | 70 | /* fix looks on resize */ 71 | addEventListener('resize', initCanvas, false); 72 | }, 15); -------------------------------------------------------------------------------- /canvas5-rainbow/scss/style.scss: -------------------------------------------------------------------------------- 1 | * { overflow: hidden; margin: 0; width: 100%; height: 100%; } 2 | .c { background: black; } -------------------------------------------------------------------------------- /canvas6-squareroundtext/css/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | #canvas{ 6 | position: absolute; 7 | left: 0; 8 | top: 0; 9 | } 10 | 11 | body{ 12 | background-color: #222; 13 | font-family: "Helvetica"; 14 | overflow: hidden; 15 | } 16 | #control{ 17 | position: absolute; 18 | left:-250px; 19 | top: 0; 20 | width: 250px; 21 | height: 100%; 22 | padding: 30px; 23 | box-sizing: border-box; 24 | color: #49f; 25 | background-color: rgba(0, 0, 0,.5); 26 | font-size: 14px; 27 | -webkit-transition: all .5s linear; 28 | 29 | } 30 | #ball, #rect{ 31 | display: inline-block; 32 | width: 80px; 33 | height: 30px; 34 | line-height: 30px; 35 | text-align: center; 36 | cursor: pointer; 37 | border: 1px solid #222; 38 | color: #444; 39 | } 40 | #ball{ 41 | border-right:none; 42 | margin-right: -5px; 43 | border-top-left-radius: 10px; 44 | border-bottom-left-radius: 10px; 45 | background: orange; 46 | } 47 | #rect{ 48 | border-top-right-radius: 10px; 49 | border-bottom-right-radius: 10px; 50 | } 51 | 52 | 53 | #control h1{ 54 | font-size: 30px; 55 | padding: 0; 56 | color: orange; 57 | margin: 10px 0 30px 30px; 58 | font-family: "Microsoft Yahei"; 59 | font-weight: 100; 60 | } 61 | #control p{ 62 | margin-bottom: -10px; 63 | } 64 | #control input{ 65 | border: none; 66 | background-color: transparent; 67 | margin: 20px 0; 68 | outline: none; 69 | } 70 | #control input[type="text"]{ 71 | width: 100%; 72 | font-size: 25px; 73 | appearance: none; 74 | padding-bottom: 5px; 75 | border-bottom: 3px solid #ededed; 76 | color: #ededed; 77 | } 78 | 79 | #control input[type="range"]{ 80 | width: 100%; 81 | -webkit-appearance: none; 82 | background-color: silver; 83 | height: 8px; 84 | } 85 | #control input[type="range"]::-webkit-slider-thumb{ 86 | -webkit-appearance: none; 87 | background-color: seagreen; 88 | width: 10px; 89 | height: 20px; 90 | } 91 | #control input[type="button"]{ 92 | padding: 5px; 93 | margin: 5px 0; 94 | background-color: #ff2948; 95 | border: 0px; 96 | width: 100%; 97 | color: white; 98 | font-weight: white; 99 | } 100 | 101 | #btn{ 102 | position: absolute; 103 | top: 20px; 104 | right: -40px; 105 | 106 | } 107 | #btn span{ 108 | display: block; 109 | width: 20px; 110 | height: 1px; 111 | margin-bottom: 4px; 112 | border-bottom: 2px solid #fff; 113 | } 114 | 115 | #control.slide{ 116 | left: 0px; 117 | -webkit-transition: left .5s linear; 118 | } 119 | 120 | #tips{ 121 | position: absolute; 122 | bottom: 25%; 123 | left: 50%; 124 | transform: translateX(-50%); 125 | color: rgba(255,255,255,.5); 126 | font-size: 13px; 127 | font-weight: thin; 128 | text-align: center; 129 | border-top: 1px solid rgba(255,255,255,.5); 130 | padding: 20px 50px; 131 | } -------------------------------------------------------------------------------- /canvas6-squareroundtext/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | canvas文字粒子特效 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

文字粒子

17 |

18 | 圆形 19 | 方块 20 |

21 |

文字

22 | 23 |

重力

24 | 25 |

周期

26 | 27 |

速度

28 | 29 |

半径

30 | 31 |

分辨率

32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 |
40 | 41 |
42 |

*** 点击菜单按钮，滑出侧边栏，进行参数控制 ***

43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /canvas6-squareroundtext/js/index.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById('canvas'); 2 | context = canvas.getContext('2d'); 3 | W = canvas.width = window.innerWidth; 4 | H = canvas.height = window.innerHeight; 5 | gridY = 7, gridX = 7; 6 | 7 | type = "ball"; 8 | 9 | colors = [ 10 | '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', 11 | '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50', 12 | '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', 13 | '#FF5722' 14 | ]; 15 | 16 | var message = document.getElementById('message'), 17 | gravity = document.getElementById('gra'), 18 | duration = document.getElementById('dur'), 19 | speed = document.getElementById('speed'), 20 | radius = document.getElementById('rad'), 21 | resolution = document.getElementById('res'); 22 | 23 | graVal = parseFloat(gravity.value); 24 | durVal = parseFloat(duration.value); 25 | spdVal = parseFloat(speed.value); 26 | radVal = parseFloat(radius.value); 27 | resVal = parseFloat(resolution.value); 28 | 29 | var word = new Shape(W/2, H/2, message.value); 30 | word.getValue(); 31 | 32 | function change(){ 33 | context.clearRect(0, 0, W, H); 34 | gridX = parseFloat(resolution.value); 35 | gridY = parseFloat(resolution.value); 36 | word.placement = []; 37 | word.text = message.value; 38 | word.getValue(); 39 | } 40 | 41 | function changeV() { 42 | graVal = parseFloat(gravity.value); 43 | durVal = parseFloat(duration.value); 44 | spdVal = parseFloat(speed.value); 45 | radVal = parseFloat(radius.value); 46 | } 47 | 48 | 49 | (function drawFrame(){ 50 | window.requestAnimationFrame(drawFrame, canvas); 51 | context.clearRect(0, 0, W, H); 52 | 53 | for(var i=0; i< word.placement.length; i++){ 54 | word.placement[i].update(); 55 | } 56 | }()) 57 | 58 | //resize 59 | function resize(){ 60 | W = canvas.width = window.innerWidth; 61 | H = canvas.height = window.innerHeight; 62 | } 63 | 64 | window.addEventListener('resize', resize, false); 65 | -------------------------------------------------------------------------------- /canvas6-squareroundtext/js/particles.js: -------------------------------------------------------------------------------- 1 | function Particle(x, y, type) { 2 | this.radius = 1.1; 3 | this.futurRadius = utils.randomInt(radVal, radVal+3); //[1.1,5.1] 4 | 5 | this.rebond = utils.randomInt(1, 5); 6 | this.x = x; 7 | this.y = y; 8 | 9 | this.dying = false; 10 | 11 | this.base = [x, y]; 12 | 13 | this.vx = 0; 14 | this.vy = 0; 15 | this.type = type; 16 | this.friction = .99; 17 | this.gravity = graVal; 18 | this.color = colors[Math.floor(Math.random() * colors.length)]; 19 | 20 | this.getSpeed = function() { 21 | return Math.sqrt(this.vx * this.vx + this.vy * this.vy); 22 | }; 23 | 24 | this.setSpeed = function(speed) { 25 | var heading = this.getHeading(); 26 | this.vx = Math.cos(heading) * speed; 27 | this.vy = Math.sin(heading) * speed; 28 | }; 29 | 30 | this.getHeading = function() { 31 | return Math.atan2(this.vy, this.vx); 32 | }; 33 | 34 | this.setHeading = function(heading) { 35 | var speed = this.getSpeed(); 36 | this.vx = Math.cos(heading) * speed; 37 | this.vy = Math.sin(heading) * speed; 38 | }; 39 | 40 | this.update = function(heading) { 41 | this.x += this.vx; 42 | this.y += this.vy; 43 | this.vy += graVal; 44 | 45 | this.vx *= this.friction; 46 | this.vy *= this.friction; 47 | 48 | if(this.radius < this.futurRadius && this.dying === false){ 49 | this.radius += durVal; 50 | }else{ 51 | this.dying = true; 52 | } 53 | 54 | if(this.dying === true){ 55 | this.radius -= durVal; 56 | } 57 | 58 | if(type === "ball"){ 59 | context.save(); 60 | context.fillStyle = this.color; 61 | context.beginPath(); 62 | context.arc(this.x, this.y, this.radius, Math.PI * 2, false); 63 | context.closePath(); 64 | context.fill(); 65 | context.restore(); 66 | } 67 | 68 | if(type === "rect"){ 69 | context.save(); 70 | context.fillStyle = this.color; 71 | context.beginPath(); 72 | context.fillRect(this.x, this.y, this.futurRadius, this.futurRadius) 73 | context.closePath(); 74 | context.fill(); 75 | context.restore(); 76 | } 77 | 78 | 79 | if (this.y < 0 || this.radius < 1) { 80 | this.x = this.base[0]; 81 | this.y = this.base[1]; 82 | this.dying = false; 83 | this.radius = 1.1; 84 | this.setSpeed(spdVal); 85 | this.futurRadius = utils.randomInt(radVal, radVal+3); 86 | this.setHeading(utils.randomInt(utils.degreesToRads(0), utils.degreesToRads(360))); 87 | } 88 | 89 | } 90 | 91 | this.setSpeed(utils.randomInt(.1, .5)); 92 | this.setHeading(utils.randomInt(utils.degreesToRads(0), utils.degreesToRads(360))); 93 | 94 | } 95 | -------------------------------------------------------------------------------- /canvas6-squareroundtext/js/shape.js: -------------------------------------------------------------------------------- 1 | function Shape(x, y, texte){ 2 | this.x = x; 3 | this.y = y; 4 | this.size = 150; 5 | 6 | this.text = texte; 7 | this.placement = []; 8 | //this.vectors = []; 9 | } 10 | 11 | /*//idata 为一个对象 12 | var idata = cxt.getImageData(0, 0, W, H); 13 | 14 | ImageData {data: Uint8ClampedArray[1885276], width: 733, height: 643} 15 | data:Uint8ClampedArray[1885276] //8位无符号整形数组 16 | height 17 | :643 18 | width:733 19 | 20 | var buffer32 = new Uint32Array(idata.data.buffer); 21 | /* 22 | 将8位无符号整形数组，转换成32位的,范围为[471318] 23 | */ 24 | Shape.prototype.getValue = function(){ 25 | 26 | //draw the shape 27 | context.textAlign = "center"; 28 | context.font = this.size + "px arial"; 29 | context.fillText(this.text, this.x, this.y); 30 | 31 | var idata = context.getImageData(0, 0, W, H); 32 | var buffer32 = new Uint32Array(idata.data.buffer); 33 | 34 | for(var j=0; j < H; j += gridY){ 35 | for(var i=0 ; i < W; i += gridX){ 36 | if(buffer32[j * W + i]){ 37 | var particle = new Particle(i, j, type); 38 | this.placement.push(particle); 39 | } 40 | } 41 | } 42 | 43 | context.clearRect(0, 0, W, H); 44 | 45 | } 46 | 47 | 48 | -------------------------------------------------------------------------------- /canvas6-squareroundtext/js/sidebar.js: -------------------------------------------------------------------------------- 1 | //侧边栏 2 | var btn = document.getElementById("btn"); 3 | var control = document.getElementById("control"); 4 | 5 | btn.addEventListener('click', function(e){ 6 | control.classList.toggle("slide"); 7 | }, false) 8 | 9 | 10 | //粒子选择 11 | var ball = document.getElementById("ball"); 12 | var rect = document.getElementById("rect"); 13 | 14 | function chose(particleName){ 15 | particleName.addEventListener('click', function(e){ 16 | this.style.backgroundColor = "orange"; 17 | (particleName == ball ? rect : ball).style.backgroundColor = "rgba(0, 0, 0, 0)"; 18 | type = (type === "ball" ? "rect" : "ball"); 19 | change(); 20 | 21 | }, false) 22 | } 23 | 24 | chose(ball); 25 | chose(rect); -------------------------------------------------------------------------------- /canvas6-squareroundtext/js/utils.js: -------------------------------------------------------------------------------- 1 | var utils = { 2 | norm: function(value, min, max) { 3 | return (value - min) / (max - min); 4 | }, 5 | 6 | lerp: function(norm, min, max) { 7 | return (max - min) * norm + min; 8 | }, 9 | 10 | map: function(value, sourceMin, sourceMax, destMin, destMax) { 11 | return utils.lerp(utils.norm(value, sourceMin, sourceMax), destMin, destMax); 12 | }, 13 | 14 | clamp: function(value, min, max) { 15 | return Math.min(Math.max(value, Math.min(min, max)), Math.max(min, max)); 16 | }, 17 | 18 | distance: function(p0, p1) { 19 | var dx = p1.x - p0.x, 20 | dy = p1.y - p0.y; 21 | return Math.sqrt(dx * dx + dy * dy); 22 | }, 23 | 24 | distanceXY: function(x0, y0, x1, y1) { 25 | var dx = x1 - x0, 26 | dy = y1 - y0; 27 | return Math.sqrt(dx * dx + dy * dy); 28 | }, 29 | 30 | circleCollision: function(c0, c1) { 31 | return utils.distance(c0, c1) <= c0.radius + c1.radius; 32 | }, 33 | 34 | circlePointCollision: function(x, y, circle) { 35 | return utils.distanceXY(x, y, circle.x, circle.y) < circle.radius; 36 | }, 37 | 38 | pointInRect: function(x, y, rect) { 39 | return utils.inRange(x, rect.x, rect.x + rect.radius) && 40 | utils.inRange(y, rect.y, rect.y + rect.radius); 41 | }, 42 | 43 | inRange: function(value, min, max) { 44 | return value >= Math.min(min, max) && value <= Math.max(min, max); 45 | }, 46 | 47 | rangeIntersect: function(min0, max0, min1, max1) { 48 | return Math.max(min0, max0) >= Math.min(min1, max1) && 49 | Math.min(min0, max0) <= Math.max(min1, max1); 50 | }, 51 | 52 | rectIntersect: function(r0, r1) { 53 | return utils.rangeIntersect(r0.x, r0.x + r0.width, r1.x, r1.x + r1.width) && 54 | utils.rangeIntersect(r0.y, r0.y + r0.height, r1.y, r1.y + r1.height); 55 | }, 56 | 57 | degreesToRads: function(degrees) { 58 | return degrees / 180 * Math.PI; 59 | }, 60 | 61 | radsToDegrees: function(radians) { 62 | return radians * 180 / Math.PI; 63 | }, 64 | 65 | randomRange: function(min, max) { 66 | return min + Math.random() * (max - min); 67 | }, 68 | 69 | randomInt: function(min, max) { 70 | return min + Math.random() * (max - min + 1); 71 | }, 72 | 73 | getmiddle: function(p0, p1) { 74 | var x = p0.x, 75 | x2 = p1.x; 76 | middlex = (x + x2) / 2; 77 | var y = p0.y, 78 | y2 = p1.y; 79 | middley = (y + y2) / 2; 80 | pos = [middlex, middley]; 81 | 82 | return pos; 83 | }, 84 | 85 | getAngle: function(p0, p1) { 86 | var deltaX = p1.x - p0.x; 87 | var deltaY = p1.y - p0.y; 88 | var rad = Math.atan2(deltaY, deltaX); 89 | return rad; 90 | }, 91 | inpercentW: function(size) { 92 | return (size * W) / 100; 93 | }, 94 | 95 | inpercentH: function(size) { 96 | return (size * H) / 100; 97 | }, 98 | 99 | } -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/README.txt: -------------------------------------------------------------------------------- 1 | A Pen created at CodePen.io. You can find this one at http://codepen.io/egrucza/pen/WbmpqO. 2 | 3 | Working on a few different styles of sine waves. Utilizes sine-waves.js by Isaac Suttell. 4 | 5 | *Update* I forked this pen and created a new version with the ability to toggle wave types. You can find it here http://codepen.io/egrucza/pen/raRGGR -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/css/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | background-color: black; 5 | overflow-x: hidden; 6 | } 7 | -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | canvas通过sin实现波动线条 -A5源码 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/js/index.js: -------------------------------------------------------------------------------- 1 | /*** 2 | sine-waves.js 3 | https://github.com/isuttell/sine-waves 4 | ***/ 5 | 6 | var waves = new SineWaves({ 7 | el: document.getElementById('waves'), 8 | 9 | speed: 4, 10 | 11 | width: function() { 12 | return $(window).width(); 13 | }, 14 | 15 | height: function() { 16 | return $(window).height(); 17 | }, 18 | 19 | ease: 'SineInOut', 20 | 21 | wavesWidth: '80%', 22 | 23 | waves: [ 24 | { 25 | timeModifier: 4, 26 | lineWidth: 2, 27 | amplitude: -100, 28 | wavelength: 25 29 | }, 30 | { 31 | timeModifier: 4, 32 | lineWidth: 1, 33 | amplitude: -50, 34 | wavelength: 20 35 | } 36 | ], 37 | 38 | // Resize 39 | resizeEvent: function() { 40 | var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0); 41 | gradient.addColorStop(0,"rgba(0,134,141,1)"); 42 | 43 | var index = -1; 44 | var length = this.waves.length; 45 | while(++index < length){ 46 | this.waves[index].strokeStyle = gradient; 47 | } 48 | 49 | // Clean Up 50 | index = void 0; 51 | length = void 0; 52 | gradient = void 0; 53 | } 54 | }); -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/js/sine-waves.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | _______ _____ __ _ _______ _ _ _ _______ _ _ _______ _______ 3 | |______ | | \ | |______ | | | |_____| \ / |______ |______ 4 | ______| __|__ | \_| |______ |__|__| | | \/ |______ ______| 5 | 6 | sine-waves v0.3.0 7 | Contributor(s): Isaac Suttell 8 | Last Build: 2014-12-03 9 | */ 10 | !function(a,b){"use strict";"function"==typeof define&&"object"==typeof define.amd?define([],function(){return b(a)}):a.SineWaves=b(a)}(this,function(){"use strict";function a(a){if(this.options=i.defaults(this.options,a),this.el=this.options.el,delete this.options.el,!this.el)throw"No Canvas Selected";if(this.ctx=this.el.getContext("2d"),this.waves=this.options.waves,delete this.options.waves,!this.waves||!this.waves.length)throw"No waves specified";this.dpr=window.devicePixelRatio||1,this.updateDimensions(),window.addEventListener("resize",this.updateDimensions.bind(this)),this.setupUserFunctions(),this.easeFn=i.getFn(n,this.options.ease,"linear"),this.rotation=i.degreesToRadians(this.options.rotate),i.isType(this.options.running,"boolean")&&(this.running=this.options.running),this.setupWaveFns(),this.loop()}function b(a,b){return i.isType(a,"number")?a:(a=a.toString(),a.indexOf("%")>-1?(a=parseFloat(a),a>1&&(a/=100),b*a):a.indexOf("px")>-1?parseInt(a,10):void 0)}Function.prototype.bind||(Function.prototype.bind=function(a){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var b=Array.prototype.slice.call(arguments,1),c=this,d=function(){},e=function(){return c.apply(this instanceof d&&a?this:a,b.concat(Array.prototype.slice.call(arguments)))};return d.prototype=this.prototype,e.prototype=new d,e});for(var c=["ms","moz","webkit","o"],d=0;d0?1:-1},o.square=function(a){return o.sign(Math.sin(a*g))},o.sawtooth=function(a){return 2*(a-Math.floor(a+.5))},o.triangle=function(a){return Math.abs(o.sawtooth(a))},a.prototype.options={speed:10,rotate:0,ease:"Linear",wavesWidth:"95%"},a.prototype.setupWaveFns=function(){for(var a=-1,b=this.waves.length;++a0&&(this.ctx.translate(this.width/2,this.height/2),this.ctx.rotate(this.rotation),this.ctx.translate(-this.width/2,-this.height/2));++b 11 | -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "bourbon"; 2 | 3 | html, body { 4 | height: 100%; 5 | width: 100%; 6 | background-color: black; 7 | overflow-x: hidden; 8 | } -------------------------------------------------------------------------------- /canvas通过sin实现波动线条/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/canvas通过sin实现波动线条/说明.htm -------------------------------------------------------------------------------- /canvas黑客帝国代码雨特效/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | canvas黑客帝国代码雨特效-A5源码 10 | 11 | 12 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /canvas黑客帝国代码雨特效/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/canvas黑客帝国代码雨特效/说明.htm -------------------------------------------------------------------------------- /demo/demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 14 | 15 | 16 |

动态随机绘制SVG圆形

17 | 18 | 66 | 67 | -------------------------------------------------------------------------------- /demo/demo4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 | 14 | 15 | 16 | 31 | 32 | -------------------------------------------------------------------------------- /demo/index1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 | 14 | 15 | 16 | 34 | 35 | -------------------------------------------------------------------------------- /demo/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 13 | 14 | 15 | 16 | 17 | 18 | 28 | 29 | -------------------------------------------------------------------------------- /demo/index5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 11 | 12 | 13 | 14 | 15 | 16 | 30 | 31 | -------------------------------------------------------------------------------- /俄罗斯方块/audio/bg.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/俄罗斯方块/audio/bg.wav -------------------------------------------------------------------------------- /俄罗斯方块/css/4.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | -moz-box-sizing:border-box; /* Firefox */ 4 | -webkit-box-sizing:border-box; /* Safari */ 5 | /*元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。*/ 6 | } 7 | html,body,div{ 8 | margin:0; 9 | padding:0; 10 | } 11 | /*游戏区块*/ 12 | .game-container, .start-container{ 13 | width:590px; 14 | height: 600px; 15 | /*border:1px solid green;*/ 16 | margin:50px auto; 17 | position: relative; 18 | box-sizing: content-box; 19 | } 20 | .game-container{ 21 | display: none; 22 | } 23 | /*开始界面*/ 24 | .start-container{ 25 | background: url(../images/1.jpg); 26 | background-size: cover; 27 | width: 390px; 28 | position: relative; 29 | 30 | } 31 | .start-container p{ 32 | position: absolute; 33 | bottom: 100px; 34 | left:100px; 35 | } 36 | .start-container p button{ 37 | width: 200px; 38 | height: 50px; 39 | display: block; 40 | margin: 0 auto; 41 | margin-bottom: 40px; 42 | border-radius: 60%; 43 | font-family: "微软雅黑"; 44 | font-weight: bold; 45 | font-size:18px; 46 | } 47 | .start-container .btn{ 48 | outline: none; 49 | border: 0px solid transparent; 50 | } 51 | /*去掉bootstrap按钮边框*/ 52 | .btn:focus, 53 | .btn:active:focus, 54 | .btn.active:focus, 55 | .btn.focus, 56 | .btn:active.focus,.btn.active.focus { 57 | outline: none; 58 | } 59 | /*设置区块*/ 60 | .modal-dialog{ 61 | display: none; 62 | /*z-index: 2;*/ 63 | color:#02490C; 64 | font-weight: 400; 65 | } 66 | .modal-dialog .modal-body{ 67 | /*display:none;*/ 68 | position: fixed; 69 | height: 300px; 70 | width: 390px; 71 | /*top: 50%;*/ 72 | margin-top: -500px; 73 | left: 50%; 74 | margin-left: -195px; 75 | /*1/2宽度*/ 76 | background: rgba(255,255,46,0.4); 77 | z-index: 100; 78 | text-align: center; 79 | z-index: 2; 80 | line-height: 95px; 81 | } 82 | .modal-dialog::after{ 83 | /*display: none;*/ 84 | content:''; 85 | position:fixed; 86 | top:0; 87 | right:0; 88 | left:0; 89 | bottom:0; 90 | background: rgba(255,255,255,0.3); 91 | } 92 | .game-container .panel{ 93 | width:100px; 94 | margin-bottom: 0; 95 | border-bottom: #12E040 1px solid; 96 | } 97 | .game-container .panel .panel-body{ 98 | padding:0; 99 | } 100 | 101 | /*游戏显示区块*/ 102 | .game-main-panel{ 103 | position: absolute; 104 | left:100px; 105 | top:0; 106 | width:390px; 107 | height: 600px; 108 | border-left:1px solid green; 109 | border-right:1px solid green; 110 | } 111 | .game-container canvas { 112 | width: 100px; 113 | } 114 | .game-main-panel canvas { 115 | width: 390px; 116 | height:600px; 117 | } 118 | 119 | /*两边面板*/ 120 | .timer-panel{ 121 | height:100px; 122 | } 123 | .help-panel{ 124 | height: 400px; 125 | line-height: 80px; 126 | text-align: center; 127 | } 128 | .leval-panel{ 129 | height: 100px; 130 | } 131 | .next-panel{ 132 | position: absolute; 133 | top:0; 134 | right:0; 135 | height: 150px; 136 | } 137 | .setting-panel{ 138 | position: absolute; 139 | top:150px; 140 | right:0; 141 | height:250px; 142 | /*调节按钮间距*/ 143 | line-height: 80px; 144 | text-align: center; 145 | font-weight: bold; 146 | } 147 | .setting-panel button{ 148 | color:#fff; 149 | font-weight: bold; 150 | } 151 | .score-panel{ 152 | position: absolute; 153 | top:400px; 154 | right:0; 155 | height:100px; 156 | } 157 | .high-score-panel{ 158 | position: absolute; 159 | top:500px; 160 | right:0; 161 | height:100px; 162 | } 163 | -------------------------------------------------------------------------------- /俄罗斯方块/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/俄罗斯方块/images/1.jpg -------------------------------------------------------------------------------- /俄罗斯方块/images/blocks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/俄罗斯方块/images/blocks.png -------------------------------------------------------------------------------- /俄罗斯方块/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 俄罗斯方块 6 | 7 | 8 | 9 | 10 |
11 |

12 | 13 | 14 |

15 |
16 |
17 | 18 | 19 |
20 |
21 | 使用时间 22 |
23 |
24 | 绘制时间 25 |
26 |
27 | 28 | 29 |
30 |
31 |

↑ 翻转方块

32 |

↓ 加速下落

33 |

→ 向右移动

34 |

← 向左移动

35 |
36 |
37 | 38 | 39 |
40 |
41 | 当前级别 42 |
43 |
44 | 绘制级别 45 |
46 |
47 | 48 | 49 |
50 | 绘制游戏主体 51 |
52 | 53 | 54 |
55 |
56 | 下一方块 57 |
58 |
59 | 绘制下一方块 60 |
61 |
62 | 63 |
64 |
65 | 66 | 67 | 68 |
69 |
70 | 71 |
72 |
73 | 当前得分 74 |
75 |
76 | 绘制得分 77 |
78 |
79 | 80 |
81 |
82 | 最高得分 83 |
84 |
85 | 绘制最高得分 86 |
87 |
88 |
89 | 90 |
91 |
92 | 93 | 94 |
95 |
96 | 97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 145 | 146 | -------------------------------------------------------------------------------- /俄罗斯方块/js/Block.js: -------------------------------------------------------------------------------- 1 | /*绘制单个方块 2 | 控制方块大小 3 | 4 | */ 5 | (function(window){ 6 | 'use strict'; 7 | function Block(blockType){ 8 | this.blockType = blockType; //类型指定用哪一种方块 9 | this.size = 30; 10 | this.originalSize = 32; //方块原始大小 11 | this.sprite = window.ResourceManager.getResource('blocks'); //获取图片 12 | } 13 | 14 | Block.prototype ={ 15 | constructor:Block, 16 | draw:function(context,x,y,blockType,size){ //x坐标,y坐标 行列 ？？？？？？？ 17 | size = size || this.size; 18 | context.drawImage(this.sprite,((blockType||this.blockType)-1)*this.originalSize,0,this.originalSize,this.originalSize,x*size,y*size,size,size); 19 | //截取坐标，截取宽高，放置图片起始坐标，宽高， 20 | //为了控制右上角方块把this.size 换成size, 21 | } 22 | }; 23 | window.Block = Block; 24 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/Board.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | function Board(gameInst){ 4 | this.gameInst =gameInst; 5 | this.blockSize = 30; //每个三十像素大小 6 | this.rows = TetrisConfig.rows; //引入config.js文件 7 | this.cols = TetrisConfig.cols; 8 | this.canvas = new Canvas('c_game_main',this.cols*this.blockSize,this.rows*this.blockSize); 9 | this.context = this.canvas.context; 10 | this.boardList = []; 11 | this.shape = new window.Shape(); 12 | 13 | this._init(); 14 | var b = ResourceManager.getResource('blocks'); //验证加载资源 15 | console.log(b); 16 | console.log("怎么打印不出来"); 17 | } 18 | 19 | Board.prototype ={ 20 | constructor: Board, 21 | _init:function(){ 22 | this._buildGridData(); 23 | this._initGrid(); 24 | 25 | this.shape.draw(this.context); //初始化随机出现的方块 26 | var self = this; //添加延迟，这里render访问不到 27 | setTimeout(function(){ 28 | self._buildNextShape(); //调用下 下一步方块 29 | }) 30 | 31 | }, 32 | _buildNextShape:function(){ 33 | this.nextShape = new window.Shape(); //注意这里变量名 34 | this.nextShape.setPosition(this.gameInst.nextshape.cols,this.gameInst.nextshape.rows); //定位 这里对象位置？？？？？？？？ 35 | this.gameInst.nextshape.render(this.nextShape); //绘制出右上角方块 36 | }, 37 | _buildGridData(){ //创建二维数组 38 | var i,j; 39 | for(i=0;i=this.cols //超出右边界 107 | || nextY+y>=this.rows //超出下边界 108 | ){ 109 | return false; 110 | } 111 | } 112 | } 113 | } 114 | return true; 115 | }, 116 | addShapeToBoardList:function(){ //方块堆砌 117 | for (var y = 0; y < this.shape.layout.length; y++) { 118 | for (var x = 0; x < this.shape.layout[y].length; x++) { 119 | if (this.shape.layout[y][x]) { // 120 | var boardX = this.shape.x + x; // 121 | var boardY = this.shape.y + y; 122 | if (this.boardList[boardY][boardX]) { //如果碰撞上 123 | // todo Game over 124 | this.gameInst._state = 'over'; 125 | return; //停止加入 126 | } 127 | else { 128 | this.boardList[boardY][boardX] = this.shape.blockType; 129 | // this.boardList[boardY][boardX] = 1; 130 | } 131 | } 132 | } 133 | } 134 | }, 135 | drawBlocks:function(){ //绘制出已经静止的方块 136 | for (var y = 0; y < this.rows; y++) { 137 | for (var x = 0; x < this.cols; x++) { 138 | if (this.boardList[y][x]) { //这是什么？？？？？？？？ 139 | // this.shape.block.draw(this.context, x, y); //解决下落后颜色改变 140 | this.shape.block.draw(this.context, x, y, this.boardList[y][x]); 141 | } 142 | } 143 | } 144 | }, 145 | createEmptyRow(){ //创建行 146 | var emptyArr = []; 147 | for(var i=0;i=0;y--){ 156 | var filled = this.boardList[y].filter(function(item){return item>0;}).length ===this.cols; 157 | if(filled &&y){ 158 | this.boardList.splice(y,1); //boardList是什么？？？、 159 | this.boardList.unshift(this.createEmptyRow()); //追加到第一行 160 | lines++; 161 | y++; // 162 | } 163 | } 164 | //计算得分 165 | var score = lines*10*lines; //清除行数*单行得分*倍数 166 | var totalScore = this.gameInst.score.addScore(score); //面板得分累加 167 | this.gameInst.highscore.checkScore(totalScore); // 最高分 168 | var currentLeval = this.gameInst.leval.checkLeval(totalScore); 169 | if(currentLeval){ 170 | window.TetrisConfig.speed = Math.floor(window.TetrisConfig.constSpeed * (1 - (currentLeval - 1) / 10)); 171 | //根据等级调整下落速度 172 | this.gameInst.pause(); 173 | setTimeout(function(){ 174 | window.alert('恭喜你升级了'); 175 | self.gameInst.resume(); 176 | }) 177 | } 178 | } 179 | }; 180 | window.Board = Board; //挂载 181 | })(window); 182 | -------------------------------------------------------------------------------- /俄罗斯方块/js/Canvas.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | /** 4 | *@param canvasId Canvas元素的ID属性 5 | *@param width canvas 宽度 6 | *@param height canvas 高度 7 | */ 8 | function Canvas(canvasId,width,height){ //实例化canvas对象 9 | this.canvasId = canvasId; 10 | this.el = document.getElementById(canvasId); 11 | 12 | if(!this.el){ 13 | throw new Error("Must provider a right canvas id"); 14 | } 15 | this.context = this.el.getContext('2d'); //获取该canvas的2D绘图环境对象 16 | this.width = width || window.innerWidth; 17 | this.height = height || window.innerHeight; 18 | this._init(); //下划线表明是私有方法 19 | } 20 | Canvas.prototype = { //constructor 属性返回对创建此对象的数组函数的引用 21 | constructor : Canvas, //指向canvas函数 22 | _init :function(){ 23 | this.el.width = this.width; //this.el.width style里面属性,防止拉伸压缩 24 | this.el.height = this.height; 25 | }, 26 | clear:function(fromX,fromY,toX,toY){ //清空整个画布 27 | fromX = fromX ||0; //没有赋值话取0 28 | fromY = fromY ||0; 29 | toX = toX ||this.width; 30 | toY = toY || this.height; 31 | this.context.clearRect(fromX,fromY,toX,toY); //开始xy,到终点xy 32 | }, 33 | drawText:function(text,x,y){ //绘制文本 34 | this.clear(0,0); 35 | this.context.font = '25px Arial'; 36 | this.context.fillStyle = '#CE670D'; 37 | this.context.textAlign = 'center'; 38 | this.context.fillText(text,x===undefined?(this.width/2):x,y===undefined?35:y); 39 | } 40 | }; 41 | 42 | window.Canvas = Canvas; 43 | })(window); 44 | 45 | -------------------------------------------------------------------------------- /俄罗斯方块/js/Keyboard.js: -------------------------------------------------------------------------------- 1 | 2 | /*键盘控制*/ 3 | (function(window){ 4 | 'use strict'; 5 | var keys = { 6 | 38:'top', 7 | 39:'right', 8 | 40:'down', 9 | 37:'left' 10 | } 11 | function Keyboard(){ //这里传参数，按键盘会有滞后？？？？？？？？？？？？？？ 12 | this.board; 13 | }; 14 | Keyboard.prototype={ 15 | constructor:Keyboard, 16 | init:function(board){ //注册事件 17 | var self = this; 18 | self.board = board; 19 | document.addEventListener('keydown',function(evt){ //keypress无法连续按键 20 | self.processKeyDown(evt); 21 | }); 22 | }, 23 | processKeyDown:function(evt){ 24 | //事件拦截 25 | if(this.board.gameInst._state != 'playing'){ 26 | return; 27 | }; 28 | // console.log(evt.keyCode); //打印出键盘对应编号 29 | if(keys[evt.keyCode]){ //如果按键存在 30 | this.press(keys[evt.keyCode]); //这种写法？？？？？？？？？？？ 31 | }; 32 | }, 33 | press:function(key){ //键盘控制 34 | // console.log('right'); 调试有没有执行 35 | var refresh = false; //平滑效果 ？？？？？？？ 36 | switch(key){ 37 | case 'top': 38 | 39 | if(this.board.validMove(0,0)){ 40 | this.board.shape.rotate(); 41 | refresh = true; 42 | } 43 | //翻转 44 | break; 45 | case 'right': 46 | if(this.board.validMove(1,0)){ //判断是否越界 47 | this.board.shape.x+=1; //键盘控制方块移动 48 | refresh = true; 49 | } 50 | break; 51 | case 'down': 52 | if(this.board.validMove(0,1)){ 53 | this.board.shape.y+=1; 54 | refresh = true; 55 | 56 | } 57 | //加速下落 58 | break; 59 | case 'left': 60 | if(this.board.validMove(-1,0)){ 61 | this.board.shape.x-=1; 62 | refresh = true; 63 | } 64 | break; 65 | }; 66 | if(refresh){ 67 | this.board.refresh(); 68 | this.board.shape.draw(this.board.context); 69 | if(key ==='down'){ 70 | var self = this; 71 | window.clearInterval(window.TetrisConfig.intervalId); 72 | window.TetrisConfig.intervalId = window.setInterval(function(){ 73 | self.board.tick(); 74 | },TetrisConfig.speed); 75 | /* 76 | setInterval(function(){ //导致下落速度越来越快 77 | self.board.tick(); 78 | },TetrisConfig.speed);*/ 79 | } 80 | } 81 | } 82 | }; 83 | 84 | window.Keyboard = Keyboard; 85 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/Leval.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | var levalArr = (function(){ //自调用函数 5 | var arr = []; 6 | for(var i =0;i<10;i++){ //十个等级 7 | arr.push(Math.pow(2,i)*100); //等级分数限制 8 | } 9 | return arr; 10 | })(); 11 | 12 | function Leval(){ 13 | this.canvas = new Canvas('leval',100,70); 14 | this.leval = 0; 15 | 16 | this._init(); 17 | 18 | } 19 | 20 | Leval.prototype = { 21 | constructor:Leval, 22 | 23 | _init:function(){ 24 | this._render(); 25 | }, 26 | _render:function(){ //控制context绘制得分 27 | this.canvas.drawText('Leval '+this.leval); 28 | }, 29 | checkLeval:function(score){ 30 | if(score>=levalArr[this.leval]){ 31 | this.leval++; 32 | this._render(); //调用绘制 33 | return this.leval; 34 | } 35 | return 0; //?????????? 36 | } 37 | 38 | }; 39 | window.Leval = Leval; //需要到Tetris注册 40 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/Nextshape.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | function NextShape(){ 5 | this.canvas = new Canvas('nextshape',100,70); 6 | 7 | this._init(); 8 | 9 | } 10 | 11 | NextShape.prototype = { 12 | constructor:NextShape, 13 | 14 | _init:function(){ 15 | this.rows = 4; 16 | this.cols = 6; 17 | }, 18 | render:function(shape){ //对外的渲染 传参数******** 19 | this.canvas.clear(); 20 | shape.draw(this.canvas.context,20); //新增右上角方块大小参数 21 | //16*4~70.16~6~100 22 | //在shape里面定位 23 | } 24 | 25 | }; 26 | window.NextShape = NextShape; 27 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/ResourceManager.js: -------------------------------------------------------------------------------- 1 | /*完整资源加载*/ 2 | 3 | (function(window){ 4 | 'use strict'; 5 | 6 | var cacheMap = new Map(); //用于存储资源map对象 7 | var resourceTotalCount =1; //资源总数量 8 | var currentLoaded = 0; //当前加载资源总量 9 | 10 | var isAddLoaded = function(){ //回调函数，加载成功后 11 | currentLoaded +=1; 12 | /*a++：a先创建自身的一个副本，然后a自增1，最后返回副本的值 13 | a+=1: 事实上相当于++a 14 | a=a+1: 虽然有点雷同于a+=1，但不同的是此时右值的a和1做相加操作，形成一个副本然后赋值给a，所以有额外操作 15 | ++a:将a自增1并返回a*/ 16 | if(currentLoaded === resourceTotalCount && typeof window.ResourceManager.onResourceLoaded ==='function') { 17 | window.ResourceManager.onResourceLoaded(); 18 | } 19 | } 20 | 21 | var init = function(){ 22 | var image = new Image(); //创建image对象 23 | image.onload = function(){ 24 | cacheMap.set('blocks',image); 25 | isAddLoaded(); 26 | }; 27 | image.src = 'images/blocks.png'; //指定图片路径？？？ 28 | 29 | }; 30 | 31 | var getResource = function(key){ //通过key获取资源 32 | return cacheMap.get(key); 33 | }; 34 | 35 | window.ResourceManager = { 36 | getResource:getResource, 37 | init:init, 38 | onResourceLoaded:null //资源加载完成回调 39 | } 40 | 41 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/Score.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | function Score(){ 5 | this.canvas = new Canvas('score',100,70); 6 | this.score = 0; 7 | 8 | this._init(); 9 | 10 | } 11 | 12 | Score.prototype = { 13 | constructor:Score, 14 | 15 | _init:function(){ 16 | this._render(); 17 | }, 18 | _render:function(){ //控制context绘制得分 19 | this.canvas.drawText(this.score); 20 | }, 21 | addScore:function(value){ 22 | this.score+=value; 23 | this._render(); 24 | return this.score; 25 | } 26 | }; 27 | window.Score = Score; 28 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/js/Shape.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | var shapebLayouts =[ // 5 | [[0,1,0],[1,1,1]], 6 | [[1,1,1,1]], 7 | [[1,1],[1,1]], 8 | [[0,1],[1,1],[1,0]], 9 | [[1,0],[1,1],[0,1]], 10 | [[1,0,1],[1,1,1]], 11 | [[0,1],[1,1]], 12 | [[1,1]], 13 | [[1,1],[1,0],[1,0]], 14 | [[1,1],[0,1],[0,1]] 15 | ]; 16 | var random= function(minValue,maxValue){ //产生随机数 17 | return minValue +Math.floor(Math.random()*maxValue); //参数随机数，包含0，不包含1 18 | }; 19 | var styleCount = 7; //七种颜色 20 | function Shape(){ 21 | this.x=0; //开始处在左上角 22 | this.y=0; 23 | this.blockType = random(1,styleCount); //颜色随机 +1解决消失 24 | // console.log(this.Blocktype); 25 | this.block = new Block(this.blockType); //第几个方块,也就是变换颜色 26 | 27 | 28 | this.layout = shapebLayouts[random(0,shapebLayouts.length)]; //多种方块形状 29 | /* layout简化 30 | this.layouts = { 31 | 1:[[0,1,0],[1,1,1]], 32 | 2:[[1,0],[1,1],[1,0]], 33 | 3:[[1,1,1],[0,1,0]], 34 | 4:[[0,1],[1,1],[0,1]] 35 | } 36 | this.layout = this.layouts[2]; //对象另一种取值方式 37 | */ 38 | /*this.layout = [ 39 | [0,1,0], //1代表有 40 | [1,1,1] 41 | ];*/ 42 | // this.layout = [[0,1,0],[1,1,1]]; 开始的例子，先产生一个形状 43 | }; 44 | Shape.prototype={ 45 | constructor:Shape, 46 | draw:function(context,size){ //增加参数，控制右上角下一个方块大小 47 | for(var i=0;i TetrisConfig.cols) { 81 | this.x = TetrisConfig.cols - this.layout[0].length; 82 | } 83 | if (this.y + this.layout.length > TetrisConfig.rows) { 84 | this.y = TetrisConfig.rows - this.layout.length; 85 | } 86 | 87 | }, 88 | _getMaxCols:function(){ 89 | var max = 0; 90 | for(var y = 0;ythis.highScore){ 30 | this.highScore =score; 31 | this._setScore(score); 32 | this._render(); 33 | } 34 | } 35 | //对外暴露最高分 36 | 37 | }; 38 | window.HighScore = HighScore; 39 | })(window); -------------------------------------------------------------------------------- /俄罗斯方块/说明.htm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunshine940326/canvas/7ba0ea743ccb3f6f09c746fe4d5058d016d84692/俄罗斯方块/说明.htm --------------------------------------------------------------------------------