- 浏览: 585877 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
一个简单的动画:两个点在两个圆上运动。页面中有两个canvas,有一个背景设置为透明。
欢迎访问博主的网站:http://www.108js.com/link.html
效果图:
上面的代码没有使用jquery,下面这个使用了jquery
演示效果及源码下载:http://www.108js.com/article/article3/30068.html
欢迎访问博主的网站:http://www.108js.com/link.html
效果图:
<!DOCTYPE html> <html> <head> <title>Making things move</title> <meta charset="gbk"> <script type="text/javascript"> var canvas,context; var canvasWidth,canvasHeight; var playAnimation = true; var startButton,stopButton; var canvas1,context1; var shapes = new Array(); function init() { canvas = document.getElementById("myCanvas"); context = canvas.getContext("2d"); canvasWidth = canvas.width; canvasHeight = canvas.height; startButton = document.getElementById("startAnimation"); startButton.disabled="disabled"; stopButton = document.getElementById("stopAnimation"); shapes.push(new Shape(150, 150, 100,5)); shapes.push(new Shape(300, 300, 100,10)); var canvas1 = document.getElementById("myCanvas1"); var context1 = canvas1.getContext("2d"); context1.arc(150,150,100,0,2*Math.PI,true); context1.stroke();//绘制圆 context1.beginPath(); context1.arc(300,300,100,0,2*Math.PI,true); context1.strokeStyle="red"; context1.stroke();//绘制圆 startButton.onclick=function() { this.disabled="disabled"; stopButton.disabled=""; playAnimation = true; animate(); } stopButton.onclick=function() { this.disabled="disabled"; startButton.disabled=""; playAnimation = false; } animate(); } var Shape = function(x, y,radius,angle) { this.x = x; this.y = y; this.radius=radius; this.angle = angle; }; function animate() { context.clearRect(0, 0, canvasWidth, canvasHeight); var shapesLength = shapes.length; for (var i = 0; i < shapesLength; i++) { var tmpShape = shapes[i]; var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180))); var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180))); if(i==0) tmpShape.angle += 5; else tmpShape.angle += 10; if (tmpShape.angle > 360) { tmpShape.angle = 0; }; context.fillRect(x, y, 10, 10); } if (playAnimation) { setTimeout(animate, 33); } } </script> </head> <body onload="init();"> <canvas id="myCanvas" width="800" height="450" style="background-color: transparent;position:absolute"></canvas> <canvas id="myCanvas1" width="800" height="450"></canvas> <div> <button id="startAnimation">Start</button> <button id="stopAnimation">Stop</button> </div> </body> </html>
上面的代码没有使用jquery,下面这个使用了jquery
演示效果及源码下载:http://www.108js.com/article/article3/30068.html
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10029效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2378效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12906效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7396效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1586效果图: 点击观看效果:http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3212网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1374接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1666接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2338在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2497今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1083效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1939效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1667先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1914看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2928一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1787用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2225欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1406点击这里可以查看动画效果: http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2414<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1029创建HTML5的画布动画,我们可以使用requestAn ...
相关推荐
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary最新力作。...
高清版 HTML5 CANVAS核心技术图形动画与游戏开发(爱飞翔).pdf
HTML5 Canvas核心技术:图形、动画与游戏开发 mobi
基瑞编著的《HTML5Canvas核心技术:图形动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典、Amazon五星级超级畅销书、资深技术专家David Geary*...
低版本HTML2canvas 前端开发 生成海报 截图等功能 1.该脚本允许您直接在用户浏览器上对网页或其部分进行“截图”。屏幕截图基于 DOM,因此可能不是 100% 准确到真实表示,因为它不会制作实际的屏幕截图,而是根据...
html5 canvas表示我爱你:玫瑰花动画,非常逼真的玫瑰花,你相信这是用Canvas画出来的吗?不但需要HTML5技术,而且还需要有绘画工底哦,这朵玫瑰花还带有枝叶,非常佩服哦。
HTML5 Canvas核心技术 图形、动画与游戏开发
HTML5 Canvas核心技术:图形、动画与游戏开发 - (美)基瑞(Geary,D.)著
HTML5 Canvas核心技术图形、动画与游戏开发 PDF扫描版[71MB].rar
NULL 博文链接:https://128kj.iteye.com/blog/2066196
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
第1章 基础知识 1 1.1 canvas元素 1 1.1.1 canvas元素的大小与绘图表面的大小 4 1.1.2 canvas元素的api 5 1.2 canvas的绘图环境 6 1.2.1 2d绘图环境 6 1.2.2 canvas状态的保存与恢复 8 1.3 本书程序清单的...
最开始学习时,读了试读章节,感觉还不错。亲手编写了部分源码,但动画搞不定,还是找了源码下载。最后读完了试读章节,又找来了整本电子书阅读。
《HTML5 Canvas核心技术:图形、动画与游戏开发》是HTML5 Canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的经典、五星级畅销书、资深技术专家David Geary新力作。它不仅全面讲解了...
html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效 html5 canvas绘制几何图形动画特效
全屏背景动画的实现是由canvas完成
在HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款...
这是一款创意十足的html5 canvas粒子动画进度条加载特效,线条边框风格百分比进度条加载动画代码。