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-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-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-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
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
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
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
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