java html5 canvas wo

html5 javascript实现canvas里边多图层显示怎么弄

MYJZTvar c=document.getElementById(＂myCanvas＂); var cxt=c.getContext(＂2d＂); cxt.strokeStyle=＂black＂; cxt.beginPath(); cxt.moveTo(200,0); cxt.lineTo(0,400); cxt.lineTo(400,400); cxt.lineTo(200,0); cxt.moveTo(200,0);cxt.lineTo(50,200);cxt.lineTo(0,400);cxt.moveTo(200,0);cxt.lineTo(350,200);cxt.lineTo(400,400);cxt.closePath(); cxt.stroke();<&#47;script>

html5 canvas的drawImage,如果有一堆图片,名字分别是0,1,2,3。
。
...

可以参考JavaScript Image Preloader 。

我写了一个代码，你看一下：无标题文档var ctx=document.getElementById('pad').getContext('2d');var imageObj=new Image();preloader();imageObj.onload=function(){for(var i=0;i<6;i++)ctx.drawImage(imageObj,0+i*20,0+1*20,80,40);}function preloader(){// countervar i = 0;// create object//imageObj = new Image();// set image listimages = new Array();images[0]=＂images/0.jpg＂images[1]=＂images/1.jpg＂images[2]=＂images/2.jpg＂images[3]=＂images/3.jpg＂images[4]=＂images/4.jpg＂images[5]=＂images/5.jpg＂// start preloadingfor(i=0; i<=3; i++){imageObj.src=images[i];}}<&#47;script>

最近在用javascript写坦克大战,想请教一下用HTML5的canvas画出障...

设置 block类型，设置全局帧对墙进行定义例如{type:＂wall＂level:2life:3}{type:＂road＂level:1life:0}这里的每个block都要事先定义好大小，然后就是全局帧的坐标判断了子弹你可以想象成一个飞行的block，然后通过坐标判断，每次刷新是road就通行，如果是wall就击中，当wall的life为零就消失

...='hidden' 之后提交给后台. HTML5,PHP,Javascript,canvas

颜色真难弄没找到规律你研究下吧<!DOCTYPE HTML>#myCanvas{width: 400px;height: 200px;}your browser does not support the canvas tag var canvas=document.getElementById('myCanvas');var c=canvas.getContext('2d');//红色c.fillStyle='#f00';c.fillRect(0,0,10,10);c.fillStyle='#f22';c.fillRect(0,12,10,10);c.fillStyle='#f44';c.fillRect(0,24,10,10);c.fillStyle='#f88';c.fillRect(0,36,10,10);c.fillStyle='#faa';c.fillRect(0,48,10,10);c.fillStyle='#fcc';c.fillRect(0,60,10,10);c.fillStyle='#fee';c.fillRect(0,72,10,10);//紫色c.fillStyle='#f0a';c.fillRect(12,0,10,10);c.fillStyle='#e550a1';c.fillRect(12,12,10,10);c.fillStyle='#e960a8';c.fillRect(12,24,10,10);c.fillStyle='#ed86db';c.fillRect(12,36,10,10);c.fillStyle='#f2a6cd';c.fillRect(12,48,10,10);c.fillStyle='#f7c0dd';c.fillRect(12,60,10,10);c.fillStyle='#fce2ef';c.fillRect(12,72,10,10);<&#47;script>

怎样用HTML5 Canvas制作一个简单的游戏

创建画布// Create the canvasvar canvas = document.createElement(＂canvas＂);var ctx = canvas.getContext(＂2d＂);canvas.width = 512;canvas.height = 480;document.body.appendChild(canvas)；首先我们需要创建一张画布作为游戏的舞台。

这里通过JS代码而不是直接在HTML里写一个元素目的是要说明代码创建也是很方便的。

有了画布后就可以获得它的上下文来进行绘图了。

然后我们还设置了画布大小，最后将其添加到页面上。

准备图片// 背景图片var bgReady = false;var bgImage = new Image();bgImage.onload = function () { bgReady = true;};bgImage.src = ＂images/background.png＂；游戏嘛少不了图片的，所以我们先加载一些图片先。

简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。

bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。

整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。

游戏对象// 游戏对象var hero = { speed: 256， // 每秒移动的像素 x: 0, y: 0};var monster = { x: 0, y: 0};var monstersCaught = 0；现在定义一些对象将在后面用到。

我们的英雄有一个speed属性用来控制他每秒移动多少像素。

怪物游戏过程中不会移动，所以只有坐标属性就够了。

monstersCaught则用来存储怪物被捉住的次数。

处理用户的输入// 处理按键var keysDown = {};addEventListener(＂keydown＂, function (e) { keysDown[e.keyCode] = true;}, false);addEventListener(＂keyup＂, function (e) { delete keysDown[e.keyCode];}, false）；现在开始处理用户的输入（对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了）。

在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。

所以我们就把用户的输入先保存下来而不是立即响应。

为此，我们用keysDown这个对象来保存用户按下的键值（keyCode），如果按下的键值在这个对象里，那么我们就做相应处理。

开始一轮游戏// 当用户抓住一只怪物后开始新一轮游戏var reset = function () { hero.x = canvas.width / 2; hero.y = canvas.height / 2； // 将新的怪物随机放置到界面上 monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64));};reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。

更新对象// 更新游戏对象的属性var update = function (modifier) { if (38 in keysDown) { // 用户按的是↑ hero.y -= hero.speed * modifier; } if (40 in keysDown) { // 用户按的是↓ hero.y += hero.speed * modifier; } if (37 in keysDown) { // 用户按的是← hero.x -= hero.speed * modifier; } if (39 in keysDown) { // 用户按的是→ hero.x += hero.speed * modifier； } // 英雄与怪物碰到了么？ if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset（)； }}；这就是游戏中用于更新画面的update函数，会被规律地重复调用。

首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。

有点费脑力的或许是这个传入的modifier 变量。

你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。

它是基于1开始且随时间变化的一个因子。

例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。

理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。

现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。

这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。

渲染物体// 画出所有物体var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); } if (heroReady) { ctx.drawImage(heroImage, hero.x, hero.y); } if (monsterReady) { ctx.drawImage(monsterImage, monster.x, monster.y)； } // 计分 ctx.fillStyle = ＂rgb(250, 250, 250)＂; ctx.font = ＂24px Helvetica＂; ctx.textAlign = ＂left＂; ctx.textBaseline = ＂top＂; ctx.fillText(＂Monsterrs caught: ＂ + monstersCaught, 32, 32)；}；之前的工作都是枯燥的，直到你把所有东西画出来之后。

首先当然是把背景图画出来。

然后如法炮制将英雄和怪物也画出来。

这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。

这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。

本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！主循环函数// 游戏主函数var main = function () { var now = Date.now(); var delta = now - then; update(delta /...

关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在...

展开全部首先，你这个代码中最后的setInterval(＂draw()＂, 100）；应该改为setInterval(draw, 100)；第一个参数应该是方法名，虽然你那样写也会有效，但强烈建议不要那么写。

然后你说你的代码只是在屏幕上闪一下，那么你在画的时候先调一下cxt.beginPath（)；画结束的时候掉一下cxt.closePaht（)；试试，这个w3c网站上有讲解，不确定能不能解决你的问题。

补充：测了一下代码，发现问题是出在你的img.onload=function() { cxt.drawImage(img,x,y,80,80)； }这里，这边不能在img.onload回调方法中调用画图函数，直接画图就好了， cxt.drawImage(img,x,y,80,80)；就这样。

...