zoukankan      html  css  js  c++  java
  • HTML5 Canvas动画效果实现原理

    在线演示

    使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下:

    每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形

    首先是绘制图形的方法,如下:

    function myAnimation() {
        ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
    
        if (x_icon < 0 || x_icon > canvas_size_x - size_x) {
            stepX = -stepX;
        }
        
        if (y_icon < 0 || y_icon > canvas_size_y - size_y) {
            stepY = -stepY;
        }
    
        x_icon += stepX;
        y_icon += stepY;
    
        ctx.drawImage(anim_img, x_icon, y_icon);
    }

    以上方法每隔一定时间清除画布内容,并且重新计算绘制图形位置,一旦超过了画布大小,则反转坐标绘制图形。

    下面是实际绘制图形方法:

    function draw() {
        var canvas = document.getElementById("canvas");
        ctx = canvas.getContext("2d");
        
        anim_img = new Image(size_x, size_y);
        
        anim_img.onload = function() {
            setInterval('myAnimation()', 5);
        }
        
        anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png';
    }

    以上方法将图形定义,并且调用实际绘制动画的方法,搞定!

    如果大家对于HTML5绘制动画有兴趣,或者希望了解如何模拟物理动画效果,请阅读下面的互动教程,相信能够帮助你更好理解HTML画布:

    HTML5画布实现的粒子运动效果

    原文来自:HTML5 Canvas动画效果实现原理

  • 相关阅读:
    头插法建立单链表
    顺序表
    栈的顺序存储实现
    折半查找
    myeclipe 快捷键盘
    ztree redio单选按钮
    webuploader上传进度条 上传删除
    svn乱码解决办法
    异构SOA系统架构之Asp.net实现(兼容dubbo)
    RPC框架
  • 原文地址:https://www.cnblogs.com/gbin1/p/4043276.html
Copyright © 2011-2022 走看看