点击不同区域触发不同事件,其中E1-E5与E6-E7是不规则,理论是上一个四边形旋转后的效果。W1-W5与N1-N5规则图形好判断触发点是否在其中。这张图原大小是580*518的尺寸所以在建立canvas的时候设置了一个宽度与高度,其次这是手机页面的图像,要考虑到不同手机尺寸的情况。#cvs {
max-width: 100%;
height: auto;
}var cvs = document.getElementById('cvs');
var img = new Image();
img.src = "images/item.png";
img.onload = function () {
v...