イナヅマTVログ

lighter

Canvas始めました – 図形の重なり描画方法を設定する

| 0件のコメント

context.globalCompositeOperationを使った重なり描画方法。

Photoshopレイヤーの「合成」みたいなもんかなぁ。
Canvasにはレイヤー概念はないので後に描いたものが上に乗っかる。
初期Photoshop時代のレイヤーが無くて、描けばその時点でそれ以前に存在した画像と一体化し一枚のBitmapになったのを思い出します。
イメージ > 演算 を使って様々な効果をつけてたけどそんな感じもする。

globalCompositeOperationはプロパティ。文字列:String を与える。

Default: source-over
globalCompositeOperationで”source-over”以外を与えたら必要がなくなったら”source-over”を再設定しないと前の設定が残っちゃう。

source-over, source-atop, source-in, source-out,
destination-over, destination-atop, destination-in, destination-out,
lighter, copy, xor

11種類の設定ができる。

HTML

<canvas id='canvas'></canvas>

JavaScript
Default

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);

source-over

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.globalCompositeOperation = 'source-over';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
source-over

source-over

source-atop

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.globalCompositeOperation = 'source-atop';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
source-atop

source-atop

source-in

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.globalCompositeOperation = 'source-in';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
source-in

source-in

source-out

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.globalCompositeOperation = 'source-out';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
source-out

source-out

lighter

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.fillStyle = '#ffff00';
context.fillRect(140,20,100,100);
 
context.fillStyle = '#00ff00';
context.fillRect(260,20,100,100);
 
context.globalCompositeOperation = 'lighter';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(121,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(241,1,50,50);
lighter

lighter

copy

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.fillStyle = '#ffff00';
context.fillRect(140,20,100,100);
 
context.fillStyle = '#00ff00';
context.fillRect(260,20,100,100);
 
context.globalCompositeOperation = 'copy';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(121,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(241,1,50,50);
copy

copy

xor

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#000000';
context.fillRect(20,20,100,100);
 
context.fillStyle = '#ffff00';
context.fillRect(140,20,100,100);
 
context.fillStyle = '#00ff00';
context.fillRect(260,20,100,100);
 
context.globalCompositeOperation = 'xor';
context.fillStyle = '#ff0000';
context.fillRect(1,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(121,1,50,50);
 
context.fillStyle = '#ff0000';
context.fillRect(241,1,50,50);
xor

xor

globalCompositeOperationを上手に使うのは難しそう。

update 2012-06-06
MDN にとっても分かりやすい解説がありました。
https://developer.mozilla.org/ja/Canvas_tutorial/Compositing
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

コメントを残す

必須欄は * がついています