包含动漫展示网站html5源代码的词条

本篇文章给大家谈谈动漫展示网站html5源代码，以及对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、怎么运行 html5游戏的源代码
• 2、关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来,代码如下,
• 3、HTML5编写的网站，网页浏览能否看到源代码？
• 4、如何用HTML5 Canvas制作子画面动画
• 5、如何使用Createjs来编写HTML5游戏TweenJS和Tick动画

怎么运行 html5游戏的源代码

1、打开任意一个网站，根据自己的需要选择。

2、如图点击右上角三条横杠的按钮。

3、点击”工具“选项。

4、点击”查看源代码“。

5、如图，就可以轻松查看到了该网站的源代码。

6、如果想关闭网页源代码，只需点击左上角“返回”按钮，这样就完成了。

关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在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);就这样。

HTML5编写的网站，网页浏览能否看到源代码？

可以，在浏览器中，如果没有特别设置快捷键的话，按F12就可以看到源代码，当然右击然后选择审查元素也是可以的。

如何用HTML5 Canvas制作子画面动画

  首先，你要创建一个HTML页面，其中包含如下canvas标签：

!doctype html

html

head

title/title

/head

body style=’position: absolute; padding:0; margin:0; height: 100%; width:100%’

canvas id=”gameCanvas”/canvas

/body

/html

     如果你载入以上代码，当然什么也不会出现。那是因为虽然我们有一个canvas标签，但我们还没在上面绘制任何东西。我们来添加一些简单的canvas命令来绘制小箱子吧。

head

title/title

script type=’text/javascript’

var canvas = null;

function onload() {

canvas = document.getElementById(‘gameCanvas’);

var ctx = canvas.getContext(“2d”);

ctx.fillStyle = ‘#000000′;

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = ‘#333333′;

ctx.fillRect(canvas.width / 3, canvas.height / 3, canvas.width / 3,

canvas.height / 3);

}

/script

/head

body onload=’onload()’ …

    在这个例子中，我已经在body标签中添加了一个onload事件，然后执行功能获得画布元素，并绘制几个箱子。非常简单。

result 1(from webappers.com)

     这个箱子不错，但你会注意到，画布没有铺满整个浏览器窗口。为了解决这个问题，我们可以增加画布的宽度和高度。我是指根据画布所包含的文件元素的大小来灵活地调整画布尺寸。

var canvas = null;

function onload() {

canvas = document.getElementById(‘gameCanvas’);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

…

    加载后，会看到画布铺满整个屏幕了。太好了。

    再进一步，如果浏览器窗口大小是由用户调整的，还要重置画布的尺寸。

var canvas = null;

function onload() {

canvas = document.getElementById(‘gameCanvas’);

resize();

}

function resize() {

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight;

var ctx = canvas.getContext(“2d”);

ctx.fillStyle = ‘#000000′;

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = ‘#333333′;

ctx.fillRect(canvas.width/3, canvas.height/3, canvas.width/3, canvas.height/3);

}

    添加onresize命令到body标签。

body onresize=’resize()’ …

    现在，如果你调整浏览器的大小，矩形应该如下图所示。

result 2(from webappers.com)

载入图像

     大部分游戏都需要动画的子画面，所以我来添加一些图像吧。

     首先，你需要图像资源。因为我们要用javascript绘制它，所以我觉得先声明图像然后设置它的src属性为你想载入的图像的URL，比较合理。

var img = null;

function onload() {

…

img = new Image();

img.src = ‘simba.png’;

}

    然后你可以通过添加这个到resize方法中来绘制图像：

ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));

     如果重新载入页面后，在大部分情况下，会看到图像出现了。不过我说的是大部分情况下，因为这取决于机器跑得有多快、浏览器是否已经缓存了图像。那是因为resize方法的调用时间介于开始载入图像（设置它的src属性）的时间到浏览器准备好的时间之间。对于一两张图像，这个方法可能不错，但当的游戏开始变大时，就必须等到所有图像加载完才能执行活动。

     给图像添加一个通知监听器，这样当图像准备就绪时就会收到回叫信号。我得重新整理一下，以下是更新过的代码：

var canvas = null;

var img = null; var ctx = null;

var imageReady = false;

function onload() {

canvas = document.getElementById(‘gameCanvas’);

ctx = canvas.getContext(“2d”);

img = new Image();

img.src = ‘images/simba.png’;

img.onload = loaded();

resize();

}

function loaded() {

imageReady = true; redraw();

}

function resize() {

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentNode.clientHeight; redraw();

}

function redraw() {

ctx.fillStyle = ‘#000000′;

ctx.fillRect(0, 0, canvas.width, canvas.height);

if (imageReady)

ctx.drawImage(img, canvas.width/2 – (img.width/2), canvas.height/2 – (img.height/2));

}

结果应该是：

     这个图像显示了的6个奔跑帧。为了把这个子画面做成动画，必须每次绘制一个帧。

子画面动画

    可以用drawImage命令的源参数绘制一个帧。事实上，是只绘制源图像的一部分。所以为了绘制这唯一的第一帧，使用允许你指定源图像中的矩形的drawImage的拓展版。因为的猫动画是由6个96 x 96象素大小的帧组成的，可以添加：

ctx.drawImage(img, 0, 0, 96, 54, canvas.width/2 – 48, canvas.height/2 – 48, 96, 54);

    这里的关键是起点（0, 0, 96, 54）。这限制被绘制图像为猫动画的第一帧。还设置根据单帧来居中，而不是包含所有6帧的整个图像尺寸。

    现在总算有点意思了。为了让图像动起来，我必须追踪要绘制的帧，然后随着时间推进帧数。为此，必须把静止页面做成隔时循环的页面。

    按照老方法来做。添加60帧每秒间隔计时器。为了保证只有图像加载后才开始循环动画，要在loaded功能中添加以下命令：

function loaded() {

imageReady = true;

setTimeout( update, 1000 / 60 );

}

    添加更新后的函数，然后调用redraw：

var frame = 0;

function update() {

redraw(); frame++;

if (frame = 6) frame = 0;

setTimeout( update, 1000 / 60 );

}

      当绘制后且帧推进完，计时器就会重置。

      下一步，调整绘制图像，使源窗口根据我们想要绘制的那一帧位置来移动（关键是给帧设置的源X位置，是帧乘上帧的大小）。

function redraw() {

ctx.fillStyle = ‘#000000′;

ctx.fillRect(0, 0, canvas.width, canvas.height);

if (imageReady)

ctx.drawImage(img, frame*96, 0, 96, 54,

canvas.width/2 – 48, canvas.height/2 – 48, 96, 54);

}

结果如下：

如何使用Createjs来编写HTML5游戏TweenJS和Tick动画

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。

首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。

接下来开始分析代码：

首先引入js文件

script

src="easeljs-0.7.1.min.js"/script

script

src="preloadjs-0.4.1.min.js"/script

然后进行舞台初始化操作：

function

init(){

stage

=

new

createjs.Stage("cas");

C_W

=

stage.canvas.width;

C_H

=

stage.canvas.height;

var

manifest

=

[

{src:"image/man.png"

,

id:"man"},

{src:"image/ground.png"

,

id:"ground"},

{src:"image/bg.png"

,

id:"bg"},

{src:"image/high.jpg"

,

id:"high"},

{src:"image/coins.png"

,

id:"coin"}

]

loader

=

new

createjs.LoadQueue(false);

loader.addEventListener("complete"

,

handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

动漫展示网站html5源代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于、动漫展示网站html5源代码的信息别忘了在本站进行查找喔。