html5示例的简单介绍

如何制作html5的动画效果？

主要思想：\x0d\x0a首先要准备一张有连续帧的图片，然后利用HTML5Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。\x0d\x0a关键技术点：\x0d\x0aJavaScript函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，\x0d\x0a另外一个参数代表间隔时间，单位为毫秒数。代码示例：\x0d\x0asetTimeout(update,1000/30);\x0d\x0aCanvas的API-drawImage()方法，需要指定全部9个参数：\x0d\x0actx.drawImage(myImage,offw,offh,width,height,x2,y2,width,height);\x0d\x0a其中offw,offh是指源图像的起始坐标点，width,height表示源图像的宽与高，x2,y2表\x0d\x0a示源图像在目标Canvas上的起始坐标点。\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0aCanvasMouseEventDemo\x0d\x0a\x0d\x0a\x0d\x0avarctx=null;globalvariable2dcontext\x0d\x0avarstarted=false;\x0d\x0avarmText_canvas=null;\x0d\x0avarx=0,y=0;\x0d\x0avarframe=0;225*5+2\x0d\x0avarimageReady=false;\x0d\x0avarmyImage=null;\x0d\x0avarpx=300;\x0d\x0avarpy=300;\x0d\x0avarx2=300;\x0d\x0avary2=0;\x0d\x0awindow.onload=function(){\x0d\x0avarcanvas=document.getElementById("animation_canvas");\x0d\x0aconsole.log(canvas.parentNode.clientWidth);\x0d\x0acanvas.width=canvas.parentNode.clientWidth;\x0d\x0acanvas.height=canvas.parentNode.clientHeight;\x0d\x0aif(!canvas.getContext){\x0d\x0aconsole.log("Canvasnotsupported.PleaseinstallaHTML5compatiblebrowser.");\x0d\x0areturn;\x0d\x0a}\x0d\x0aget2Dcontextofcanvasanddrawrectangel\x0d\x0actx=canvas.getContext("2d");\x0d\x0actx.fillStyle="black";\x0d\x0actx.fillRect(0,0,canvas.width,canvas.height);\x0d\x0amyImage=document.createElement('img');\x0d\x0amyImage.src="..robin.png";\x0d\x0amyImage.onload=loaded();\x0d\x0a}\x0d\x0afunctionloaded(){\x0d\x0aimageReady=true;\x0d\x0asetTimeout(update,100030);\x0d\x0a}\x0d\x0afunctionredraw(){\x0d\x0actx.clearRect(0,0,460,460)\x0d\x0actx.fillStyle="black";\x0d\x0actx.fillRect(0,0,460,460);\x0d\x0afindtheindexofframesinimage\x0d\x0avarheight=myImage.naturalHeight5;\x0d\x0avarwidth=myImage.naturalWidth5;\x0d\x0avarrow=Math.floor(frame5);\x0d\x0avarcol=frame-row*5;\x0d\x0avaroffw=col*width;\x0d\x0avaroffh=row*height;\x0d\x0afirstrobin\x0d\x0apx=px-5;\x0d\x0apy=py-5;\x0d\x0aif(px

相关问答

Q1: html5的dialog在html中怎么写

可以利用javascript脚本语言实现，示例如下：

1、打开文本编辑器或记事本程序，输入htmlbody以及head标签：

html

head/head

body/body

/html

2、在head头标签后输入script标签：

script type="text/javascript"

/script

3、在script标签中定义一个函数duihua()来使网页弹出对话框：

function duihua()

{

alert("这个窗口是对话框！")

}

4、然后，再定义一个函数命名为queren()，用来弹出确认框：

function queren()

{

var se=confirm("请选择点击一个按钮!");

if (se==true)

{

alert("你按下的是【确认】");

}

else

{

alert("你按下的是【取消】");

}

}

5、继续定义另一个函数tishi()，用来在网页中弹出提示框。

function tishi()

{

var t=prompt("请输入您的名字","KING视界")

if (t!=null t!="")

{

document.write("精彩MV就在，" + t + "！属于你的世界")

}

}

6、函数定义好以后，在body标签后，建立3个按钮分别用来调用这3个函数执行。

input type="button" onclick="duihua()" value="点击显示对话框" /

input type="button" onclick="queren()" value="点击显示确认框" /

input type="button" onclick="tishi()" value="点击显示提示框" /

7、保存该文件，用ie浏览器打开的，点击对应按钮，即可弹出相应对话框。

Q2: HTML5中如何绘制图表？

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图，然后加载到Canvas上就可以了。

!DOCTYPE html

html

head

meta charset="utf-8"

title绘制图表/title

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

//   1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null;

context = canvas.getContext('2d');

var img = new Image();

img.src ='chart-background.png';//这里是一张具有图表背景的图片

//    2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0);

//绘制直线

context.beginPath();

context.moveTo(70, 105);

context.lineTo(105, 132);

context.lineTo(142, 250);

context.lineTo(176, 175);

context.lineTo(212, 145);

context.lineTo(245, 197);

context.lineTo(280, 90);

context.stroke();

}

/script

script src="jquery.js"/script

/body

/html

3、本示例的最终绘制效果如下：这样一个曲线图表就绘制出来的，其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解。

Q3: HTML5中，如何为图片制作放大镜效果？

制作图片的放大效果我考虑到的方法是将原始图片绘制到canvas上，然后在对canvas进行局部裁剪最后对裁剪的部分进行放大，这样就可以实现放大镜的效果。

这里我给出一个实现这个想法的示例。该示例实际上就是运用HTML5 canvas中对画布进行裁剪与保存画布状态的相关知识实现的。

上面是给出示例的效果图。这是不是你想要的放大镜效果呢？

下面我们来看下示例代码：在这个示例中当你点击图片时图片就会出现上图效果，再一次点击时就变成原始图片了。

!DOCTYPE html

html

head

meta charset="utf-8"

title放大镜/title

!—HTML代码设计：一个简单的canvas元素--

/head

body

div id="result-stub" class="well hidden"

canvas id="canvas" width="345" height="345"

p你的浏览器不支持canvas元素/p

/canvas

/div

script

window.onload=function() {

//获取canvas对象以及图片对象

var

canvas = document.getElementById('canvas'),

img = new Image(),

context = null,

dataUrl = null,

//设置一个标记，该标记的作用是控制我们点击canvas时放大镜效果的消失和出现

isMagnified = false,

//init函数只要是在图片加载时绘制出图形

init = function() {

img.onload = function() {

//绘制原始图片

context.drawImage(img, 0, 0);

//将图片信息转化为二进制信息或者URL信息存储在dataUrl中方便后面调用

dataUrl = canvas.toDataURL();

}

img.src = 'fist-pump-baby.jpg';

//设置标记值

isMagnified = false;

},

//magnify函数的作用是绘制具有放大镜效果的图形

magnify = function() {

//保存当前画布的绘制状态即画布绘制原始图片的状态。方便我们在后面恢复到绘制原始图片的状态

context.save();

//因为放大镜的圆圈和把手是通过canvas绘制的这里设置了一些绘制把手和圆圈的样式属性。

context.lineWidth = 10;// 线条宽度

context.shadowColor = '#000';// 阴影的颜色黑色

context.shadowBlur = 15;// 模糊级别为15

context.shadowOffsetX = 5;// 形状与阴影的水平距离5

context.shadowOffsetY = 5;// 形状与阴影的垂直距离5

//保存画布当前状态即我们设置阴影属性后的状态方便后面使用

context.save();

//绘制出放大镜把手的图形

context.beginPath();

context.moveTo(230, 230);

context.lineCap = 'round';

context.lineWidth = 30;

context.lineTo(285, 285);

context.stroke();

//对图片进行裁剪，裁剪出的图形是一个圆形。

context.beginPath();

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.clip();

//创建一个新的Image对象，这个Image对象的图片资源是前面存储在dataUrl中的图片资源。所以这个Image对象和之前初始化的Image对象是完全一样的。

var magnified = new Image();

magnified.src = dataUrl;

//对Image对象进行放大1.5倍，并进行绘制。注意此时的画布状态时裁剪为一个圆形的状态，所以这里绘制的也仅仅是图片中的一个圆形区域。这里为了绘制出图片中娃娃的脸设置了绘制的图片有一定的偏移量。

context.scale(1.5, 1.5);

context.drawImage(img, -40, -40);

//调用restore()函数将画布状态恢复到绘制把放大镜把手时的状态，即具有阴影属性

context.restore();

//绘制放大镜的圆圈，即绘制刚刚我们裁剪出来图片的边框。这样刚刚裁剪出来的圆形图形就会正好处于放大镜的圆圈中。

context.arc(

150,

150,

115,

0,

Math.PI * 2,

true);

context.stroke();

//重置画布，将画布恢复到绘制元素图片的状态，以方便绘制出放大效果后，再次点击是绘制原始图片。

context.restore()；

//设置标记值，实现点击后放大效果消失。

isMagnified = true;

};

//加载初始化代码，即当运行页面时会在页面绘制出一个原始图像

init();

//监听画布的点击事件，当点击页面的图像时会根据标记的值来进行判断是否对画布进行方大处理

$('canvas').click(function() {

if (isMagnified) {

init();//绘制原始图像

}

else {

magnify();//绘制放大的图像

}

});

}

/script

script src="jquery.js"/script

/body

/html

对于这些知识在一个叫秒秒学的教程网站上有相关的学习资料，有兴趣的可以自己去看看，希望对你有帮助。