问如何在单击画布中的某个区域时运行某个函数
EN

Stack Overflow用户

提问于 2017-01-10 11:02:03

回答 0查看 106关注 0票数 0

我希望当鼠标单击画布的某个区域时，能够运行某个函数，但我不知道如何做到这一点。(我是编程新手)例如，如果我想在画布右上角的矩形区域内单击，比如坐标"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);

canvas

mouse

javascript

html

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41560452

复制

相似问题

问如何在单击画布中的某个区域时运行某个函数
EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击画布中的某个区域时运行某个函数EN

回答

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击画布中的某个区域时运行某个函数
EN