- 浏览: 580736 次
- 来自: ...
文章分类
最新评论
-
lgh1992314:
相同的元素呢
一种离散化方法 -
HelloSummerR:
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio:
好久没见到sokuban了,这有个java版的,带源码,可以参 ...
求推箱子的最小步数(java) -
肖泽文:
太好了,谢谢你。。有中文注释!
HTML5 推箱子游戏过关演示动画 -
swm8023:
删除操作,将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)(JAVA)
网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。
鼠标拖动或点按都可以“数钱”,效果图:
点击可以试玩:http://www.108js.com/article/canvas/money/index.html
欢迎访问博主网站:http://www.108js.com
一、HTML文件
二、app.js
三、图像装载器resources.js
四、源码下载。
鼠标拖动或点按都可以“数钱”,效果图:
点击可以试玩:http://www.108js.com/article/canvas/money/index.html
欢迎访问博主网站:http://www.108js.com
一、HTML文件
<html> <head> <style type="text/css"> html,body,canvas{ margin: 0px; padding: 0px; border:none; text-align: center; background-color: black; } canvas { background-color: green; } </style> </head> <body> <canvas id="stage" width="540" height="700"> 您的浏览器不支持html5, 请换用支持html5的浏览器</canvas> </body> </html> <script type="text/javascript" src="resources.js"></script> <script type="text/javascript" src="app.js"></script>
二、app.js
var c = document.getElementById("stage"); var ctx = c.getContext("2d"); var dragging = false; var w1=0; var loc; var dy=0; var h1=0; var int; //加载图片 resources.load([ 'img/splashtitle.png', 'img/starttip.png', 'img/mb0.png', 'img/m0.png' ]); //添加回调函数,图像加载完毕后执行,启动游戏 resources.onReady(init); function init() { w1=resources.get("img/mb0.png").width; h1=resources.get("img/mb0.png").height; ctx.drawImage(resources.get("img/splashtitle.png"),0,0); ctx.drawImage(resources.get("img/starttip.png"),c.width/2-30,c.height/2); ctx.drawImage(resources.get("img/mb0.png"),c.width/2-w1/2,c.height/2+82); } // 事件处理 c.onmousedown = function (e) { //鼠标按下 if(int){ clearInterval(int); dy=0; } dragging = true;//程序处于拖动状态 e.preventDefault(); } c.onmousemove = function (e) { //鼠标移动 if (dragging) { //窗口坐标转canvas坐标 loc = windowToCanvas(c, e.clientX, e.clientY); ctx.drawImage(resources.get("img/m0.png"),c.width/2-w1/2,loc.y); } } c.onmouseup = function (e) { //鼠标松开 dragging = false; loc = windowToCanvas(c, e.clientX, e.clientY); if(int){ clearInterval(int); dy=0; } int=setInterval(Animation,50); } function Animation(){ ctx.clearRect(0,0,c.width,c.height); ctx.drawImage(resources.get("img/splashtitle.png"),0,0); ctx.drawImage(resources.get("img/starttip.png"),c.width/2-30,c.height/2); ctx.drawImage(resources.get("img/mb0.png"),c.width/2-w1/2,c.height/2+82); ctx.drawImage(resources.get("img/m0.png"),c.width/2-w1/2,loc.y-dy); dy+=100; } //窗口坐标转canvas坐标............ function windowToCanvas(canvas, x, y) { var canvasRectangle = canvas.getBoundingClientRect(); return { x: x - canvasRectangle.left, y: y - canvasRectangle.top }; }
三、图像装载器resources.js
//图像装载器 (function() { var resourceCache = {};//缓存图片的数组 var loading = []; var readyCallbacks = [];//保存所有回调函数的数组 // 从一个url或一个数组装载图像 function load(urlOrArr) { if(urlOrArr instanceof Array) { urlOrArr.forEach(function(url) {//遍历数组中的每一个url,装载图像 _load(url); }); } else { _load(urlOrArr); } } //从一个url装载图像 function _load(url) { if(resourceCache[url]) {//缓存中有这个图片,直接返回它 return resourceCache[url]; } else { var img = new Image(); img.onload = function() {//图片加载完后 resourceCache[url] = img;//放入缓存 if(isReady()) {//全部图片加载后,执行全部回调函数 readyCallbacks.forEach(function(func) { func(); }); } }; resourceCache[url] = false;//标记这个图片还没加载 img.src = url; } } function get(url) {//从缓存中取图片 return resourceCache[url]; } function isReady() {//所有图片是否加载完毕 var ready = true; for(var k in resourceCache) {//遍历缓存图片的数组 if(resourceCache.hasOwnProperty(k) && !resourceCache[k]) {//只要有一个图片没加载,返回false ready = false; } } return ready;//当全部图片加载到缓存中后,返回true,否则返回false; } function onReady(func) {//添加回调函数 readyCallbacks.push(func); } window.resources = { //定义一个对象 load: load, get: get, onReady: onReady, isReady: isReady }; })();
四、源码下载。
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10014效果图: 效果链接:http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2348效果图: 效果链接: http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12882效果图: 效果链接: http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7369效果图: 效果链接: http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1573效果图: 点击观看效果:http://www.108js. ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三(游戏面板)
2014-07-05 07:13 1365接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二(方块)
2014-07-04 13:08 1654接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一(色块)
2014-07-04 10:53 2320在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏(数字版)
2014-06-28 17:38 2475今天网上发现了一段代码,只有界面,很不错,学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1068效果图: 点击查看效果: http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1923效果图: 点击看效果: http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1654先要准备应付各种浏览器的声音文件,什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1894看到哪,学到哪,记到哪。见谅,这些笔记就没有顺序和知识上的连贯 ... -
HTML5 Canvas学习笔记(1)处理鼠标事件
2014-06-21 17:48 2909一直在学习HTML5 Canvas相关内容,游戏,动画 ... -
javaScript 广度优先搜索法"自动推箱子"(一)
2014-06-12 09:45 1774用JS写了一个“广度优先搜索法”自动推箱子,理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2206欢迎访问博主的网站:http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1384点击这里可以查看动画效果: http://www.108js. ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2404<!DOCTYPE HTML> <html& ... -
HTML5 Canvas动画模板
2014-05-21 10:59 1008创建HTML5的画布动画,我们可以使用requestAn ... -
HTML5 Canvas 圆弧动画(绕四周运动)
2014-05-14 10:44 2723点击这里可以看到动画效果: http://www.108js. ...
相关推荐
炫酷的HTML5 canvas效果展示, 代码结构简单,有利于开发者参考使用。
NULL 博文链接:https://128kj.iteye.com/blog/2083289
Android—BitMap与Canvas学习笔记
NULL 博文链接:https://128kj.iteye.com/blog/2085698
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
NULL 博文链接:https://128kj.iteye.com/blog/2086331
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas 播放视频html5 canvas 播放视频
html5 canvas云粒子数字时钟动画特效 html5 canvas云粒子数字时钟动画特效
资源名称:HTML5 Canvas基础教程内容简介:《HTML5 Canvas基础教程》从HTML5和Javascript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复...
NULL 博文链接:https://128kj.iteye.com/blog/2085273
NULL 博文链接:https://128kj.iteye.com/blog/2084722
html5 canvas制作15种数字时钟样式代码 html5 canvas制作15种数字时钟样式代码
NULL 博文链接:https://128kj.iteye.com/blog/2088202
NULL 博文链接:https://128kj.iteye.com/blog/2084146
html5 canvas 制作流程图 EaselJS html5 canvas 制作流程图 EaselJS
《HTML5 Canvas核心技术》内的实例代码
HTML5 Canvas 经典学习教程, HTML5 Canvas 经典学习教程-HTML5 Canvas Study,HTML5 Canvas Study,HTML5 Canvas Study