图像颜色变化
1.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
canvas {
border:1px solid #f00;
}
</style>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
<script type="text/javascript">
var img;
var stage;
var angle;
var canvas;
var range;
var speed;
var bmp;
function Init() {
// 角度
angle = 0;
range = 30;
// 范围
speed = 0.1;
img = new Image();
img.onload = HandleImageLoad;
img.src = "../Images/2.jpg";
}
function HandleImageLoad() {
canvas = document.getElementById("mycanvas");
stage = new createjs.Stage(canvas);
// The source object or URI to an image to display
bmp = new createjs.Bitmap(img);
bmp.cache(0, 0, img.width, img.height);
stage.addChild(bmp);
// 设置频率
createjs.Ticker.setFPS(10);
// 监听tick事件
createjs.Ticker.addListener(window);
}
function tick() {
angle += speed;
UpdateImage();
}
function UpdateImage() {
var value = Math.sin(angle) * range;
bmp.updateCache();
bmp.filters = [new createjs.BoxBlurFilter(value, value, 2)];
stage.update();
}
</script>
</head>
<body onload="Init();">
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
</html>
2.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
canvas {
border: 1px solid #f00;
}
</style>
<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/BoxBlurFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorFilter.js"></script>
<script type="text/javascript" src="../src/easeljs/filters/ColorMatrixFilter.js"></script>
<script type="text/javascript">
var img;
function Init() {
img = new Image();
img.onload = handleImageLoad;
img.src = "../Images/2.jpg";
}
function handleImageLoad() {
var canvas = document.getElementById("mycanvas");
var stage = new createjs.Stage(canvas);
var bmp = new createjs.Bitmap(img);
bmp.x = (canvas.width - 2 * img.width) / 3;
bmp.y = (canvas.height - 2 * img.height) / 3;
stage.addChild(bmp);
// 模糊
// BoxBlurFilter(水平半径，垂直半径，次数)
var blurFilter = new createjs.BoxBlurFilter(32, 2, 2);
// 获取边界
var margins = blurFilter.getBounds();
bmp = bmp.clone();
bmp.filters = [blurFilter];
bmp.cache(margins.x, margins.y, img.width + margins.width, img.height + margins.height);
// x坐标发生改变
bmp.x += bmp.x + img.width;
stage.addChild(bmp);
// 允许您执行复杂的颜色操作,如修改饱和,亮度,或反相。
var greyScaleFilter = new createjs.ColorMatrixFilter([
0.33, 0.33, 0.33, 0, 0, // red
0.33, 0.33, 0.33, 0, 0, // green
0.33, 0.33, 0.33, 0, 0, // blue
0, 0, 0, 1, 0 // alpha
]);
bmp = bmp.clone();
bmp.filters = [greyScaleFilter];
bmp.cache(0, 0, img.width, img.height); // color filters don't change the bounds.
bmp.y += bmp.y + img.height;
stage.addChild(bmp);
// 颜色转换
var removeRedFilter = new createjs.ColorFilter(0, 1, 1, 1); // red, green, blue, alpha
bmp = bmp.clone();
bmp.filters = [removeRedFilter];
bmp.cache(0, 0, img.width, img.height); // color filters don't change the bounds.
// 与第一张图片横坐标位置一致
bmp.x = (canvas.width - 2 * img.width) / 3;
stage.addChild(bmp);
stage.update();
}
</script>
</head>
<body onload="Init();">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
</html>
浙公网安备 33010602011771号