使用HTML5画布绘图

我决定要踏上元素，我可以说到目前为止它已经是噩梦让它工作。我只想绘制正弦图。所以在阅读好后，我仍然不能得到出处，也不能得到它的阴谋。下面是我试过的（我第一次用这个标签，所以原谅我的无知）。我想知道的是the guy here有它，但对于像我这样的初学者来说代码很难理解。使用HTML5画布绘图

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Graphing</title> 
     <link type="text/css" rel="Stylesheet" href="graph.css" /> 
     <script type="text/JavaScript" src="graph.js" ></script> 
    </head> 

    <body> 
     <canvas id="surface">Canvas not Supported</canvas>   
    </body> 

</html>

CSS

#surface 
{ 
    width:300; 
    height:225; 
    border: dotted #FF0000 1px; 
}

JavScript

window.onload = function() 
{ 
    var canvas = document.getElementById("surface"); 
    var context = canvas.getContext("2d"); 

    arr = [0,15, 30,45,60, 90,105, 120, 135, 150, 165, 180 ]; 
    var x=0; 
    var y = 0; 
    for(i=0; i<arr.length; i++) 
    { 
     angle = arr[i]*(Math.PI/180); //radians 
     sine = Math.sin(angle); 

     context.moveTo(x,y); 
     context.lineTo(angle,sine); 
     context.stroke(); 

     //set current varibles for next move 
     x = angle; 
     y = sine; 
    } 


}

来源

2014-04-21 Stefano Mtangoo

看看这个答案在这里，应该给你的东西继续：http://stackoverflow.com/questions/6032998/how-to-draw-a-curve-that-could-move-to-left-with -canvas –

我能够用代码减去一些html元素生成jsfiddle。看这里。 http://jsfiddle.net/franktudor/4wv9r/ –

好吧，'sin'的域名在-1和1之间，这就是为什么你只能看到一个点。 –

由于范围是[-1,1]，它只会返回-1和1之间的数字，这意味着您要绘制的所有图形都是屏幕上的一个点。

另外我看到你有一个从0到180的数组。我相信你正在试图从0度到180度绘制x的曲线？你并不需要这么做（反正12分不足以画出一条平滑的线）。只需用for循环来完成，其中lines是片段的数量。

首先，我们开始通过移动点到画布的左：

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

在大多数情况下，第一点也不会在中间。但对于正弦来说。（您可能想稍后修复它。）

for (var i = 0; i < lines; i++) { 
    //draw line 
}

这就是绘制曲线的循环。但我们应该放入什么？那么你可以把正弦函数返回的数字放大，把它倒过来，然后把它向下移动一半。我这样做是因为JavaScript中的坐标系统是左上角的0,0而不是左下角的。

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

就这样。 Viola，你已经成功在JavaScript中绘制了一张图。

哦，是的，不要忘了真正告诉它画在画布上的for循环已完成其工作后：

context.stroke();

演示：http://jsfiddle.net/DerekL/hK5rC/

PS：我看到你正在尝试使用CSS调整画布的大小。相信我，这是行不通的。 :)你将不得不在HTML中定义维度。

来源

2014-04-21 22:00:47

的确很好的解释！ –

使用HTML5画布绘图

回答

相关问题