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](https://i1.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_over.png?resize=374%2C132)
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](https://i0.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_atop.png?resize=374%2C132)
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](https://i0.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_in.png?resize=374%2C132)
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](https://i1.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_out.png?resize=374%2C132)
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](https://i0.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_lighter.png?resize=374%2C132)
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](https://i1.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_copy1.png?resize=374%2C132)
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](https://i1.wp.com/www.inazumatv.com/contents/wp-content/uploads/2012/04/canvas_gcc_xor.png?resize=374%2C132)
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