html绘制,用HTML5画布绘制

Since the range of sin x is [-1,1], it will only return numbers between -1 and 1, and that means all you will be drawing is a dot on the screen.

Also I see that you have an array ranging from 0 to 180. I believe you are trying to draw the curve with x from 0 degree to 180 degree? You don't really need to do this (anyway 12 points are not enough to draw a smooth line). Just do it with a for loop, with lines being the number of fragments.

First we start off by moving the point to the left of the canvas:

context.moveTo(0, 100 /*somewhere in the middle*/); //initial point

In most cases the first point won't be in the middle. But for sine it is. (You might want to fix it later though.)

for (var i = 0; i < lines; i++) {

//draw line

}

That's the loop drawing the curve. But what should we put inside? Well you can just take the number returned by the sine function and scale it up, flip it upside down, and shift it down half the way. I do that because the coordinate system in JavaScript is 0,0 in the top left instead of in the bottom left.

var sine = Math.sin(i/scale*2)*scale;

context.lineTo(i*frag, -sine+scale);

//i * frag = the position of x scaled up

//-sine + scale = the position of y, flipped, scaled, shifted down

//i/scale*2 = random scale I put in... you might want to figure out the

// correct scale with some math

So that's it. Viola, you have successfully plotted a graph in JavaScript.

Oh yes, don't forget to actually tell it to draw it on the canvas after the for loop has done its job:

context.stroke();

PS: I see that you are trying to resize the canvas using CSS. Trust me, it won't work. :) You will have to define the dimension in HTML.