头图

JSXGraph入门教程(3.1) - 描绘面积

冒泡的马树
English
From https://ipesek.github.io/jsxg...

描绘面积

JSXGraph需要画布作为展开构建的地方。因为我们有HTML和JavaScript,
我们需要HTML中的一个元素来让JavaScript拿来充当画布。首先我们需要在HTML中挪个地方,在此开始我们的构建。
我们将使用带有特定属性的div元素来满足此目的。

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>

从上面这行代码中我们可以看到一些属性。其中‘id=jxgbox'对我们来说非常重要,那是我们用来对接JSXGraph的。
接下来的’class=jxgbox‘是用来声明我们的画板的外观表现的。这是一个比较高级的话题,我们稍后会讨论。
最后的属性是’style=”width:500px; height:200px;"',用于定义我们的画板的大小。

重点:这里我们并没有定义自己的坐标系统,仅仅是画布的大小。

当我们定义好画布之后,我们需要将之与JSXGraph对接。这可以由下面的代码实现。其需要被放在一个'<script></script>'标签中。

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});

可以看到其调用了initBoard函数,用来构建画板。这个函数需要至少一个参数,在上面例子中id为’jxgbox‘的div元素。
‘boundingbox: [-5, 2, 5, -2]'则设定了构建的坐标系统的边界。

观察上述两行代码,我们可以看到有两种大小的定义。对div元素我们创建了一个大小为具体像素值的画布。
然后我们声明了一个坐标系统和它的大小,用以在画板上放置对象。

阅读 377

痴迷于赛博朋克世界的新手村代码玩家一枚

120 声望
10 粉丝
0 条评论
你知道吗?

痴迷于赛博朋克世界的新手村代码玩家一枚

120 声望
10 粉丝
宣传栏