代码之家 › 专栏 › 技术社区 › Levent Ozbek

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

p5.js css html javascript

Levent Ozbek · 技术社区 · 4 年前

我正在用标准的JS和HTML将一个图像加载到我的web应用程序中,它只是一个简单的地图,我的目标是使用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画圆?

0 回复 | 直到 4 年前

Kevin Workman 4 年前

你需要在你的实际HTML图像?如果没有,你可以使用 loadImage() 和 image() p5.js中的函数:

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);
}

cat with circle

如果您确实需要在实际的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);
}

cat with circle