Calamus

├── .DS_Store ├── star ├── images │ ├── bg3.jpeg │ └── star.png ├── index.html ├── css │ └── mystyle.css └── js │ ├── commonFunctions.js │ └── star.js ├── README.md ├── LICENSE └── .gitignore /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calamus0427/canvas/master/.DS_Store -------------------------------------------------------------------------------- /star/images/bg3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calamus0427/canvas/master/star/images/bg3.jpeg -------------------------------------------------------------------------------- /star/images/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calamus0427/canvas/master/star/images/star.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [calamus](https://www.calamus.xyz) 2 | 3 | # canvas 动画特效 4 | - [星星闪烁特效](http://calamus.wiki/canvas/star/index.html) 5 | -------------------------------------------------------------------------------- /star/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Calamus 13 | 14 | 15 | 16 |

17 | 鼠标移入该区域查看星星特效效果 18 |

19 |

20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 あやめ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /star/css/mystyle.css: -------------------------------------------------------------------------------- 1 | *{margin:0; padding:0;} 2 | /*自定义的一些字体*/ 3 | @font-face { 4 | font-family: "ChantelliAntiquaRegular"; 5 | src: url("Chantelli_Antiqua-webfont.eot"); 6 | src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg"); 7 | font-weight: normal; 8 | font-style: normal; 9 | } 10 | @font-face { 11 | font-family: "ChantelliAntiquaRegular"; 12 | src: url("Chantelli_Antiqua-webfont.eot"); 13 | } 14 | 15 | @font-face { 16 | font-family: "ChantelliAntiquaRegular"; 17 | src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg"); 18 | font-weight: normal; 19 | font-style: normal; 20 | } 21 | /*a标签重置*/ 22 | a:hover{text-decoration:none; color:navajowhite} 23 | a:link , a:hover , a:active , a:visited{text-decoration:none;} 24 | a{text-decoration:none; color:white} 25 | 26 | .background { 27 | background-color:black; 28 | } 29 | .show{ 30 | width:1000px; 31 | height:400px; 32 | border:1px solid white; 33 | color:white; 34 | text-align:center; 35 | margin:0 auto; 36 | margin-top:20px; 37 | } 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /star/js/commonFunctions.js: -------------------------------------------------------------------------------- 1 | window.requestAnimFrame = (function() { 2 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 3 | function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) { 4 | return window.setTimeout(callback, 1000 / 60); 5 | }; 6 | })(); 7 | 8 | 9 | function calLength2(x1, y1, x2, y2) { 10 | return Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2); 11 | } 12 | 13 | 14 | function randomColor() { 15 | var col = [0, 1, 2]; 16 | col[0] = Math.random() * 100 + 155; 17 | col[0] = col[0].toFixed(); 18 | col[1] = Math.random() * 100 + 155; 19 | col[1] = col[1].toFixed(); 20 | col[2] = Math.random() * 100 + 155; 21 | col[2] = col[2].toFixed(); 22 | var num = Math.floor(Math.random() * 3); 23 | col[num] = 0; 24 | return "rgba(" + col[0] + "," + col[1] + "," + col[2] + ","; 25 | } 26 | 27 | 28 | function lerpAngle(a, b, t) { 29 | var d = b - a; 30 | if (d > Math.PI) d = d - 2 * Math.PI; 31 | if (d < -Math.PI) d = d + 2 * Math.PI; 32 | return a + d * t; 33 | } 34 | 35 | function inOboundary(arrX, arrY, l, r, t, b) { //在l r t b范围内的检测 36 | return arrX > l && arrX < r && arrY > t && arrY < b; 37 | } 38 | 39 | function rgbColor(r, g, b) { 40 | r = Math.round(r * 256); 41 | g = Math.round(g * 256); 42 | b = Math.round(b * 256); 43 | return "rgba(" + r + "," + g + "," + b + ",1)"; 44 | } 45 | 46 | function rgbNum(r, g, b) { 47 | r = Math.round(r * 256); 48 | g = Math.round(g * 256); 49 | b = Math.round(b * 256); 50 | return "rgba(" + r + "," + g + "," + b; 51 | } 52 | 53 | function rnd(m) { 54 | var n = m || 1; 55 | return Math.random() * n; 56 | } 57 | 58 | function rateRandom(m, n) { 59 | var sum = 0; 60 | for (var i = 1; i < (n - m); i++) { 61 | sum += i; 62 | 63 | } 64 | 65 | var ran = Math.random() * sum; 66 | 67 | for (var i = 1; i < (n - m); i++) { 68 | ran -= i; 69 | if (ran < 0) { 70 | return i - 1 + m; 71 | } 72 | } 73 | } 74 | 75 | function distance(x1, y1, x2, y2, l) { 76 | var x = Math.abs(x1 - x2); 77 | var y = Math.abs(y1 - y2); 78 | if (x < l && y < l) { 79 | return true; 80 | } 81 | return false; 82 | } 83 | 84 | function AABBbox(object1, w1, h1, object2, w2, h2, overlap) { 85 | A1 = object1.x + overlap; 86 | B1 = object1.x + w1 - overlap; 87 | C1 = object1.y + overlap; 88 | D1 = object1.y + h1 - overlap; 89 | 90 | A2 = object2.x + overlap; 91 | B2 = object2.x + w2 - overlap; 92 | C2 = object2.y + overlap; 93 | D2 = object2.y + h2 - overlap; 94 | 95 | if (A1 > B2 || B1 < A2 || C1 > D2 || D1 < C2) return false; 96 | else return true; 97 | } 98 | 99 | 100 | function dis2(x, y, x0, y0) { 101 | var dx = x - x0; 102 | var dy = y - y0; 103 | return dx * dx + dy * dy; 104 | } 105 | 106 | function rndi2(m, n) { 107 | var a = Math.random() * (n - m) + m; 108 | return Math.floor(a); 109 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.suo 8 | *.user 9 | *.userosscache 10 | *.sln.docstates 11 | 12 | # User-specific files (MonoDevelop/Xamarin Studio) 13 | *.userprefs 14 | 15 | # Build results 16 | [Dd]ebug/ 17 | [Dd]ebugPublic/ 18 | [Rr]elease/ 19 | [Rr]eleases/ 20 | x64/ 21 | x86/ 22 | bld/ 23 | [Bb]in/ 24 | [Oo]bj/ 25 | [Ll]og/ 26 | 27 | # Visual Studio 2015/2017 cache/options directory 28 | .vs/ 29 | # Uncomment if you have tasks that create the project's static files in wwwroot 30 | #wwwroot/ 31 | 32 | # Visual Studio 2017 auto generated files 33 | Generated\ Files/ 34 | 35 | # MSTest test Results 36 | [Tt]est[Rr]esult*/ 37 | [Bb]uild[Ll]og.* 38 | 39 | # NUNIT 40 | *.VisualState.xml 41 | TestResult.xml 42 | 43 | # Build Results of an ATL Project 44 | [Dd]ebugPS/ 45 | [Rr]eleasePS/ 46 | dlldata.c 47 | 48 | # Benchmark Results 49 | BenchmarkDotNet.Artifacts/ 50 | 51 | # .NET Core 52 | project.lock.json 53 | project.fragment.lock.json 54 | artifacts/ 55 | **/Properties/launchSettings.json 56 | 57 | # StyleCop 58 | StyleCopReport.xml 59 | 60 | # Files built by Visual Studio 61 | *_i.c 62 | *_p.c 63 | *_i.h 64 | *.ilk 65 | *.meta 66 | *.obj 67 | *.iobj 68 | *.pch 69 | *.pdb 70 | *.ipdb 71 | *.pgc 72 | *.pgd 73 | *.rsp 74 | *.sbr 75 | *.tlb 76 | *.tli 77 | *.tlh 78 | *.tmp 79 | *.tmp_proj 80 | *.log 81 | *.vspscc 82 | *.vssscc 83 | .builds 84 | *.pidb 85 | *.svclog 86 | *.scc 87 | 88 | # Chutzpah Test files 89 | _Chutzpah* 90 | 91 | # Visual C++ cache files 92 | ipch/ 93 | *.aps 94 | *.ncb 95 | *.opendb 96 | *.opensdf 97 | *.sdf 98 | *.cachefile 99 | *.VC.db 100 | *.VC.VC.opendb 101 | 102 | # Visual Studio profiler 103 | *.psess 104 | *.vsp 105 | *.vspx 106 | *.sap 107 | 108 | # Visual Studio Trace Files 109 | *.e2e 110 | 111 | # TFS 2012 Local Workspace 112 | $tf/ 113 | 114 | # Guidance Automation Toolkit 115 | *.gpState 116 | 117 | # ReSharper is a .NET coding add-in 118 | _ReSharper*/ 119 | *.[Rr]e[Ss]harper 120 | *.DotSettings.user 121 | 122 | # JustCode is a .NET coding add-in 123 | .JustCode 124 | 125 | # TeamCity is a build add-in 126 | _TeamCity* 127 | 128 | # DotCover is a Code Coverage Tool 129 | *.dotCover 130 | 131 | # AxoCover is a Code Coverage Tool 132 | .axoCover/* 133 | !.axoCover/settings.json 134 | 135 | # Visual Studio code coverage results 136 | *.coverage 137 | *.coveragexml 138 | 139 | # NCrunch 140 | _NCrunch_* 141 | .*crunch*.local.xml 142 | nCrunchTemp_* 143 | 144 | # MightyMoose 145 | *.mm.* 146 | AutoTest.Net/ 147 | 148 | # Web workbench (sass) 149 | .sass-cache/ 150 | 151 | # Installshield output folder 152 | [Ee]xpress/ 153 | 154 | # DocProject is a documentation generator add-in 155 | DocProject/buildhelp/ 156 | DocProject/Help/*.HxT 157 | DocProject/Help/*.HxC 158 | DocProject/Help/*.hhc 159 | DocProject/Help/*.hhk 160 | DocProject/Help/*.hhp 161 | DocProject/Help/Html2 162 | DocProject/Help/html 163 | 164 | # Click-Once directory 165 | publish/ 166 | 167 | # Publish Web Output 168 | *.[Pp]ublish.xml 169 | *.azurePubxml 170 | # Note: Comment the next line if you want to checkin your web deploy settings, 171 | # but database connection strings (with potential passwords) will be unencrypted 172 | *.pubxml 173 | *.publishproj 174 | 175 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 176 | # checkin your Azure Web App publish settings, but sensitive information contained 177 | # in these scripts will be unencrypted 178 | PublishScripts/ 179 | 180 | # NuGet Packages 181 | *.nupkg 182 | # The packages folder can be ignored because of Package Restore 183 | **/[Pp]ackages/* 184 | # except build/, which is used as an MSBuild target. 185 | !**/[Pp]ackages/build/ 186 | # Uncomment if necessary however generally it will be regenerated when needed 187 | #!**/[Pp]ackages/repositories.config 188 | # NuGet v3's project.json files produces more ignorable files 189 | *.nuget.props 190 | *.nuget.targets 191 | 192 | # Microsoft Azure Build Output 193 | csx/ 194 | *.build.csdef 195 | 196 | # Microsoft Azure Emulator 197 | ecf/ 198 | rcf/ 199 | 200 | # Windows Store app package directories and files 201 | AppPackages/ 202 | BundleArtifacts/ 203 | Package.StoreAssociation.xml 204 | _pkginfo.txt 205 | *.appx 206 | 207 | # Visual Studio cache files 208 | # files ending in .cache can be ignored 209 | *.[Cc]ache 210 | # but keep track of directories ending in .cache 211 | !*.[Cc]ache/ 212 | 213 | # Others 214 | ClientBin/ 215 | ~$* 216 | *~ 217 | *.dbmdl 218 | *.dbproj.schemaview 219 | *.jfm 220 | *.pfx 221 | *.publishsettings 222 | orleans.codegen.cs 223 | 224 | # Including strong name files can present a security risk 225 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 226 | #*.snk 227 | 228 | # Since there are multiple workflows, uncomment next line to ignore bower_components 229 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 230 | #bower_components/ 231 | 232 | # RIA/Silverlight projects 233 | Generated_Code/ 234 | 235 | # Backup & report files from converting an old project file 236 | # to a newer Visual Studio version. Backup files are not needed, 237 | # because we have git ;-) 238 | _UpgradeReport_Files/ 239 | Backup*/ 240 | UpgradeLog*.XML 241 | UpgradeLog*.htm 242 | ServiceFabricBackup/ 243 | *.rptproj.bak 244 | 245 | # SQL Server files 246 | *.mdf 247 | *.ldf 248 | *.ndf 249 | 250 | # Business Intelligence projects 251 | *.rdl.data 252 | *.bim.layout 253 | *.bim_*.settings 254 | *.rptproj.rsuser 255 | 256 | # Microsoft Fakes 257 | FakesAssemblies/ 258 | 259 | # GhostDoc plugin setting file 260 | *.GhostDoc.xml 261 | 262 | # Node.js Tools for Visual Studio 263 | .ntvs_analysis.dat 264 | node_modules/ 265 | 266 | # Visual Studio 6 build log 267 | *.plg 268 | 269 | # Visual Studio 6 workspace options file 270 | *.opt 271 | 272 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 273 | *.vbw 274 | 275 | # Visual Studio LightSwitch build output 276 | **/*.HTMLClient/GeneratedArtifacts 277 | **/*.DesktopClient/GeneratedArtifacts 278 | **/*.DesktopClient/ModelManifest.xml 279 | **/*.Server/GeneratedArtifacts 280 | **/*.Server/ModelManifest.xml 281 | _Pvt_Extensions 282 | 283 | # Paket dependency manager 284 | .paket/paket.exe 285 | paket-files/ 286 | 287 | # FAKE - F# Make 288 | .fake/ 289 | 290 | # JetBrains Rider 291 | .idea/ 292 | *.sln.iml 293 | 294 | # CodeRush 295 | .cr/ 296 | 297 | # Python Tools for Visual Studio (PTVS) 298 | __pycache__/ 299 | *.pyc 300 | 301 | # Cake - Uncomment if you are using it 302 | # tools/** 303 | # !tools/packages.config 304 | 305 | # Tabs Studio 306 | *.tss 307 | 308 | # Telerik's JustMock configuration file 309 | *.jmconfig 310 | 311 | # BizTalk build output 312 | *.btp.cs 313 | *.btm.cs 314 | *.odx.cs 315 | *.xsd.cs 316 | 317 | # OpenCover UI analysis results 318 | OpenCover/ 319 | 320 | # Azure Stream Analytics local run output 321 | ASALocalRun/ 322 | 323 | # MSBuild Binary and Structured Log 324 | *.binlog 325 | 326 | # NVidia Nsight GPU debugger configuration file 327 | *.nvuser 328 | 329 | # MFractors (Xamarin productivity tool) working folder 330 | .mfractor/ 331 | -------------------------------------------------------------------------------- /star/js/star.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2016/8/8. 3 | */ 4 | 5 | var can; 6 | var ctx; 7 | var w; 8 | var h; 9 | var starPic = new Image(); 10 | 11 | var padLeft = 0; 12 | var padTop = 0; 13 | 14 | var starWidth = 1000; 15 | var starHeight = 380; 16 | 17 | var starNum=60; //星星的数量 18 | var stars=[]; //定义的星星类 19 | 20 | var lastTime;//上一帧刷新的时间； 21 | var delataTime;//两帧之间的时间间隔 22 | 23 | var life=0; 24 | 25 | var switchy = false; 26 | 27 | function init(){ 28 | can = document.getElementById("canvas"); 29 | ctx = can.getContext("2d"); 30 | 31 | w = can.width; 32 | h = can.height; 33 | 34 | document.addEventListener("mousemove",mousemove,false); 35 | 36 | // girlPic.src = "images/girl.jpg"; 37 | starPic.src = "data:image/png;base64,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"; 38 | 39 | for(var i=0;i padLeft && px < (padLeft + starWidth) && py > padTop && py < (padTop + starHeight)) { 80 | switchy = true; 81 | } else { 82 | switchy = false; 83 | } 84 | } 85 | } 86 | 87 | var starObj=function(){ 88 | this.x; 89 | this.y; 90 | 91 | this.picNo; 92 | this.timer; 93 | 94 | this.xSpeed; 95 | this.ySpeed; 96 | } 97 | 98 | starObj.prototype.upDate=function(){ 99 | this.x+=this.xSpeed*delataTime*0.004; 100 | this.y+=this.ySpeed*delataTime*0.004; 101 | this.timer+=delataTime; 102 | if(this.timer>50){this.picNo+=1;this.picNo%=7;this.timer=0;} 103 | if(this.x<0||this.x>1000){ 104 | this.init(); 105 | return; 106 | } 107 | if(this.y<0||this.y>380){ 108 | this.init(); 109 | return; 110 | } 111 | 112 | } 113 | 114 | starObj.prototype.init=function(){ 115 | this.x=Math.random()*1000; //返回[0,1] 116 | this.y=Math.random()*380; 117 | 118 | this.picNo=Math.floor(Math.random()*7); 119 | this.timer=0; 120 | 121 | this.xSpeed=Math.random()*3-1.5; 122 | this.ySpeed=Math.random()*4-2; 123 | } 124 | 125 | starObj.prototype.draw=function(){ 126 | ctx.save(); 127 | 128 | ctx.globalAlpha=life; 129 | ctx.drawImage(starPic,this.picNo * 7,0,7,7,this.x,this.y,7,7); 130 | //globalAlpha全局透明度 131 | //save() 使两者之间的内容仅作用于两者之间 132 | // restore（） 133 | ctx.restore(); 134 | 135 | } 136 | 137 | function drawStars(){ 138 | for(var i=0;i 1) { 148 | life = 1; 149 | } 150 | } else { 151 | life -= 0.03 * delataTime * 0.05; 152 | if (life < 0) { 153 | life = 0; 154 | } 155 | } 156 | } 157 | --------------------------------------------------------------------------------