Question

我试图在画布上的图像上标记一个圆圈。我想使用imagemap，但无法这样做。有什么建议吗？

我想在画布上运动的图像上标记一个圆圈。使用imagemap尝试过，但似乎不支持。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>




<script type="application/javascript">
  var ctx = null;
  var stepX = 1;
  var stepY = 1;
  var size_x = 221;
  var size_y = 184;
  var canvas_size_x = 800;
  var canvas_size_y = 600;


  var x_icon = Math.floor((Math.random() * canvas_size_x/2) + 1);
  var y_icon = Math.floor((Math.random() * canvas_size_y/2) + 1);

  var anim_img = null;
  var myVar=null;


  function draw() {
    var canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d");
    anim_img = new Image(size_x, size_y);
    anim_img.onload = function() { 
        myVar = setInterval(myAnimation, 10); 
        }
    anim_img.src = 'image/download.jpg';
    //anim_img.useMap='#elephant';
    anim_img.id='ele';
    anim_img.


    canvas.onmousedown=function() {
            clearInterval(myVar);
            //draw();
    }

    canvas.onmouseup=function() {
        draw();
    }


  }

  function myAnimation() {
    ctx.clearRect(0, 0, canvas_size_x, canvas_size_y);
   if (x_icon < 0 || x_icon > canvas_size_x - size_x) {stepX = -stepX; }
   if (y_icon < 0 || y_icon > canvas_size_y - size_y) {stepY = -stepY; }
      x_icon += stepX;
      y_icon += stepY;
   ctx.drawImage(anim_img, x_icon, y_icon);
  }

  var x = document.getElementById("ele").useMap = "#elephant";


</script>

  <map name="elephant"> <!--eye mark on the elephant -->
    <area class="yellow" shape="rect" coords="10,10,80,80" href="test.com" />
</map>

我想在图像上标记一个位置，但是似乎没有实际的方法。

在html画布上的图像中标记一个圆圈

0 个答案: