CreateJS 学习2 图形与图像使用

来源：互联网发布：python全栈开发编辑：程序博客网时间：2024/06/05 09:59

本文学习资源来自：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 0