Home >Web Front-end >H5 Tutorial >Quick start createjs example tutorial
Draw pictures Use (Bitmap)
to draw graphics, such as rectangles, circles, etc. Use (Shape) [Similar to changing coordinates x, y, increasing shadow, transparency alpha, reducing and enlarging scaleX/scaleY You can do it]
Draw text, use (Text)
There is also the concept of container Container, the container can contain multiple display objects
<script src="easeljs-0.7.1.min.js?1.1.10"></script> //引入相关的js文件 <canvas id="canvas"></canvas> canvas = document.querySelector('#canvas' stage = rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();graphics can set some styles, Line width, color, etc., you can also call some methods to draw graphics, such as rectangle drawRect, circle drawCircle, etc. You can check the API yourself for details.
createjs.Ticker.setFPS(60);
stage.setChildIndex(red,1);
var contain = new createjs.Container(); contain.addChild(bgImg); contain.addChild(bitmap); stage.addChild(contain);嬹嬷嬬~The focus of this article is to draw images and process them
var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update();According to the normal drawing process of EaselJS above, the above The code snippet should display normally. However, it can only be displayed normally in some cases. This image resource needs to be loaded successfully before it can be new. Otherwise, there will be no image on the canvas. If there is resource preloading, you can use the above code directly. If not, then It needs to be drawn after the image is loaded onload
var img = new Image(); img.src = './img/linkgame_pass@2x.png'; img.onload = function () { var bg = new createjs.Bitmap("./background.png"); stage.addChild(bg); stage.update(); }Just drawing pictures is not enough. Createjs provides several methods for processing pictures:
stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10;//遮罩图形shape = new createjs.Shape(); shape.graphics.beginFill("#000").drawCircle(0, 0, 100); shape.x = 200; shape.y = 100; bg.mask = shape; //给图片bg添加遮罩stage.addChild(shape); stage.addChild(bg); stage.update();
6.2 Add filter effects to pictures
var blur = new createjs.BlurFilter(5,5,1); bg.filters = [blur];We found that the picture still did not become blurred. The reason is that the stage is refreshed immediately after adding a filter to the picture. The filter can only maintain the effect of one frame, and the second frame filter failed. After using the cache() method of the image, the filter effect can be maintained no matter how the stage is refreshed. Adding cache has many effects, such as improving FPS, caching, etc.
bg.cache(0,0,bg.image.width,bg.image.height);
stage = new createjs.Stage("gameView"); bg = new createjs.Bitmap("./img/linkgame_pass@2x.png"); bg.x = 10; bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171); bg.sourceRect = rect; stage.addChild(bg); stage.update();
easeljs事件默认是不支持touch设备的,需要以下代码才支持:
createjs.Touch.enable(stage);
对于Bitmap,Shape等对象,都可以直接使用addEventListener进行事件监听
bitmap = new createjs.Bitmap(''); bitmap.addEventListener(‘click’,handle);
<canvas id="game" width="1000" height="700"></canvas>
注意,以上代码的width,height不同于css中的width,height。
比如,你在canvas内部绘制图片,用x,y轴进行定位,这里的x,y是相对于canvas这个整体。
我们再把canvas当成一整张图片使用css进行适配
canvas{ width: 100%; }
那么,就会有以下的效果,canvas会适配屏幕尺寸,里面的图片也会等比例变大变小。
The above is the detailed content of Quick start createjs example tutorial. For more information, please follow other related articles on the PHP Chinese website!