Canvas 碰撞检测

canvas 的尺寸分为两种，一个是 canvas 作为 html 元素本身的尺寸，另外一个 canvas 作为绘图容器的绘图表面尺寸。

// html元素尺寸是 属性style中设置的100px,100px;canvas绘图尺寸是属性值width和height设置的500，500。 对canvas画布进行绘画操作的是后者。
<canvas id="canvas" width="500" height="500" style="border: 5px solid gray;margin:10px;padding: 10px;background: lightcyan;width:100px;left:100px"></canvas>

那么通过触摸事件如何获得 触摸点在canvas绘图尺寸中的位置呢？

var canvas = document.getElementById("canvas");
//相对于 画布左上角的 横向绘图尺寸
var x=(e.targetTouches[0].pageX - canvas.offsetLeft -parseFloat(canvas.style.borderWidth||0)-parseFloat(canvas.style.paddingLeft||0))*canvas.width/parseFloat(canvas.style.width);
//相对于 画布左上角的 纵向绘图尺寸
var y=(e.targetTouches[0].pageY - canvas.offsetTop -parseFloat(canvas.style.borderWidth||0)-parseFloat(canvas.style.paddingTop||0))*canvas.width/parseFloat(canvas.style.width);