CreateJS 学习2 图形与图像使用

最新推荐文章于 2023-10-26 08:46:34 发布

编程圈子

最新推荐文章于 2023-10-26 08:46:34 发布

阅读量1.9k

点赞数

文章标签：图形

本文链接：https://blog.csdn.net/xundh/article/details/78781092

版权

Canvas WebGL ThreeJS 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

本文学习资源来自：https://www.gitbook.com/book/lengziyu/learn-createjs/details

圆、矩形、多角形

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="500" height="300"></canvas>
        <script>
        /*Javascript代码片段*/
        window.onload=function(){
            //获取stage
            var canvas = document.getElementById("myCanvas");
            var stage = new createjs.Stage(canvas);

            function circle(){
                //生成圆形
                var circle = new createjs.Shape();
                circle.graphics.setStrokeStyle(2).beginStroke("rgba(0,0,0,.5)").beginFill("orange").drawCircle(0, 0, 50);
                circle.x = 55;
                circle.y = 100;

                //将生成图形添加到stage中，并且调用update方法更新
                stage.addChild(circle);
                stage.update();
            }

            function rect(){
                //生成矩形
                var rect = new createjs.Shape();
                rect.graphics.beginFill("orange").drawRect(10, 10, 100, 100);
                rect.x = 120;
                rect.y = 40;

                //将生成图形添加到stage中，并且调用update方法更新
                stage.addChild(rect);
                stage.update();
            }

            function polystar(){
                //生成多角形
                var polystar = new createjs.Shape();
                polystar.graphics.setStrokeStyle(5).beginStroke("orange").drawPolyStar(290,100,5,10,10,110);

                stage.addChild(polystar);  
                stage.update();
            }

            circle();
            rect();
            polystar();
        }

        </script>
    </body>
</html>

这里写图片描述

Shapre类处理图形

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="500" height="300"></canvas>
        <script>
            /*Javascript代码片段*/
            window.onload=function(){
                //获取stage
                var canvas = document.getElementById("myCanvas");
                var stage = new createjs.Stage(canvas);

                function circle(){
                    //生成圆形
                    var circle = new createjs.Shape();
                    circle.graphics.beginFill("orange").drawCircle(0, 0, 50);


                    //以下方式可以方便的修改图形相关的属性

                    //修改图形坐标
                    circle.x = Math.floor(Math.random() * 200);
                    circle.y = Math.floor(Math.random() * 350);

                    //修改图形缩放
                    circle.scaleX = Math.floor(Math.random() * 2)+1;
                    circle.scaleY = Math.floor(Math.random() * 2)+1;

                    //修改alpha和旋转
                    circle.alpha = Math.random() * 1;
                    circle.rotation = Math.floor(Math.random() * 60);

                    //设置图形相关的鼠标事件
                    circle.on("click",handleClick,null,false);            
                    circle.on("mouseout",handleMouseOut,null,false);

                    //将生成图形添加到stage中，并且调用update方法更新
                    stage.addChild(circle);
                    stage.update();
                }

                function handleClick(e){
                    alert("已经点击了圆形");
                }

                function handleMouseOut(e){
                    console.log("鼠标移出了圆形");
                }

                //生成5个不同的圆形
                for(var i=0;i<5;i++){
                    circle();
                }

            }

        </script>
    </body>
</html>

这里写图片描述

图像处理

图片使用使用Image类。

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body onload="init();">
        <canvas id="myCanvas" width="500" height="300"></canvas>
        <script>
            /*Javascript代码片段*/

            window.onload=function(){
                //获取stage
                var canvas = document.getElementById("myCanvas");
                var stage = new createjs.Stage(canvas);

                var img = new Image();
                img.src = "http://www.gbtags.com/gb/laitu/200x200&text=GBtags/444444/ffffff";
                img.onload = handleImageLoad;

                //添加并且处理图片相关属性
                function handleImageLoad(){
                    for(var i = 0;i<3;i++){
                        var tempBitMap = new createjs.Bitmap(img);
                        var randX = Math.floor(Math.random()* 500);
                        var randY = Math.floor(Math.random() * 250);
                        var randomColor = "#"+Math.floor(Math.random()*16777215).toString(16);
                        var randomXOffset  = Math.floor(Math.random() * 10) + 5;
                        var randomYOffset  = Math.floor(Math.random() * 10) + 5;
                        stage.addChild(tempBitMap);
                        tempBitMap.x = randX;
                        tempBitMap.y = randY;
                        tempBitMap.rotation = Math.floor(Math.random() * 360);
                        tempBitMap.shadow = new createjs.Shadow(randomColor, randomXOffset, randomYOffset, 10);
                    }
                    stage.update();
                }
            }


        </script>
    </body>
</html>

这里写图片描述

编程圈子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CreateJS 学习2 图形与图像使用

本文学习资源来自：https://www.gitbook.com/book/lengziyu/learn-createjs/details圆、矩形、多角形<html> <head> <script src="easeljs.min.js" charset="utf-8"></script> </head> <body onload="init();">
复制链接

扫一扫