12

キャンバスに単純な正弦波を描こうとしていますが、うまくいきません。これは、写真のように私の望ましい出力です。

私がこれまでに得たものは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();

私の望む出力

私の望む出力

4

8 に答える 8

10

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/

于 2015-04-28T11:03:24.603 に答える
3

あなたのコードは不必要に難しいです。とても簡単に試してみてください：

    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;">

于 2016-07-13T11:47:40.530 に答える
1 

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;">

于 2016-10-15T19:33:13.997 に答える