在画布中绘制正弦波-解网

问：

我试图在画布上画一个简单的正弦波，但我没有做对。这是我想要的输出，如图所示。

到目前为止，我得到的是 http://jsfiddle.net/RaoBurugula/gmhg61s6/4/

[HTML全

 <canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

JS公司

 var c = document.getElementById("myCanvas");
 var ctx = c.getContext("2d");
 var i;
 for(i=0; i<360; i+= 20){
    ctx.moveTo(i+5,180);
    ctx.lineTo(i,180);

 }
 ctx.stroke();
 var counter = 0, x=0,y=180;

 //100 iterations
 var increase = 90/180*Math.PI ;
 for(i=0; i<=180; i+=10){

 ctx.moveTo(x,y);
 x = i;
y=  180 - Math.sin(counter);
counter += increase;

ctx.lineTo(x,y);
alert( " x : " + x + " y : " + y) ;
}
ctx.stroke();

我想要的输出

My desired output

HTML 画布弦波

0赞 rghome 4/28/2015

您每次都按 PI/2 增加计数器。这无济于事。

答：

10赞 Guffa 4/28/2015 #1

您正在增加一个值，如果它太高，请使其变小：counter

var increase = 90/180*Math.PI / 9;

绘制图表的整个宽度而不是一半：

for(i=0; i<=360; i+=10){

您需要更高的振幅：

y =  180 - Math.sin(counter) * 120;

演示：http://jsfiddle.net/Guffa/gmhg61s6/5/

0赞 BRDroid 4/28/2015

嗨，Guffa，如果我想添加一个超时来逐步查看它的绘制方式。我该怎么做。谢谢

0赞 Guffa 4/29/2015

@Rao：您可以使用调用自身的函数，而不是循环：jsfiddle.net/Guffa/gmhg61s6/9setTimeout

0赞 felixo 5/11/2019

@Guffa 这太棒了！它帮助我创造了我的曲线，但我也试图为我的曲线制作动画，有什么想法如何实现吗？

3赞 quantummind 7/13/2016 #2

您的代码不必要地困难。试试就这么简单：

    var c = document.getElementById("myCanvas"); // get the canvas object to draw onto
    var ctx = c.getContext("2d"); // will use simpe 2D context on the canvas
    
    for(x=0; x<360; x += 20) { // 360 steps for entire sine period
        ctx.moveTo(x+10,180);  // for dashed line, go to start of next dash
        ctx.lineTo(x,180);  // then draw the short line
    }
    ctx.moveTo(0,180);  // back to the left before drawing the sine
    
    for(x=0; x<=360; x+=1) { // 360 steps (degrees) for entire sine period
        y = 180.0 - Math.sin(x*Math.PI/180)*120; // calculate y flipped horizontally, converting from DEG to RADIAN
        ctx.lineTo(x,y); // draw the point
    }
    ctx.stroke(); // strokes the drawing to the canvas

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

1赞 csabaD 10/16/2016 #3

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var i;
var amplitude = 90;
var width = c.width;
var height = c.height / 2;
var step = 1;
var frequency = 4;
ctx.moveTo(0, height);
ctx.lineTo(width, height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, height);
var c = width / Math.PI / (frequency * 2);

for (i = 0; i < width; i += step) {
  var x = amplitude * Math.sin(i / c);
  ctx.lineTo(i, height + x);
}

ctx.strokeStyle = '#0096FF';
ctx.stroke();

<canvas id="myCanvas" width="600" height="300" style="border:1px solid #d3d3d3;">

0赞 Charlie Fish 10/16/2016

提供某种类型的代码解释可能会有所帮助。

5赞 bartpie 9/8/2017 #4

使用，这只是一个示例，您应该调整参数以获得漂亮的正弦曲线bezierCurveTo

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(50,50);
ctx.bezierCurveTo(120,-100,200,250,250,50);
ctx.bezierCurveTo(300,-100,350,250,430,50);
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();

<canvas id="myCanvas" width="550" height="360" style="border:1px solid #d3d3d3;">

0赞 Birbal Singh 3/20/2018 #5

使用单循环，您可以轻松地

var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
    	var y=180;
      //draw axis
      ctx.beginPath();
      ctx.strokeStyle = "red";
      ctx.moveTo(0,  y/2);
      ctx.lineTo(y,  y/2);
      ctx.stroke();
      // draw sin wave
      ctx.beginPath();
      ctx.moveTo(x,y);
      ctx.strokeStyle = "black";
      for(var x=0; x<=180; x+=1){
          ctx.lineTo(x,((y/2)  + y/2  * Math.sin( ((x+-y/2)/90) * Math.PI)));
          ctx.stroke();
          }

<canvas id="myCanvas" width="360" height="360" style="border:1px solid #d3d3d3;">

https://i.stack.imgur.com/9oEN0.png

3赞 EliSherer 11/10/2018 #6

根据 bartpie 的回答：

const l = 180; // length
const heightRatio = 2;
const tf = l * 2 / 5; // two fifths of length

const ctx = document.getElementById("canvas").getContext("2d");
ctx.translate(10, 100); // just for display


ctx.beginPath();
ctx.strokeStyle ='red';

ctx.moveTo(0,0);
ctx.lineTo(l,0);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle ='#000';

ctx.moveTo(0,0);
ctx.bezierCurveTo(tf,-(l*heightRatio-tf),l-tf,l*heightRatio-tf,l,0);

ctx.stroke();

<canvas id="canvas" width="200" height="220">

10赞 Sanxofon 11/3/2019 #7

老问题，但非常普遍。

这里的所有答案都非常有用，但没有一个有很好的注释代码，所以我创建了一个片段来解释每个点上发生的事情，并绘制了许多变量以使其清晰。感谢大家帮助我理解，我希望这对其他人有所帮助。

var c = document.getElementById("canvas"); // Grab canvas object
var ctx = c.getContext("2d"); // Define canvas context
var w=c.width; // Canvas width => Frequency is relative to this
var h=c.height/2; // Canvas height over two => Amplitude: Volume
var f=1; // How many cycles per canvas width => Frequency: Tone & Speed
// Calculates y position from x
function calcSineY(x) {
	// This is the meat (unles you are vegan)
  // Note that:
  // h is the amplitude of the wave
  // x is the current x value we get every time interval
  // 2 * PI is the length of one cycle (full circumference)
  // f/w is the frequency fraction
	return h - h * Math.sin( x * 2 * Math.PI * (f/w) );
}
function drawSine(x){
	ctx.clearRect(0, 0, w, h*2);
  //draw x axis
  ctx.beginPath(); // Draw a new path
  ctx.strokeStyle = "green"; // Pick a color
  ctx.moveTo(0,h); // Where to start drawing
  ctx.lineTo(w,h); // Where to draw to
  ctx.stroke(); // Draw
  
  // draw horizontal line of current amplitude
  ctx.beginPath(); // Draw a new path
  ctx.moveTo(0,h); // Where to start drawing
  ctx.strokeStyle = "gray"; // Pick a color
  for(var i=0;i<x;i++){ // Loop from left side to current x
    var y = calcSineY(x); // Calculate y value from x
  	ctx.moveTo(i,y); // Where to start drawing
    ctx.lineTo(x,y); // Where to draw to
  }
  ctx.stroke(); // Draw
  
  // draw amplitude bar at current point
  ctx.beginPath(); // Draw a new path
  ctx.strokeStyle = "red"; // Pick a color
  for(var i=0;i<x;i++){ // Loop from left side to current x
    var y = calcSineY(x); // Calculate y value from x
  	ctx.moveTo(x,h); // Where to start drawing
    ctx.lineTo(x,y); // Where to draw to
  }
  ctx.stroke(); // Draw
  
  // draw area below y
  ctx.beginPath(); // Draw a new path
  ctx.strokeStyle = "orange"; // Pick a color
  for(var i=0;i<x;i++){ // Loop from left side to current x
    if(i/3==Math.round(i/3)) { // Draw only one line each 3 pixels
      var y = calcSineY(i); // Calculate y value from x
      ctx.moveTo(i,h); // Where to start drawing
      ctx.lineTo(i,y); // Where to draw to
    }
  }
  ctx.stroke(); // Draw
  
  // draw sin curve point to point until x
  ctx.beginPath(); // Draw a new path
  ctx.strokeStyle = "black"; // Pick a color
  for(var i=0;i<x;i++){ // Loop from left side to current x
    var y = calcSineY(i); // Calculate y value from x
    ctx.lineTo(i,y); // Where to draw to
  }
  ctx.stroke(); // Draw
}
// Define initial value of x positiom (leftmost side of cnanvas)
var x=0;
// Start time interval
var interval = setInterval(function(){
	drawSine(x); // Call draww function every cycle
	x++; // Increment x by 1
	if(x>w){
	    x=0; // x cannot be more than canvas with, so back to 0
        f++; // increment frequency for demonstration
    }
},10); // Loop every 10 milliseconds

<canvas id="canvas" width="320" height="120" style="border:1px solid #999;">

1赞 mrwolferinc 11/22/2020 #8

function plotSine(amplitude, frequency) {
  const canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.beginPath();
    
    ctx.strokeStyle = '#343a40';
    ctx.lineWidth = 2;
    
    var x = 0;
    var y = 0;
    
    while (x < canvas.width) {
      y = (canvas.height / 2) + amplitude * Math.sin(x / frequency);
      ctx.lineTo(x, y);
      
      x += 1;
    }
    
    ctx.stroke();
  }
}

plotSine(40, 20);

code {
  background-color: #eee;
  border-radius: 3px;
  padding: 0 3px;
}

<canvas id="canvas" width="480" height="360">
  <p>
    Your browser does not support the <code>&lt;canvas&gt;</code> element.
  </p>
</canvas>

上一个：如何使用 MockK 测试挂起函数？

下一个：Android：系统调用期间出现 SSLException I/O 错误，连接超时

在画布中绘制正弦波

drawing sine wave in canvas

评论

评论

评论