【问题标题】:Image not appearing... JS (p5.js)图片未出现... JS (p5.js)
【发布时间】:2018-04-30 00:55:26
【问题描述】:

这是在一个名为 p5.js 的 javascript 库中编码的,请参阅:https://p5js.org/reference/

所以我设置了一个基本代码来尝试获取自定义光标...

var img;

function setup() {
  createCanvas(1000, 650);
  img = loadImage("assets/arrowmouse.png");
  image(img, mouseX, mouseY);
}

function draw() {
  background(20, 155, 255);
  fill(0, 0, 0);
}

没有图像出现,所以我得到一个蓝屏(我的背景)

【问题讨论】:

  • 请注意,这是复制粘贴语法,与文档中的完全一样
  • 为什么不用css来设置自定义光标呢?例如CodePen Demo
  • 虽然库可用,但 js fiddle 甚至没有运行它,但这里在参考页面上查看这个
  • 您没有在代码中调用任何这些函数。 setup();draw(); 也是如此。它有什么改变吗??

标签: javascript html processing p5.js


【解决方案1】:

已解决

它是一个 google chrome 安全块。我用了firefox,效果很好。


在 YouTube 评论中解决:7.8: Objects and Images - p5.js Tutorial

不得不调整语法,现在看起来像这样:

var img; function preload(){ 
arrowMouse = loadImage("assets/arrowmouse.png"); 
} 
function setup(){ 
createCanvas(1000,650); 
} 
function draw(){ 
background(20,155,255); 
fill(0,0,0); cursor("none"); 
image(arrowMouse, mouseX, mouseY,20,30); 
}

但这在 chrome 中不起作用。

这也可能有帮助:Disable same origin policy in Chrome

感谢所有试图提供帮助的人!

【讨论】:

  • 您能详细解释一下这个 Chrome 安全块吗?这可能会帮助将来遇到相同或类似问题的其他人。
  • 在 youtube 评论中解决了一条评论 youtube.com/watch?v=FVYGyaxG4To 寻找来自 Márk Molnár 的评论
  • 不得不调整语法,现在看起来像这样: var img; function preload(){ arrowMouse = loadImage("assets/arrowmouse.png"); } 功能设置() { createCanvas(1000,650); } 函数绘制() { 背景(20,155,255);填充(0,0,0);光标(“无”);图像(箭头鼠标,鼠标 X,鼠标 Y,20,30);但这在 chrome 中不起作用
  • 如果这是问题的答案,请将其标记为已接受,以便您的答案不再显示为需要答案。
猜你喜欢
  • 1970-01-01
  • 2019-02-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多