机械制图国家标准的绘图模板_如何使用p5js构建绘图应用

机械制图国家标准的绘图模板

The theme for week #5 of the Weekly Coding Challenge is:

每周编码挑战第5周的主题是：

创建绘图应用程序 (Creating a Drawing Application)

This is the first application that we are building in the #weeklyCodingChallenge program. So far we have built smaller projects, so this is pretty exciting if you ask me! ?

这是我们在#weeklyCodingChallenge程序中构建的第一个应用程序。 到目前为止，我们已经建立了较小的项目，因此如果您问我，这将非常令人兴奋！ ？

In this article we’ll use p5js, a drawing library, to build a Drawing Application:

在本文中，我们将使用绘图库p5js来构建绘图应用程序 ：

Check out the CodePen here:

在此处查看CodePen：

If you want to learn more about p5js and what it does, you can visit their official website. Basically, I am using it because it works very well on top of the browser’s canvas element by providing a clear API.

如果您想了解更多有关p5js及其功能的信息，可以访问其官方网站 。 基本上，我使用它是因为它通过提供一个清晰的API在浏览器的canvas元素上很好地工作。

HTML (The HTML)

As you can notice in the example above, on the left side of the screen we have a .sidebar. We'll put inside it our 'tools' - a color picker, a weight selector and the clear button (trashcan icon):

您可以在上面的示例中注意到，在屏幕的左侧，我们有一个.sidebar 。 我们将在其中放入“工具”-一个color选择器，一个weight选择器和一个clear按钮(垃圾桶图标)：

<div class="sidebar">
    <ul>
        <li>
            <label for="color">Color:</label>
            <input type="color" id="color" />
        </li>
        <li>
            <label for="weight">Stroke:</label>
            <input type="number" id="weight" min="2" max="200" value="3" />
        </li>
        <li>
            <button id="clear"><i class="fa fa-trash"></i></button>
        </li>
    </ul>
</div>

CSS (The CSS)

Using CSS we’ll move the .sidebar and everything