タッチの強さを利用して簡単なお絵かき機能を実現する (iPhone 6s以降／Force touch/3D touch)
説明
iPhone 6s以降ではタッチの強さを利用して簡単なお絵かきプログラムを作成することができます。まず、touchmoveイベント発生時にタッチイベントオブジェクトから取得できるforceプロパティを読み出し押された強さを取得します。Math.pow()を使って押された強さに応じてペンサイズを計算します。あとはCanvasのarc()メソッドを使って正円を描きます。色などはfillStyleプロパティに設定しておきます。
サンプルプログラム
document.getElementById("myCanvas").ontouchmove = function(evt){
evt.preventDefault();
var ctx = this.getContext("2d");
ctx.fillStyle = "rgba(0, 0 , 0, 0.05)"; // 半透明の黒色にする
ctx.beginPath(); // パスを新規作成
var t = evt.touches[0];
ctx.arc(t.clientX, t.clientY, Math.pow(100, t.force), 0, Math.PI*2, true);
ctx.fill();
}