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
html5怎样做出图片转圈的动画效果
可以使用css3中的rotate实现
实际的旋转效果是这样：
rotate中的 60deg 表示按最原始的位置，顺时针旋转60°
w3school 里面有更详细用法，可以2D旋转、3D旋转
可以参考：网页链接
动画效果可以通过js改变rotate中传入的值来实现
HTML5实现图片拖动，旋转，放大，拉伸等特效后保存效果
可以设置cookie（可以加载一个cookie.min.js，使用起来非常方便）。就是当第一次进入页面的时候，先去读取该cookie，如果存在，说明之前已经做了更改，把cookie值稍作处理就可以完成初始化了（记得当初始化完成后删除该cookie），如果cookie不存在说明还没有做过更改。
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
网站题目：html5图片特效,html5图片特效代码
本文地址：http://hbruida.cn/article/dsdoded.html
