html5のcanvasでは先日の記事に書いたような、線を引いたり、円を書いたりを比較的簡単にできる。
これがかなり魅力的なのか、数あるHTML5の仕様の中でも爆発的な人気を誇っているわけで。。
canvas勉強し始めの頃は、描画した図形を消すための機能が、clearRect()っていう矩形削除しか用意されていないことが疑問だったんだよね。
お絵かきソフトにある「消しゴム」のような機能はどうすれば実現できるのかと。
背景色で上書きする手もあるけど、背景色が変わったら変えないとだし、
透明色で描画する手も考えたけど、透明で描画すると、なにぶん透明なので何も表示されないように見えたり。。
でも、消しゴムの実装方法はいたって簡単だった。
context = canvas.getContext('2d');
のように取得したcontextにはglobalCompositeOperationっていうプロパティがありまして、このプロパティにdestination-outをセットすることにより、消しゴムのような動作をするわけなんです。
context.globalCompositeOperation = 'destination-out';
元に戻したかったら、
context.globalCompositeOperation = 'source-over';
をセットすれば戻ります。
他にも１０個ぐらい設定可能な値があるので、調べたい時はこのページをチェック。
https://www.html5.jp/canvas/ref/property/globalCompositeOperation.html
