今天我决定开始使用 element，我可以说到目前为止，让它发挥作用简直是噩梦。我想要的只是绘制一个正弦图。因此，在读完之后，我仍然无法了解起源或情节。以下是我尝试过的(我第一次使用该标签，请原谅我的无知)。让我好奇的是the guy here有了，但是对于像我这样的初学者来说，代码很难理解。
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;
}
}
最佳答案
由于 sin x 的范围是 [-1,1]，因此它只会返回 -1 到 1 之间的数字，这意味着您将绘制的所有数字是屏幕上的一个点。
我还看到您有一个范围从 0 到 180 的数组。我相信您正在尝试使用 x 绘制从 0 度到 180 度的曲线？你其实并不需要这样做(无论如何 12 个点不足以画一条平滑的线)。只需使用 for 循环即可，其中 lines 是片段数。
首先，我们将点移动到 Canvas 的左侧:
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 循环完成其工作后实际告诉它在 Canvas 上绘制它:
context.stroke();
演示:http://jsfiddle.net/DerekL/hK5rC/
<小时/>PS:我发现您正在尝试使用 CSS 调整 Canvas 大小。相信我，这是行不通的。 :) 您必须在 HTML 中定义尺寸。
关于javascript - 使用 HTML5 Canvas 绘图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23205952/