技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

canvas 播放动画出现残影

来源: 技术CTO 阅读:

在android4.1.2中,用easeljs写动画,当点击btn1,再点击btn2时,canvas中会出现一个点击btn1时的静态图,没有清理干净。貌似其它android中也有这样的问题
代码:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="/js/lib.min.js"></script>
    <style type="text/css">
    body{margin: 0;}
    </style>
</head>
<body>
    <button id="btn1" style="width: 200px; height: 100px;">隐藏</button>
    <button id="btn2" style="width: 200px; height: 100px;">显示</button>
    <div id="box" style="display none;">
        <canvas id="canvas"></canvas>
    </div>
</body>
<script type="text/javascript">
$(function() {
    var _canvas = document.getElementById("canvas");
    _canvas.width = $(document).width();
    _canvas.height = $(document).height() - 150;

    _stage = new createjs.Stage(_canvas);
    var ss = new createjs.SpriteSheet({
        images: ["/app/resource/image/trick/animation/cow_basketball/ploughR.png", "/app/resource/image/trick/animation/cow_basketball/ploughL.png"],
        frames: {regX: 0, regY: 0, width: 374, height: 200, count: 8},
        animations: {right: [0, 3], left: [4, 7]}
    });
    var bitmap = new createjs.BitmapAnimation(ss);
    bitmap.x = 0;
    bitmap.y = 0;
    bitmap.scaleX = bitmap.scaleY = 1;
    ss.getAnimation("right").next = "right";
    ss.getAnimation("left").next = "left";
    bitmap.gotoAndPlay("right");
    _stage.addChild(bitmap);
    createjs.Ticker.addEventListener("tick", _tick);
    createjs.Ticker.setFPS(10);
    var right = true;
    function _tick() {
        _stage.update();
        if(!!right) {
            bitmap.x = bitmap.x + 10;
        } else {
            bitmap.x = bitmap.x - 10;
        }
        if(bitmap.x > $(document).width()) {
            right = false;
            bitmap.gotoAndPlay("left");
        }
        if(bitmap.x < -bitmap.spriteSheet._frameWidth) {
            right = true;
            bitmap.gotoAndPlay("right");
        }
    };

    $("#btn1").on("click", function() {
        $("#box").hide();
        createjs.Ticker.removeEventListener("tick", _tick);
    });
    $("#btn2").on("click", function() {
        $("#box").show();
        createjs.Ticker.addEventListener("tick", _tick);
    });
});
</script>
</html>

不知道怎么解决,求大神指点。
\没人理啊。。。
\
不会,嘎嘎
LZ试试这样哪?

_canvas.getContext('2d').clearRect(0, 0, _canvas.width, _canvas.height);
webkit浏览器的bug
android上尤其多
没有好的解决方案
引用 3 楼 sunjx2543 的回复:
LZ试试这样哪?

_canvas.getContext('2d').clearRect(0, 0, _canvas.width, _canvas.height);


试过了,不行,重新设置canvas的width也试过了,都不行
引用 4 楼 KK3K2005 的回复:
webkit浏览器的bug
android上尤其多
没有好的解决方案


是啊,都没有找到什么好的解决方法,是个坑啊

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^