<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas test1</title>
<script type="text/javascript">
<!--
function sample() {
//描画ｺﾝﾃｷｽﾄの取得
var canvas = document.getElementById('canvas1');
if (!canvas.getContext) {
return;
}
var context = canvas.getContext('2d');
var img = new Image();
img.src = "./test20140505_1.JPG";
/* 画像を描画 */
img.onload = function() {
context.drawImage(img, 0, 0);
}
//ｷｬﾝﾊﾞｽのMouseDown
canvas.onmousedown = (function(event) {
var rect = event.target.getBoundingClientRect();
var mx = event.clientX - rect.left;
var my = event.clientY - rect.top;
// 顔 98,76-293,210
if ((98 <= mx) && (mx <= 293) && (76 <= my) && (my <= 210)) {
alert("痛い､痛い");
}
// 乳首 163,244-304,262
if ((163 <= mx) && (mx <= 304) && (244 <= my) && (my <= 262)) {
alert("おう､少し気持ち良い");
}
// 股間 330,281-391,332
if ((330 <= mx) && (mx <= 391) && (281 <= my) && (my <= 332)) {
alert("はぅ!!むっちゃ気持ちええ!!");
}