如何在 HTML 图像上绘制 p5.js 圆圈

Question

我正在使用标准 JS 将图像加载到我的 Web 应用程序中，HTML 它只是一张简单的地图，我的目标是使用 p5.js.

在其上绘制

<div id="map">
    <img src="Assets/MENA.jpg" class="image" width="1500" height="750">
</div>

function conflictMapMENA() {
    this.name="MENA conflict map";
    this.id="conflict-map"


    this.draw = function() {
        var map = document.createElement('img')
        map.src = 'Assets/MENA.jpg'

        gallery.selectVisual(map);

        fill(255, 0, 0);
        ellipse(30, 30, 10);
    }

}

在 this.draw = function(){} 中，我正在调用 p5.js 库的 ellipse() 和 fill() 函数来绘制一个红色圆圈。这是它的样子：

但是当我尝试调整坐标以将圆圈移动到地图上方时，圆圈在其下方。有没有办法让我不用纯 JS 画圆圈就可以让这两个东西配合？

Answer 1

刚刚检查了你的疑问，背景与圆圈重叠，因为深度你可以让圆圈的深度大于背景

Answer 2

您需要图片在您的实际 HTML 中吗？如果没有，可以使用p5.js中的loadImage()和image()函数：

let myImage;

function setup() {
  createCanvas(400, 400);
  myImage = loadImage("https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Domestic_Cat_Demonstrating_Dilated_Slit_Pupils.jpg/220px-Domestic_Cat_Demonstrating_Dilated_Slit_Pupils.jpg");
}

function draw() {
  image(myImage, 0, 0, width, height);
  
  ellipse(width / 2, height / 2, 100, 100);
}

如果您确实需要在您的实际 HTML 中使用您的图像，那么您可以结合使用 CSS 和 parent() 函数使图像与您的草图重叠：

  <body>
    <div id="my-canvas"
         style="position:absolute;"></div>

    <img style="width: 400px; height: 400px;"
         src="path/to/image.png" />
    
    <script src="sketch.js"></script>
  </body>


function setup() {
  const canvas = createCanvas(400, 400);
  canvas.parent('my-canvas');
}

function draw() {
  ellipse(width / 2, height / 2, 100, 100);
}

如何在 HTML 图像上绘制 p5.js 圆圈

How to draw a p5.js circle over an HTML image

html

javascript

css

p5.js