Question

我正在尝试在画布中创建-360（最左边）到360（最右边）之间的正弦曲线。

就像我上学时一样，我创建了轴x和y并在-360到360之间循环运行，以找到y而不是改变x。但我不知道如何将-1坐标值除以-1到1的范围。

1）如何沿x轴和y轴平移坐标，并将中间平移为（0,0）

2）如何在-2pi到+ 2pi之间以8个块的比例比例划分x轴

var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
var gap =10;
for(let j=0;j<canvas.height;j=j+gap){
  context.moveTo(0,j);
  context.lineTo(canvas.width,j)
}

for(let j=0;j<canvas.width;j=j+gap){
  context.moveTo(j,0);
  context.lineTo(j,canvas.height);
}


context.strokeStyle= 'green';
context.stroke()

// AXIS

context.beginPath();
context.lineWidth =3;
context.strokeStyle="red";

//X axis
context.moveTo(0,canvas.height/2);
context.lineTo(canvas.width,canvas.height/2);
//y axis
context.moveTo(canvas.width/2,0);
context.lineTo(canvas.width/2,canvas.height);

context.stroke();


var x = 0;
var y=canvas.height/2;


context.moveTo(x,y);

for(i=-360;i<=360;i=i+10){
	 x = i;
   y= (Math.PI/180)*i;
   context.lineTo(x,y);
   context.moveTo(x,y);    
}

context.stroke();

<html>
  <body>
    <html>
  <body>
      <canvas id="my_canvas" width="600px" height="500px"></canvas>
  </body>
<html>

Answer 1

对正弦波图的更改：

我刚刚将x和y轴修改为我写的波函数，以匹配波开始生成的原点。
在生成正弦波时，您需要逐渐更改y轴的值，因为您已经完成了直线。我使用了这个表达式UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"Comments" message:@"Enter your submit comments" preferredStyle:UIAlertControllerStyleAlert]; alertController.view.autoresizesSubviews = YES; UITextView * alertTextView = [[UITextView alloc] initWithFrame:CGRectZero]; alertTextView.translatesAutoresizingMaskIntoConstraints = NO; alertTextView.backgroundColor = [UIColor greenColor]; NSLayoutConstraint *leadConstraint = [NSLayoutConstraint constraintWithItem:alertController.view attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:alertTextView attribute:NSLayoutAttributeLeading multiplier:1.0 constant:-8.0]; NSLayoutConstraint *trailConstraint = [NSLayoutConstraint constraintWithItem:alertController.view attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:alertTextView attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:8.0]; NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:alertController.view attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:alertTextView attribute:NSLayoutAttributeTop multiplier:1.0 constant:-64.0]; NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:alertController.view attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:alertTextView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:64.0]; [alertController.view addSubview:alertTextView]; [NSLayoutConstraint activateConstraints:@[leadConstraint, trailConstraint, topConstraint, bottomConstraint]]; UIAlertAction *okButtonAction = [UIAlertAction actionWithTitle:@"Ok" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { [alertTextView resignFirstResponder]; }]; UIAlertAction *cancelButtonAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { }]; [alertController addAction:okButtonAction]; [alertController addAction:cancelButtonAction]; [self presentViewController:alertController animated:YES completion:nil];，其中计数器的值以指数方式逐渐增加y = 180 - Math.sin(counter) * 120;然后再次递减，我们使for循环运行2 * PI而不是PI来获得2个完整波实例，一个在原点之前，一个在之后。
除此之外，您还需要(to obtain the value of increase you can literally take any PI/value but we've made use of PI/18 small increments for each coordinate as you can see initialized in the increase variable )来使用笔划并连接到之前的坐标，而不是在开头。

＆＃13;

move to the x and y values in the loop after you've incremented

＆＃13;

var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
var gap = 10;
for (let j = 0; j < canvas.height; j = j + gap) {
  context.moveTo(0, j);
  context.lineTo(canvas.width, j)
}

for (let j = 0; j < canvas.width; j = j + gap) {
  context.moveTo(j, 0);
  context.lineTo(j, canvas.height);
}


context.strokeStyle = 'green';
context.stroke()

// AXIS

context.beginPath();
context.lineWidth = 3;
context.strokeStyle = "red";

//X axis
for (i = 0; i < 720; i += 20) {
  context.lineTo(i, 180);
}
context.stroke();
//y axis
context.moveTo(canvas.width / 2 + 60, 0);
context.lineTo(canvas.width / 2 + 60, canvas.height);
context.stroke();


var counter = 0,
  x = 0,
  y = 180;
context.moveTo(x, y);


var increase = 90 / 180 * Math.PI / 9;
for (i = 0; i <= 720; i = i + 10) {
  x = i;
  y = 180 - Math.sin(counter) * 120;
  counter += increase;
  context.lineTo(x, y);

}
context.stroke();

＆＃13;

画布Sin曲线绘图

1 个答案: