gpt4 book ai didi

javascript - 使用 HTML5 Canvas 绘图

转载 作者:行者123 更新时间:2023-12-02 17:29:25 24 4
gpt4 key购买 nike

今天我决定开始使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com