首页 > 网站 > WEB开发 > 正文

Canvas使用教程——动画基础（Basic animations）

2024-04-27 13:52:42
字体：大 中 小
来源：转载
供稿：网友

来源：https://developer.mozilla.org/en/Canvas_tutorial/Basic_animations

Since we're using script to control canvas elements it's also very easy to make (interactive) animations. Unfortunately the canvas element was never designed to be used in this way (unlike Flash) so there are limitations.

Probably the biggest limitation is that once a shape gets drawn it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Basic animation steps

These are the steps you need to take to draw a frame:

  1. Clear the canvas
    Unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. The easiest way to do this is using the clearRect method.
  2. Save the canvas state
    If you're changing any setting (styles, transformations, etc) which affect the canvas state and want to make sure the original state is used each time a frame is drawn, you need to save it.
  3. Draw animated shapes
    The step where you do the actual frame rendering.
  4. Restore the canvas state
    If you've saved the state, restore it before drawing a new frame.

Controlling an animation

Shapes are drawn to the canvas by using the canvas methods directly or calling custom functions. In normal circumstances we only see these results appear on the canvas when the script finishes execution. For instance it isn't possible to do an animation from within a for loop.

We need a way to execute our drawing functions over a period of time. There are two ways to control an animation like this. First there's the setInterval and setTimeout functions which can be used to call a specific function over a set period of time.

view plaincopy to clipboardprint?
  1. setInterval(animateShape,500);   
  2. setTimeout(animateShape,500);  

If you don't want any user interaction it's best to use the setInterval function which repeatedly executes the supplied code. In the example above the animateShape function is executed every 500 miliseconds (half a second). The setTimeout function only executes once after the set amount of time.

The second method we can use to control an animation is user input. If we wanted to make a game we could use keyboard or mouse events to control the animation. By setting eventListeners we catch any user interaction and execute our animation functions.

In the examples below I'm using the first method to control the animation. At the bottom of this page are some links to examples which use the second.

An animation example 1

In this example I'm going to animate a mini simulation of our solar system.

 
  1. var sun = new Image();   
  2. var moon = new Image();   
  3. var earth = new Image();   
  4. function init(){   
  5.   sun.src = 'images/sun.png';   
  6.   moon.src = 'images/moon.png';   
  7.   earth.src = 'images/earth.png';   
  8.   setInterval(draw,100);   
  9. }   
  10.   
  11. function draw() {   
  12.   var ctx = document.getElementById('canvas').getContext('2d');   
  13.   
  14.   ctx.globalCompositeOperation = 'destination-over';   
  15.   ctx.clearRect(0,0,300,300); // clear canvas   
  16.   
  17.   ctx.fillStyle = 'rgba(0,0,0,0.4)';   
  18.   ctx.strokeStyle = 'rgba(0,153,255,0.4)';   
  19.   ctx.save();   
  20.   ctx.translate(150,150);   
  21.   
  22.   // Earth   
  23.   var time = new Date();   
  24.   ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );   
  25.   ctx.translate(105,0);   
  26.   ctx.fillRect(0,-12,50,24); // Shadow   
  27.   ctx.drawImage(earth,-12,-12);   
  28.   
  29.   // Moon   
  30.   ctx.save();   
  31.   ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );   
  32.   ctx.translate(0,28.5);   
  33.   ctx.drawImage(moon,-3.5,-3.5);   
  34.   ctx.restore();   
  35.   
  36.   ctx.restore();   
  37.      
  38.   ctx.beginPath();   
  39.   ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit   
  40.   ctx.stroke();   
  41.     
  42.   ctx.drawImage(sun,0,0,300,300);   
  43. }  
Canvas sun.png

source image sun
Canvas earth.png

source image earth
Canvas moon.png

source image moon

An animation example 2

  1. function init(){   
  2.   clock();   
  3.   setInterval(clock,1000);   
  4. }   
  5. function clock(){   
  6.   var now = new Date();   
  7.   var ctx = document.getElementById('canvas').getContext('2d');   
  8.   ctx.save();   
  9.   ctx.clearRect(0,0,150,150);   
  10.   ctx.translate(75,75);   
  11.   ctx.scale(0.4,0.4);   
  12.   ctx.rotate(-Math.PI/2);   
  13.   ctx.strokeStyle = "black";   
  14.   ctx.fillStyle = "white";   
  15.   ctx.lineWidth = 8;   
  16.   ctx.lineCap = "round";   
  17.   
  18.   // Hour marks   
  19.   ctx.save();   
  20.   for (var i=0;i<12;i++){   
  21.     ctx.beginPath();   
  22.     ctx.rotate(Math.PI/6);   
  23.     ctx.moveTo(100,0);   
  24.     ctx.lineTo(120,0);   
  25.     ctx.stroke();   
  26.   }   
  27.   ctx.restore();   
  28.   
  29.   // Minute marks   
  30.   ctx.save();   
  31.   ctx.lineWidth = 5;   
  32.   for (i=0;i<60;i++){   
  33.     if (i%5!=0) {   
  34.       ctx.beginPath();   
  35.       ctx.moveTo(117,0);   
  36.       ctx.lineTo(120,0);   
  37.       ctx.stroke();   
  38.     }   
  39.     ctx.rotate(Math.PI/30);   
  40.   }   
  41.   ctx.restore();   
  42.      
  43.   var sec = now.getSeconds();   
  44.   var min = now.getMinutes();   
  45.   var hr  = now.getHours();   
  46.   hr = hr>=12 ? hr-12 : hr;   
  47.   
  48.   ctx.fillStyle = "black";   
  49.   
  50.   // write Hours   
  51.   ctx.save();   
  52.   ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )   
  53.   ctx.lineWidth = 14;   
  54.   ctx.beginPath();   
  55.   ctx.moveTo(-20,0);   
  56.   ctx.lineTo(80,0);   
  57.   ctx.stroke();   
  58.   ctx.restore();   
  59.   
  60.   // write Minutes   
  61.   ctx.save();   
  62.   ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )   
  63.   ctx.lineWidth = 10;   
  64.   ctx.beginPath();   
  65.   ctx.moveTo(-28,0);   
  66.   ctx.lineTo(112,0);   
  67.   ctx.stroke();   
  68.   ctx.restore();   
  69.      
  70.   // Write seconds   
  71.   ctx.save();   
  72.   ctx.rotate(sec * Math.PI/30);   
  73.   ctx.strokeStyle = "#D40000";   
  74.   ctx.fillStyle = "#D40000";   
  75.   ctx.lineWidth = 6;   
  76.   ctx.beginPath();   
  77.   ctx.moveTo(-30,0);   
  78.   ctx.lineTo(83,0);   
  79.   ctx.stroke();   
  80.   ctx.beginPath();   
  81.   ctx.arc(0,0,10,0,Math.PI*2,true);   
  82.   ctx.fill();   
  83.   ctx.beginPath();   
  84.   ctx.arc(95,0,10,0,Math.PI*2,true);   
  85.   ctx.stroke();   
  86.   ctx.fillStyle = "#555";   
  87.   ctx.arc(0,0,3,0,Math.PI*2,true);   
  88.   ctx.fill();   
  89.   ctx.restore();   
  90.   
  91.   ctx.beginPath();   
  92.   ctx.lineWidth = 14;   
  93.   ctx.strokeStyle = '#325FA2';   
  94.   ctx.arc(0,0,142,0,Math.PI*2,true);   
  95.   ctx.stroke();   
  96.   
  97.   ctx.restore();   
  98. }  

An animation example 3

This is the code for a left-to-right looping panoramic image scroller. Make sure the image is larger than the canvas.
Using this file for this example
http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg

  1. var img = new Image();   
  2.   
  3. //User Variables   
  4. img.src = 'Capitan_Meadows,_Yosemite_National_Park.jpg';   
  5. var CanvasXSize = 800;   
  6. var CanvasYSize = 200;   
  7. var speed = 30; //lower is faster   
  8. var scale = 1.05;   
  9. var y = -4.5; //vertical offset   
  10. //End User Variables   
  11.   
  12. var dx = 0.75;   
  13. var imgW = img.width*scale;   
  14. var imgH = img.height*scale;   
  15. var x = 0;   
  16. if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // image larger than canvas   
  17. var clearX;   
  18. var clearY;   
  19. if (imgW > CanvasXSize) { clearX = imgW; } // image larger than canvas   
  20. else { clearX = CanvasXSize; }   
  21. if (imgH > CanvasYSize) { clearY = imgH; } // image larger than canvas   
  22. else { clearY = CanvasYSize; }   
  23. var ctx;   
  24.   
  25. function init() {   
  26.     //Get Canvas Element   
  27.     ctx = document.getElementById('canvas').getContext('2d');   
  28.     //Set Refresh Rate   
  29.     return setInterval(draw, speed);   
  30. }   
  31.   
  32. function draw() {   
  33.     //Clear Canvas   
  34.     ctx.clearRect(0,0,clearX,clearY);   
  35.     //If image is <= Canvas Size   
  36.     if (imgW <= CanvasXSize) {   
  37.         //reset, start from beginning   
  38.         if (x > (CanvasXSize)) { x = 0; }   
  39.         //draw aditional image   
  40.         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }   
  41.     }   
  42.     //If image is > Canvas Size   
  43.     else {   
  44.         //reset, start from beginning   
  45.         if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }   
  46.         //draw aditional image   
  47.         if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }   
  48.     }   
  49.     //draw image   
  50.     ctx.drawImage(img,x,y,imgW,imgH);   
  51.     //amount to move   
  52.     x += dx;   
  53. }  

html code. Canvas width and height should match the CanvasXSize, CanvasYSize.

  1. <body onload="init();">  
  2. <canvas id="canvas" width="800" height="200"></canvas>  

Other examples

  • Particle Fountain
    Interactive particle emitter with physics that uses the mouse.
  • Canvascape
    A 3D adventure game (first-person shooter).
  • http://www.gradius-js.com
    A classic 2D Space shooter game.
  • A Basic RayCaster
    A good example of how to do animations using keyboard controls.
  • canvas adventure
    Also a nice example that uses keyboard controls.
  • An interactive Blob
    Have fun with the blob.
  • Flying through a starfield
    Fly through stars, circles or squares.
  • iGrapher
    An example of charting stock market data.

上一篇：Canvas使用教程——样式与颜色应用（Applying styles and colors）

下一篇：Canvas使用教程——图像合成（Compositing）

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
学习交流
更多

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...
热门图片
更多
猜你喜欢的新闻
猜你喜欢的关注

新闻热点

英伟达市值一夜大涨9246亿 创2023年5月以来最大单周涨幅
2024-04-27 13:35:46
雷军：小米正在申请3万件专利，以提升自身的竞争力
2024-04-27 13:33:47
人参泡酒15年后竟“复活”？网友：这酒还能喝不？
2024-04-24 22:53:44
芯片股普涨！英伟达市值一夜大涨6000亿元
2024-04-23 19:32:50
面馆老板1天卖100碗刚够交房租 要卖到150碗才能实现盈利
2024-04-23 19:25:50
跌近30%！茶百道上市一小时跌没3年净利润
2024-04-23 19:13:19

疑难解答

图片精选

网友关注

关于本站 - 网上投稿 - 商务合作 - 隐私政策 - 网站地图
Copyright © 2008 - 2024 VEVB.COM. All Rights Reserved.武林网 版权所有