时间戳

首页 > 解决方案 > 为什么我的 js 代码无法正确加载画布？

javascript - 为什么我的 js 代码无法正确加载画布？

问题描述

我很喜欢编码。

我翻译到画布的中心，我想要绘制的点更向下而不是在画布的中心。我错过了什么？ 

<script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
<script language="javascript" type="text/javascript" src="p5.js"></script>
<script language="javascript" type="text/javascript" src="fibonacci.js"></script>

function setup() {
  createCanvas(590,304);
  background(0);
}

function draw() {
  stroke(255);
  noFill();
  translate(width/2, height/2);
  strokeWeight(8);
  point(0,0);
}

标签： javascriptcanvasp5.js

解决方案

要仅从 p5.js 创建 à canvas，您可能想以这种方式尝试：

let s = (sketch)=> {
  sketch.setup=()=>{
    sketch.createCanvas(590,304);
    sketch.background(0);
  };
  
  sketch.draw = ()=> {
    sketch.stroke(255);
    sketch.noFill();
    sketch.translate(sketch.width/2, sketch.height/2);
    sketch.strokeWeight(8);
    sketch.point(0,0);
  };
};
let p5j = new p5(s);
canvas{border:1px solid black;}
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>

来源：堆栈溢出

推荐阅读