代码之家 › 专栏 › 技术社区 › mchd

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

p5.js css html javascript

mchd · 技术社区 · 6 年前

我正在用标准的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 回复 | 直到 6 年前

Kevin Workman 6 年前

你需要在你的实际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

-3

Tanishq Singh Anand 6 年前

刚刚检查了你的怀疑背景是重叠的圆,因为深度u可以给圆的深度大于背景

推荐文章

Hugues Alard · p5。js ReferenceError:未定义keyDown

4 年前

InspectorDanno · P5中的定时计数器。js公司

8 年前

Coding King2 · 图像未出现。。。JS(p5.JS)

8 年前

Samina · 在p5/javascript中,如何从数组中选择一个随机值,而不让值不断变化?

8 年前

mackycheese21 · 如何获取系统时间?

8 年前

fighg · 使用对象数组访问类函数

8 年前

DUK · 在p5中使用php代码块。js调用python脚本

8 年前

Julien Robitaille-Brisson · 如何在P5中创建彼此不重叠的随机不协调形状。js[关闭]

8 年前

Alfie Atkinson · P5.js mousePressed()函数不工作:/

8 年前

Pro Q Rich Lysakowski PhD · 如何在p5中获得特定的颜色成分。js公司

8 年前