分享8款令人惊叹的HTML5 Canvas动画特效 | HTML5资源教程HTML5中的Canvas（使用） | 目光博客
Theme | Powered by网页游戏 - HTML源码 - 源码之家
大小：816K
技术：HTML/CSS/JS
更新日期:&&HTML5手机端健康消消乐小游戏，是一款三消类休闲游戏，游戏画面精美、上手简单。
技术：HTML/CSS/JS
更新日期:&&HTML5像素小鸟飞行游戏，是一款简单又困难的手机游戏，游戏中玩家必须控制一只胖乎乎的小鸟，跨越由各种不同长度水管所组成的障碍。上手容易，但是想通关可不简单。
大小：114K
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&HTML5猜杯子最强眼力小游戏，很经典的猜谜小游戏，有三个杯子，你会看到一直杯子里有一个金币，然后这三个杯子开始移动，你只要看准后猜金币在哪个杯子里，越往后杯子移动的速度越快，就看你的眼力了。
大小：2499K
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&HTML5canvas俄罗斯方块小游戏，面向对象方式写的，彩色俄罗斯方块游戏。
大小：191K
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&HTML5网页版五子棋小游戏通过原生js和canvas实现五子棋小游戏，可以试下左右手互搏。
大小：719K
人气:<FONT color=#FF
技术：HTML/CSS/jQuery
更新日期:&&HTML5移动端圣诞老人过桥小游戏基于jquery-2.1.1.min.js制作，点击桥面进行游戏。
人气:<FONT color=#FF
技术：HTML/CSS/jQuery
更新日期:&&HTML5canvas趣味飞机捡金币小游戏，键盘方向键控制飞机分行。
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&JS经典俄罗斯方块小游戏，键盘操作。
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&HTML5canvas小人推箱子小游戏，原生JS编写，用键盘上的上、下、左、右键移动小人，把箱子全部推到小球的位置即可过关。箱子只可向前推，不能往后拉，并且小人一次只能推动一个箱子。
人气:<FONT color=#FF
技术：HTML/CSS/JS
更新日期:&&HTML5canvas简单五子棋小游戏，运用JS实现简单五子棋游戏代码。
(Windows2003下Internet信息服务器)
(经典的HTML网页编辑器)
(HTML网页开发工具)
(图像处理软件中的大哥大)
(网页做图软件)
(制作Flash动画)
(免费代码编辑器，可取代记事本)
(下载速度快，多资源超线程技术)自己写的HTML5吃豆游戏
很早就知道canvas，当时一直没应用到，最近闲来无事就顺便写写看。吃豆游戏可以说是我们80，90后共同的回忆录，小时候常常在学习机上玩，所以也就有了强烈的欲望去写。为了写这个游戏，看了很多吃豆人游戏的相关信息，包括游戏规则，历史，其它相关游戏设计。又去了各个小游戏平台玩了下，找些灵感！！！就连最简单的配色，也是反复斟酌几个小时确定的方案……哈哈，不容易啊
代码分两部分，游戏引擎和游戏主程序，引擎用来类的定义，管理动画场景，事件定义等等……游戏主程序主要组织业务逻辑。算面向对象编程吧，可以参考下 版权所有哦，哈哈～可以关注获得最新代码！纯手工打造
是男人就吃光所有豆子!!!
html 代码片段效果预览&html&
&meta charset=&utf8&&
&title&Pac-Man . 吃豆游戏&/title&
*{padding:0;margin:0;}
width: 960
line-height:36
text-align:
color:#999;
canvas{display:background: #000;}
&div class=&wrapper&&
&canvas id=&canvas& width=&960& height=&640&&不支持画布&/canvas&
&p&按［空格］暂停或继续&/p&
&script src=&/pacman/game.js&&&/script&
&script src=&/pacman/index.js&&&/script&
域名服务商有很多啊，西部数码、新网、万网、商务中国 //：就是向自己注册个域名 //：域名服务商注册的呀！现在你是注册不到了，因为已经是被我注册啦 //：这个域名是怎么申请的呢？
就是向自己注册个域名 //：域名服务商注册的呀！现在你是注册不到了，因为已经是被我注册啦 //：这个域名是怎么申请的呢？
域名服务商注册的呀！现在你是注册不到了，因为已经是被我注册啦 //：这个域名是怎么申请的呢？
这个域名是怎么申请的呢？
可以做，只是我没做 //：请问大神，这个可以做移动端适配吗
请问大神，这个可以做移动端适配吗
其实不难的，可以去github上看我的源代码 //：大神，好腻害
大神，好腻害
没有坐标系啊，只有地图……就是二维数组的位置；pacman和豆子的定位都是二维数组的坐标，和自身的尺寸无关，自身尺寸实际上是超过地图中单位方格的尺寸的，这样路可以比墙壁宽；20的单位不是像素，而是多少帧刷新一次 //：楼主 有个坐标系的问题想问你下,&&你的豆子Map的数据是 28 * 31的长度, 这个怎么映射到stage的坐标系上?&&还有pacman的width和height都是20, 那半径就是10, 所以pacman为(10, 10)的话, 豆子在(30, 10)吗? 那pacman的行进速度是以20为单位吗? speed=1为20px, speed=2为40px, 吃两个豆?&&游戏的思维不是很好...麻烦解释下....谢谢
楼主 有个坐标系的问题想问你下,&&你的豆子Map的数据是 28 * 31的长度, 这个怎么映射到stage的坐标系上?&&还有pacman的width和height都是20, 那半径就是10, 所以pacman为(10, 10)的话, 豆子在(30, 10)吗? 那pacman的行进速度是以20为单位吗? speed=1为20px, speed=2为40px, 吃两个豆?&&游戏的思维不是很好...麻烦解释下....谢谢
在我的github上有啊，搜索用户/mumuy/pacman //：你写的代码能不能分享给我一下了&&， 我也想学学
你广告了。。。 //：OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台，可以定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~
用requestAnimationFrame //：楼主, canvas动画用timeout好还是setInterval好? 还有别的办法来实现动画吗?, 谢谢
楼主, canvas动画用timeout好还是setInterval好? 还有别的办法来实现动画吗?, 谢谢
OneAPM Browser Insight是一个基于真实用户的 Web 前端性能监控平台，可以定位网站性能瓶颈，网站加速效果可视化；支持浏览器、微信、App 浏览 HTML 和 HTML5 页面。可以在官网注册体验哦~
15 总笔记数
15.8万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：HTML5中使用Canvas的使用样例1 （画布定义、绘制直线）-html5教程-网页制作-壹聚教程网HTML5中使用Canvas的使用样例1 （画布定义、绘制直线）
Canvas在html中可以绘制不同的图形了，我们可以使用Canvas来做许多的事情，下面一起来看一些小编整理的关于Canvas的使用例子。
1，Canvas的定义
&canvas id=&myCanvas& width=&400& height=&200&&
默认&canvas&画布在页面上会显示一块空白、无边框的矩形。为了让其显示轮廓，通过定义样式规则给其添加一个虚线边框：
&&& border: 1
2，获取Canvas的上下文对象
要完成绘图任务，首先我们要拿到&canvas&对象，接着取得其二维绘图上下文。
下面样例演示在页面加载完毕时获取绘图上下文：
&&& window.onload = function() {
&&&&&&& var canvas = document.getElementById(&myCanvas&);
&&&&&&& var context = canvas.getContext(&2d&);
&&&&&&& //这里写绘图代码
（1）下面绘制一条起点是(50,50)，终点是(150,150)的直线线条
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
（2）使用lineWidth、strokeStyle属性分别设置线条的宽度和颜色
//线条宽度
context.lineWidth = 10;
//线条颜色（支持颜色编码与rgb()函数）
context.strokeStyle = &#cd2828&;
context.strokeStyle = &rgb(205,40,40)&;
context.moveTo(50, 50);
context.lineTo(150, 150);
context.stroke();
（3）使用 lineCap 属性设置线条两端的形状（线头类型）：
butt：方头（默认值）
round：圆头
square：加长方头（效果与butt类似，但会在线条的两头各增加一半线宽的长度）
var canvas = document.getElementById(&myCanvas&);
var context = canvas.getContext(&2d&);
//线条宽度
context.lineWidth = 10;
//线条颜色
context.strokeStyle = &#cd2828&;
//第一条直线,默认方头
context.moveTo(50, 50);
context.lineTo(250, 50);
context.stroke();
//第二条直线,使用圆头
context.beginPath();
context.moveTo(50, 100);
context.lineTo(250, 100);
context.lineCap = &round&;
context.stroke();
//第三条直线,使用加长方头
context.beginPath();
context.moveTo(50, 150);
context.lineTo(250, 150);
context.lineCap = &square&;
context.stroke();
注：绘图上下文的beginPath()方法
上面样例可以看到每次开始新线段的绘制时，都要调用 beginPath() 方法。
如果没有这一步操作，那么每次调用 stroke() 都会把画布上原有的线段再重新绘制一边。特别像上面的例子，绘制新线段时都要修改上下文属性，如果不调用 beginPath() 方法，那么原有的直线也会使用新的样式绘制。
HTML5 Canvas 多层圆环动画
1.HTML和CSS准备
&! DOCTYPE HTML&
&HTML&&HEAD&&META CHARSET = 'UTF-8'&
&TITLE&ROTATE CIRCLR&/TITLE&
&style type='text/css' rel='stylesheet'&
& margin: 0
&& background:#
&& margin: 0
&&canvas id='canvas' width=&1366& height=&576&& CANVAS CANNOT SUPPORTED! &/canvas&
&var canvas = document.getElementById('canvas');
& var context = canvas.getContext('2d');
//参数定义
var CircleRadius = 10,//小圆的半径
&&& RGB,//颜色
&&& Angle, //角度
&&& //计数器
&&& NumOfSmallCircle=7, //最里层小圆的数量
&&& NumOfRing=6,& //圆形环数
&&& AngleChangeSize = 0, //角度转动的程度
&&& Direction, //圆圈转的方向，1为顺时针，-1为逆时针
&&& //轨迹半径计算（因为考虑到轨迹上任意两圆的圆心到大圆的圆心距离相等，所以三点
&&&&& //可以构成一个等腰三角形，我们再根据等腰三角形求边长的公式计算）
&& PathRadius = (CircleRadius*2+1)/2/(Math.sin(Math.PI*2/NumOfSmallCircle/2));
&& function DrawCircle(AngleChange){
&&& for(var i=1;i&=NumOfRi++)
&&&&&&& //用于图片旋转方向的判定设置
&&&&&&& if(i%2==1)
&&&&&&&&&&& Direction=1;
&&&&&&& } else {
&&&&&&&&&&& Direction=-1;
&&&&&&& RGB = Math.floor(Math.random()*255);
&&&&&&& for(var j=1;j&=NumOfSmallCircle*i;j++)
&&&&&&&&&&& //计算角度
&&&&&&&&&&& Angle = (Math.PI*2/NumOfSmallCircle/i*j)+(Math.PI*2/360*AngleChange*Direction);
&&&&&&&&&&& context.beginPath();
&&&&&&&&&&& //绘制小圆位置
&&&&&&&&&&& context.arc(canvas.width/2+PathRadius*(i)*Math.cos(Angle),
&&&&&&&&&&&&& canvas.height/2+PathRadius*(i)*Math.sin(Angle),CircleRadius,0,Math.PI*2,true);
&&&&&&&&&&& //设置变化的RGB值
&&&&&&&&&&& context.fillStyle = 'rgb('+RGB+','+Math.floor(RGB/4)+','+(255-RGB)+')';
&&&&&&&&&&& context.fill();
function Draw(){
&&& //擦除上次的画圆结果，使得小圆的变化看起来是动态的
&&& //如果不懂的话，注释掉下面一行，再看效果
&&& context.clearRect(0,0,canvas.width,canvas.height);
&&& //用于滚动设置
&&& AngleChangeSize==360?AngleChangeSize=0:AngleChangeSize++;
&&& DrawCircle(AngleChangeSize);
var LOOP = setInterval('Draw()',150);
其实这个的原理简单来讲就是：变换位置画圆，而变换的规则是按另一个圆的轨迹来进行的。也就是说，小圆的所有圆心都在大圆的轨迹上。 它由一个时间函数来控制，使得小圆（马猴烧酒）的位置随时间不停变化，并在旋转一周后将滚动值置零，循环画圆。 本例中每层圆的数目都是以倍数增加的，这个每层增加的圆的计算方法可以自己去设置，这里只是提供演示。至于角度的变化方法 是用 Math.PI*2/N 这里N是指每层圆的数目
HTML5 Canvas火焰动画
&!DOCTYPE HTML&
&&meta charset=utf-8& /&
&&title&一个很酷的火焰效果&/title&
&&style type=&text/css&&
&& margin: 0; padding: 0;
& #canvas-keleyi-com {display:}
&&canvas id=&canvas-keleyi-com&&&/canvas&
&&script type=&text/&&
& window.onload = function(){
&& var keleyi_canvas =
&&&& document.getElementById(&canvas-kel&+&eyi-com&);
&& var ctx = keleyi_canvas.getContext(&2d&);
&& var W = window.innerWidth, H = window.innerH
&& keleyi_canvas.width = W;
&& keleyi_canvas.height = H;
&var particles = [];
& var mouse = {};
& //Lets create some particles now
& var particle_count = 100;
& for(var i = 0; i & particle_ i++)
&&& particles.push(new particle());
& keleyi_canvas.addEventListener('mousemove', track_mouse, false);
& function track_mouse(e)
&& mouse.x = e.pageX;
&& mouse.y = e.pageY;
& function particle()
&& this.speed = {x: -2.5+Math.random()*5, y: -15+Math.random()*10};
&&& //location = mouse coordinates
&&& //Now the flame follows the mouse coordinates
&& if(mouse.x && mouse.y)
&&& this.location = {x: mouse.x, y: mouse.y};
&& this.location = {x: W/2, y: H/2};
& //radius range = 10-30
& this.radius = 10+Math.random()*20;
& //life range = 20-30
& this.life = 20+Math.random()*10;
& this.remaining_life = this.
& //colors
& this.r = Math.round(Math.random()*255);
& this.g = Math.round(Math.random()*255);
& this.b = Math.round(Math.random()*255);
function draw()
& ctx.globalCompositeOperation = &source-over&;
& ctx.fillStyle = &black&;
& ctx.fillRect(0, 0, W, H);
& ctx.globalCompositeOperation = &lighter&;
& for(var i = 0; i & particles. i++)
&& var p = particles[i];
&& ctx.beginPath();
&& p.opacity = Math.round(p.remaining_life/p.life*100)/100
&& var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
&& gradient.addColorStop(0, &rgba(&+p.r+&, &+p.g+&, &+p.b+&, &+p.opacity+&)&);
&& gradient.addColorStop(0.5, &rgba(&+p.r+&, &+p.g+&, &+p.b+&, &+p.opacity+&)&);
&& gradient.addColorStop(1, &rgba(&+p.r+&, &+p.g+&, &+p.b+&, 0)&);
&& ctx.fillStyle =
&& ctx.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);
&& ctx.fill();
&& p.remaining_life--;
&& p.radius--;
&& p.location.x += p.speed.x;
&& p.location.y += p.speed.y;
& if(p.remaining_life & 0 || p.radius & 0)
&& particles[i] = new particle();
setInterval(draw, 86);
上一页： &&&&&下一页：相关内容