6.2.2_图像绘制器

最新推荐文章于 2022-09-15 20:09:31 发布

信封中的阳光

最新推荐文章于 2022-09-15 20:09:31 发布

阅读量298

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/72780561

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

6.2.2_图像绘制器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图像绘制器</title>
        <style>
            body{
                background: #ddd;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin: 10px;
                -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
                -moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
                box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="600" height="300"></canvas>
    </body>
    <!-- 精灵对象 -->
    <script>
        var Sprite = function(name,painter,behaviors){
            if(name !== undefined){ this.name = name; }
            if(painter !== undefined){ this.painter = painter; }

            this.top = 0;
            this.left = 0;
            this.width = 10;
            this.height = 10;
            this.velocityX = 0;
            this.velocityY = 0;
            this.visible = true;
            this.animating = false;
            this.behaviors = behaviors || [];

        }

        Sprite.prototype = {
            paint:function(context){
                if(this.painter !== undefined && this.visible){
                    this.painter.paint(this,context);
                }
            },
            update:function(context,time){
                for(var i=0;i<this.behaviors.length;i++){
                    this.behaviors[i].execute(this,context,time);
                }
            }
        }
    </script>
    <!-- 图像绘制器 -->
    <script>
        var ImagePainter = function (imageUrl){
            this.image = new Image();
            this.image.src = imageUrl;
        }
        ImagePainter.prototype ={
            paint:function(sprite,context){
                //因为图像绘制器专门负责反复绘制精灵对象所用的图像，所以它并不负责图像的加载
                if(this.image.complete){
                    context.drawImage(this.image,sprite.left,sprite.top,sprite.width,sprite.height);
                }
            }
        }
    </script>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var tree = new Sprite('tree', new ImagePainter('img/small_tree.png'));

        tree.left = 220;
        tree.top = 80;
        tree.width = 140;
        tree.height = 150;

        window.requestAnimationFrame(animate);
        function animate(){
            context.clearRect(0,0,canvas.width,canvas.height);
            tree.paint(context);
            window.requestAnimationFrame(animate);
            console.log('动画持续中');
        }
    </script>
</html>

这里写图片描述

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.2.2_图像绘制器

6.2.2_图像绘制器<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图像绘制器</title> <style> body{ background: #ddd; } #c
复制链接

扫一扫

专栏目录