BitmapData.js 基于 Canvas 强大的位图特效处理插件 - 文章教程

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

发布于 2019-05-08 字数 1864 浏览 2554 评论 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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0