html52d,html52d动画照片墙源码

html5 canvas标签下的2D作图功能

一个最简单的案例:通过 canvas 元素来显示一个红色的矩形

成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于做网站、成都网站设计、华池网络推广、成都小程序开发、华池网络营销、华池企业策划、华池品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供华池建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

canvas id="myCanvas"/canvas

script type="text/javascript"

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='#FF0000';

ctx.fillRect(0,0,80,100);

/script

如何用 HTML5 制作素描动画

首先,你要创建一个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);

}

html5怎样做出图片转圈的动画效果

可以使用css3中的rotate实现

实际的旋转效果是这样:

rotate中的 60deg 表示按最原始的位置,顺时针旋转60°

w3school 里面有更详细用法,可以2D旋转、3D旋转

可以参考:网页链接

动画效果可以通过js改变rotate中传入的值来实现

html5如何让金币从Canvas2D图层前落下

你好,可以设置金币掉落的样式为最外面就可以了,设置样式z-index:9999;显示在最外层

希望可以帮助到你


分享文章:html52d,html52d动画照片墙源码
网页网址:http://pwwzsj.com/article/dsseooo.html