超炫酷的 HTML5 Canvas 全屏动画背景

今天要给大家分享一款超炫酷的HTML5 Canvas全屏动画背景,一共有7组Canvas动画。如果你的网页需要一种类似屏保动画的特效,那么这款HTML5 Canvas动画可以很好的满足你的需求。因为动画是全屏的,所以外观看上去也非常大气。...
Html5 Canvas

HTML5 Canvas圆盘抽奖应用

记得之前我们分享过一款基于jQuery的圆盘抽奖插件,可以在自己的网站中利用这个插件来给用户提供一些抽奖活动。今天要分享的也是一款圆盘抽奖应用,不过它是基于HTML5 Canvas的,运行原理也类似,都是利用随机数原理来实现开奖结果。...
圆盘抽奖 HTML5 Canvas

Canvas 绘制旋转的圆环百分比进度条

从上一篇的文章我们了解到了怎么使用 canvas 绘制一个圆。其实圆环相比就是它的边框加粗了而已,我们需要使用 stroke() 或 fill() 方法在画布上绘制实际的弧。而lineWidth则等于你需要的圆环大小即可。设置圆环的颜色和大小ctx.beginPath(); ctx.strokeStyle=#99CC33; ctx.lineCap=square; ctx.closePath(...
Canvas Html5

HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果。...
HTML5 Canvas 粒子效果

HTML5 Canvas粒子模拟效果

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些HTML5的特性,让这个粒子动画显得相当动感。...
粒子效果 HTML5 Canvas

HTML5 Canvas雨滴下落动画 超逼真

今天我们要来分享一款相当逼真的HTML5 Canvas雨滴下落动画,该动画模拟雨滴附在窗户上缓缓滑落的效果,同时窗户也因为雨滴而变得模糊,窗外的夜景便显得格外迷人。利用HTML5技术,该雨滴下落动画一共有5种不同的效果。由于Chrome的跨域限制,本地将无法运行,你可以在本站的在线演示中看到效果,或者将源代码上传至自己的服务器后浏览。...
雨滴动画 HTML5 Canvas

HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单。今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷。...
HTML5 Canvas 粒子效果

HTML5 Canvas炫酷的火焰风暴动画

利用HTML5技术,我们已经实现过不少关于火焰动画特效的HTML5应用,尤其是和Canvas搭配,比如HTML5动感的火焰燃烧动画特效和HTML5 Canvas火焰喷射动画效果。这次给大家带来的是一款基于HTML5 Canvas的火焰风暴动画特效,改动画效果就像从天上掉落火焰一样,火焰风暴逐渐蔓延到整一个画布。...
火焰风暴动画 HTML5 Canvas

HTML5 Canvas瀑布动画 超逼真

这次我们来分享一款很酷的HTML5 Canvas瀑布动画,瀑布动画非常逼真。整个瀑布动画像是从石头缝里流出来的溪水,然后沿着悬崖飞落下来,效果非常不错。...
HTML5 Canvas 瀑布动画

HTML5 Canvas彩色像素进度条动画

今天我们来推荐一款基于HTML5 Canvas的彩色像素进度条动画,它有两个特点,其一是进度条颜色会随着进度的改变而改变,其二是进度条更新时,会产生像素掉落的动画特效,很有创意。...
HTML5 Canvas 进度条