html5图片特效,html5图片特效点击旋转

HTML5动画特效怎么做

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout( update, 1000/30);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

!DOCTYPE html 

html 

head 

meta http-equiv="X-UA-Compatible" content="chrome=IE8" 

meta http-equiv="Content-type" content="text/html;charset=UTF-8" 

titleCanvas Mouse Event Demo/title 

link href="default.css" rel="stylesheet" / 

script 

var ctx = null; // global variable 2d context 

var started = false; 

var mText_canvas = null; 

var x = 0, y =0; 

var frame = 0; // 22 5*5 + 2 

var imageReady = false; 

var myImage = null; 

var px = 300; 

var py = 300; 

var x2 = 300; 

var y2 = 0; 

window.onload = function() { 

var canvas = document.getElementById("animation_canvas"); 

console.log(canvas.parentNode.clientWidth); 

canvas.width = canvas.parentNode.clientWidth; 

canvas.height = canvas.parentNode.clientHeight; 

if (!canvas.getContext) { 

console.log("Canvas not supported. Please install a HTML5 compatible browser."); 

return; 

} 

// get 2D context of canvas and draw rectangel 

ctx = canvas.getContext("2d"); 

ctx.fillStyle="black"; 

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

myImage = document.createElement('img'); 

myImage.src = "../robin.png"; 

myImage.onload = loaded(); 

} 

function loaded() { 

imageReady = true; 

setTimeout( update, 1000/30); 

} 

function redraw() { 

ctx.clearRect(0, 0, 460, 460) 

ctx.fillStyle="black"; 

ctx.fillRect(0, 0, 460, 460); 

// find the index of frames in image 

var height = myImage.naturalHeight/5; 

var width = myImage.naturalWidth/5; 

var row = Math.floor(frame / 5); 

var col = frame - row * 5; 

var offw = col * width; 

var offh = row * height; 

// first robin 

px = px - 5; 

py = py - 5; 

if(px  -50) { 

px = 300; 

} 

if(py  -50) { 

py = 300; 

} 

//var rate = (frame+1) /22; 

//var rw = Math.floor(rate * width); 

//var rh = Math.floor(rate * height); 

ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height); 

// second robin 

x2 = x2 - 5; 

y2 = y2 + 5; 

if(x2  -50) { 

x2 = 300; 

y2 = 0; 

} 

ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height); 

} 

function update() { 

redraw(); 

frame++; 

if (frame = 22) frame = 0; 

setTimeout( update, 1000/30); 

} 

/script 

/head 

body 

h1HTML Canvas Animations Demo - By Gloomy Fish/h1 

prePlay Animations/pre 

div id="my_painter" 

canvas id="animation_canvas"/canvas 

/div 

/body 

/html

相关问答

Q1: html5 拖动效果怎么在手机上实现

html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。

注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。

举例：

定义可拖放内容

div id="columns"

 div class="column" draggable="true"headerA/header/div

 div class="column" draggable="true"headerB/header/div

 div class="column" draggable="true"headerC/header/div

/div

2、监听拖动事件

可附加大量不同事件以监听整个拖放过程：

dragstart

drag

dragenter

dragleave

dragover

drop

dragend

a.这里是开始拖拽

function handleDragStart(e) {

 this.style.opacity = '0.4';  // this / e.target is the source node.

}

var cols = document.querySelectorAll('#columns .column');

[].forEach.call(cols, function(col) {

 col.addEventListener('dragstart', handleDragStart, false);

});

b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。

Q2: HTML5图片一闪而过是什么特效？

!DOCTYPE html

html

head

meta charset="utf-8" /

title/title

/head

body

img src="img/292176.jpg" id="tp"/

script type="text/javascript"

function blink()

{

var a=document.getElementById("tp")

if(a.style.visibility=="visible")

{

a.style.visibility="hidden";

}

else

{

a.style.visibility="visible";

}

setTimeout("blink()",500);//间隔的毫秒,0.5秒

}

blink();

/script

/body

ml

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

可以使用css3中的rotate实现

实际的旋转效果是这样：

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

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

可以参考：网页链接

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

Q4: HTML5实现图片拖动，旋转，放大，拉伸等特效后保存效果

可以设置cookie（可以加载一个cookie.min.js，使用起来非常方便）。就是当第一次进入页面的时候，先去读取该cookie，如果存在，说明之前已经做了更改，把cookie值稍作处理就可以完成初始化了（记得当初始化完成后删除该cookie），如果cookie不存在说明还没有做过更改。