首页 > 网页设计 > HTML5 Canvas动画效果演示

HTML5 Canvas动画效果演示

HTML5 Canvas动画效果演示

主要思想:

首先要准备一张有连续帧的图片,然后利用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上的起始坐标点。

一个22帧的大雁飞行图片实现的效果:

源图像:

程序代码:

 

[javascript][/javascript] view plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="X-UA-Compatible" content="chrome=IE8">
  5. <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  6. <title>Canvas Mouse Event Demo</title>
  7. <link href="default.css" rel="stylesheet" />
  8.     <script>
  9.         var ctx = null; // global variable 2d context
  10.         var started = false;
  11.         var mText_canvas = null;
  12.         var x = 0, y =0;
  13.         var frame = 0; // 22 5*5 + 2
  14.         var imageReady = false;
  15.         var myImage = null;
  16.         var px = 300;
  17.         var py = 300;
  18.         var x2 = 300;
  19.         var y2 = 0;
  20.         window.onload = function() {
  21.             var canvas = document.getElementById("animation_canvas");
  22.             console.log(canvas.parentNode.clientWidth);
  23.             canvas.width = canvas.parentNode.clientWidth;
  24.             canvas.height = canvas.parentNode.clientHeight;
  25.             if (!canvas.getContext) {
  26.                 console.log("Canvas not supported. Please install a HTML5 compatible browser.");
  27.                 return;
  28.             }
  29.             // get 2D context of canvas and draw rectangel
  30.             ctx = canvas.getContext("2d");
  31.             ctx.fillStyle="black";
  32.             ctx.fillRect(0, 0, canvas.width, canvas.height);
  33.             myImage = document.createElement('img');
  34.             myImage.src = "../robin.png";
  35.             myImage.onload = loaded();
  36.         }
  37.         function loaded() {
  38.             imageReady = true;
  39.             setTimeout( update, 1000/30);
  40.         }
  41.         function redraw() {
  42.             ctx.clearRect(0, 0, 460, 460)
  43.             ctx.fillStyle="black";
  44.             ctx.fillRect(0, 0, 460, 460);
  45.             // find the index of frames in image
  46.             var height = myImage.naturalHeight/5;
  47.             var width = myImage.naturalWidth/5;
  48.             var row = Math.floor(frame / 5);
  49.             var col = frame - row * 5;
  50.             var offw = col * width;
  51.             var offh = row * height;
  52.             // first robin
  53.             px = px - 5;
  54.             py = py - 5;
  55.             if(px < -50) {
  56.                 px = 300;
  57.             }
  58.             if(py < -50) {
  59.                 py = 300;
  60.             }
  61.             //var rate = (frame+1) /22;
  62.             //var rw = Math.floor(rate * width);
  63.             //var rh = Math.floor(rate * height);
  64.             ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height);
  65.             // second robin
  66.             x2 = x2 - 5;
  67.             y2 = y2 + 5;
  68.             if(x2 < -50) {
  69.                 x2 = 300;
  70.                 y2 = 0;
  71.             }
  72.             ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height);
  73.         }
  74.         function update() {
  75.             redraw();
  76.             frame++;
  77.             if (frame >= 22) frame = 0;
  78.             setTimeout( update, 1000/30);
  79.         }
  80.     </script>
  81. </head>
  82. <body>
  83.     <h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>
  84.     <pre>Play Animations</pre>
  85.     <div id="my_painter">
  86.         <canvas id="animation_canvas"></canvas>
  87.     </div>
  88. </body>
  89. </html>

本文固定链接: http://www.devba.com/index.php/archives/1690.html | 开发吧

报歉!评论已关闭.