Createjs的控件 BitMap、MovieClip、Sprite

本文介绍了Createjs中的Bitmap、MovieClip和Sprite控件的使用。Bitmap用于显示图片,MovieClip用于处理复杂的动画,而Sprite则可以从spritesheet中播放帧序列。文中通过实例详细讲解了如何创建MovieClip动画,包括创建MovieClip,绘制圆并进行动画效果,以及使用Timeline同步动画。最后,展示了如何使用Sprite显示和播放帧序列动画。
摘要由CSDN通过智能技术生成

Createjs控件

一、BitMap控件
       掌握了BitMap之后,我们可以快速的对图片做处理。
      1、首先准备一张我们需要引入的照片,在HTML代码中引入easeljs文件。
    <script src="js/easeljs-0.8.1.min.js" type="text/javascript" charset="utf-8"></script>
      2、使用canvas标签创建stage

    var stage = new createjs.Stage("canvas");
     3、创建一个容器Container,并且将该容器放进stage中,代码如下:
    var gameView = new createjs.Container();
    stage.addChild(gameView);
     4、使用控件Bitmap引入我们需要的图片,并且将该图片放进Container中
      var bitmap = new createjs.Bitmap("img/image.jpg");
      gameView.addChild(bitmap);
    5、最后使用 Ticker 
基于Javascript的bitmap处理,并且将位图输出为base64编码以便于浏览器进行显示。   一、Bitmap.create(width, height, bgcolor)     创建一个width x height像素大小的位图,底色为bgcolor所代表的颜色。     如:bitmap.create(10, 10, 0xff0000); // 创建一个10 x 10像素的底色为红色的位图 二、Bitmap.toBase64()     将位图输出为base64编码的带datauri头(data:image/bmp;base64,)的字符串,以便于在浏览器里显示。     如:document.getElementById('img1').src = bitmap.toBase64(); 三、Bitmap.fromBase64()     自图像的BASE64编码中恢复位图数据,目前只支持24位色的BMP位图数据。     如:bitmap.fromBase64('Qk06AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=='); 四、Bitmap.setBitmapBytes(val, idx, length)     修改bitmap位图数据的第idx位置起的length字节为val值。 五、Bitmap.getBitmapBytes(idx, length)     获取bitmap位图数据的第idx位置起的length个字节的值,返回值为数组。 六、Bitmap.setHeaderValue(attribute, headerValue)     设置attribute头属性的值为headerValue,attribute必须为BitMapFormat的成员属性,需要提供offset、length等属性值。     如:bitmap.setHeaderValue(BitmapFormat.biWidth, 500); // 设置位图的宽度为500像素值 七、Bitmap.getHeaderValue(attribute)     获取位图attribute头属性的值,attribute必须为BitmapFormat的成员属性,需要提供offset、length等属性值,返回的是经过Endian转换后的实际整数值。 八、Bitmap.setPixel(x, y, color)     设置位图的(x, y)位置的像素值为color。 九、Bitmap.getPixel(x, y)     获取位图的(x, y)位置的RGB值,返回的内容为[ rr, gg, bb ]的数组内容 标签:jsBitmap
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值