我希望能够在画布的某个区域单击鼠标时运行某个功能,但我不明白该怎么做。 (我是编程的新手),例如,如果我想在画布右上角的矩形区域内单击,例如坐标“172,58,269,166”
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas{
margin-top: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
/*display:block;*/
}
</style>
</head>
<body background="MANCALA-start_bg_texture.jpg">
<div class="container">
<canvas id="myCanvas" width="1141" height="479" usemap="Canvas"></canvas>
<script>
function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// identifies what each of the pictures
var sources = {
background: 'MANCALA-game_bg_combined3.png',
pit1marble1: 'MANCALA-game_marble.png',
pit1marble2: 'MANCALA-game_marble.png',
pit1marble3: 'MANCALA-game_marble.png',
pit1marble4: 'MANCALA-game_marble.png',
pit1marble5: 'MANCALA-game_marble.png',
pit1marble6: 'MANCALA-game_marble.png',
};
//loading the images on the canvas
loadImages(sources, function(images) {
context.drawImage(images.background, 0, 0, 1141, 479);
context.drawImage(images.pit1marble1, 200, 70, 50, 50);
context.drawImage(images.pit1marble2, 160, 85, 50, 50);
context.drawImage(images.pit1marble3, 175, 75, 50, 50);
context.drawImage(images.pit1marble4, 190, 80, 50, 50);
context.drawImage(images.pit1marble5, 200, 100, 50, 50);
context.drawImage(images.pit1marble6, 160, 100, 50, 50);
//mouse positioning
document.getElementById("myCanvas").onclick = function() {pasDiKlik()};
function pasDiKlik() {
context.beginPath();
context.arc(event.clientX-10, event.clientY-10,10, 0, 2 * Math.PI, false);
答案 0 :(得分:1)
您可以向画布添加eventlistener,在画布上获取鼠标的位置,然后根据该操作执行操作。例如:
var canvas = document.getElementById("MyCanvas")
var canvasLeft = canvas.offsetLeft,
var canvasTop = canvas.offsetTop
canvas.addEventListener("click", function(event){
var x = event.pageX - canvasLeft
var y = event.pageY - canvasTop;
};
变量x和y现在是画布上的像素位置。
例如,检查你的第一个盒子(左上角:200px,70px,右下角:250px,120px)。
if (x >= 200 && x <= 250 && y >= 70 && y <= 120) {
//perform action here
};