BitmapData.js 基于 Canvas 强大的位图特效处理插件

发布于 2019-05-08 字数 1862 浏览 921 评论 0

BitmapData.js 是一个 JavaScript 插件,使用 HTML5 中新加入的 Canvas API 实现类似 ActionScript 3 中的 BitmapData 类,可以对位图制作很多好看的特效。

BitmapData.js 基于 Canvas 强大的位图特效处理插件

BitmapData 特点

BitmapData.js 拥有丰富的功能,下面来简单介绍一下:

  • 位图通道显示位图的单一通道
  • 多个层叠加滤镜,例如反色、正片叠底、柔光等
  • 可计算 GPU,创建多中动画效果

快速入门

接下来我们来说说如何使用这款插件

1、引入文件BitmapData.js

<script type="text/javascript" src="js/BitmapData.js"></script>

2、编写HTML代码,创建一个Canvas画布标签

<canvas id="canvas" width="300" height="300"></canvas>

3、编写JavaScript代码,初始化插件

function init(){
  bmd = document.getElementById("canvas").bitmapData;
  for (var i = 0; i<100; i++) {
    for (var j = 0; j<300; j++) {
      var d = Math.pow(i-50, 2) + Math.pow(j-150, 2);
      var r = Math.sin(Math.sqrt(d) * 10 * Math.PI/180);
      var color = 100 + 100 * r << 16;
      bmd.setPixel( i, j, color );
    }
  }
  bmd.copyChannel(bmd, 
    bmd.rect, 
    new Point(100, 0), 
    BitmapDataChannel.RED, 
    BitmapDataChannel.GREEN);
  bmd.copyChannel(bmd, 
    bmd.rect, 
    new Point(200, 0), 
    BitmapDataChannel.RED, 
    BitmapDataChannel.BLUE);
};

官方的 Github 地址给了很多的示例,但是没有任何帮助文档,更多的插件使用方法只能自己研究了。

https://github.com/pnitsch/BitmapData.js

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!