时间戳

首页 > 解决方案 > 画布在浏览器上不可见（使用原子文本编辑器）

html - 画布在浏览器上不可见（使用原子文本编辑器）

问题描述

我刚刚设置了 atom 并安装了 p5.js 包。它正在运行，但画布不可见。草图.js

 function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
 // put drawing code here
 background(0);
 rect(100,100,50,50);
}

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
  body {
   padding: 0;
   margin: 0;
  }
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>

在使用原子编辑器运行它时，画布在浏览器屏幕上不可见

标签： htmlp5.js

解决方案

  1. 您必须将第二个 c 大写createCanvas(width, height);

  2. 你不能使用canvas.style("visibility", "visible")，所以删除那行

3.为了将来参考，检查页面并查看控制台，我从错误中发现了这两个东西。

function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}

你的html是正确的

推荐阅读