Question

基本上我是编程的新手，并希望首先在javascript中使用库来渲染网页中的内容以获得乐趣，除非我按照代码序列的教程关于p5.js关于翻译，旋转，推送和pop（在这里找到= https://www.youtube.com/watch?v=o9sgjuh-CBM），它工作得很好，我添加了几个小点，使它与我想用它做的独特，它很好，但是我打开完全相同的代码后一天检查一些东西，当我用chrome打开它时突然它不起作用，我错过了什么或者p5.js更新了它的语法还是什么？

//test to learn functions translate, rotate, push/pop
//rotation needs translate in order to function because rotation needs to 
know which point to rotate from

var canvas;

let angle = 0; //let creates a variable, the variable is angle, this tells 
the shape to rotate on the origin point (0,0)

let x = 50;

let y = 50;

function setup() {

createCanvas(1200, 768);

canvas.position(350, 200);

angleMode(DEGREES);//tells pc to use degrees as a method of measuring radians

rectMode(CENTER);//changes point of reference from corner to the middle of shape, so that it rotates from its middle. Can be put in function draw() but 
in function setup() it makes its universal for all rectangles

}

function draw() {

  background(0); //backgroundfill

  angle = angle +2;//determines angle and speed of rotation in DEGREES like we specified, in this case, 2 degree(s)

  x = x + 0.5;//defines x as a movement along the x axis from 0 at a defined speed


  push();// saves; self contains, this rectangle is independant of other objects

  translate(600, 384); //moves coorninate 0,0 to another location, objects under it will consider where it defines 0,0 to be (you can also use mouseX and mouseY to make the mouse point 0,0, pixels on the canvas like (300, 400) or (x,y) if you have defined it)

  rotate(angle);//tells objects under it to rotate using the angle variables information

  fill(255, 100, 50);

  rect(0, 0, 100, 100);

pop(); // undos



push();

translate(600, 384);

rotate(-angle * 1); //rotates reusing the angle variable but reversed 
(thus is negative)

fill(50, 100, 255); //colorfill

rect(0, 0, 100, 100); //shape primitive; x,y,wide,tall

pop();


translate(600, 384);

rotate(-angle * 1);

line(600, 384, 0, 200);//creates a line

stroke(255, 255, 255);//defines lines color



}

以及这里的HTML，以防万一我不在的地方

<html>
<head>
<title>test_01</title>
<script src="rotate_01"></script>
<script src=p5.js></script>
<script src=p5.dom.js></script>

<style>

</style>

</head>
<body>
<h1 style="font-family: verdana; text-align:center;">p5.js test</h1>
<div>
<p style="font-size:20px; text-align:center;">object_rotate</p>

</body>
</html>

翻译，旋转，推/弹教程代码不再工作

0 个答案: