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

Z时代
2024-01-10
分类：IT

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

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);};