HTML5动画特效怎么做

HTML5动画特效怎么做,第1张

主要思想:

首先要准备一张有连续帧的图片,然后利用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/htmlcharset=UTF-8"> 

<title>Canvas 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> 

<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1> 

<pre>Play Animations</pre> 

<div id="my_painter"> 

<canvas id="animation_canvas"></canvas> 

</div> 

</body> 

</html>

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6096198.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存