超大龄程序员

在webpack部分最后，我们用断言assert代替之前的throw Error。 draw方法实现里面，我们直接抛出了一个异常。这表明，如果不应该运行到这里。因为这个方法，是需要子类去实现的。如果子类没有实现，就会出现这个异常。 在这种情况下，对于出现了我们认为不应该出现的情…

webpack环境已经搭好，我们开始分拆整个功能成到不同的文件里面。 注意，我们直接通过export default导出了class ActionData 。 我们通过import语法，引入了ActionData，然后才可以继承这个class。整个语法和java类似。 其他文件…

接下来，我们将会使用webpack来组织我们的代码。 首先，我们需要安装nodejs。因为nodejs里面，有一个非常有用的工具npm，可以用来帮我们开发js应用。而在后面，npm将会贯穿整个教程。 首先，去node官网下载最新版本的nodejs。你可以下载LTS版本，也可以下…

我们在重构代码之后，重新添加新的功能：添加一个圆形/椭圆的工具。 第二部，实现EllipseTool。类似于矩形，也是用鼠标拖出一个矩形区域，然后在这个矩形区域内，画出一个椭圆/圆形。因此，我们让EllipseTool直接继承RectTool： 我们只是重写了handleMou…

在这里，我们将会使用面向对象的思想。有java/c++基础的，会很容易接受。如果没有了解过，建议先了解面向对象的编程思想。 JavaScript在ES6引入了关键字class，让我们可以按照java/c++的方式来编写class了，从而摆脱难以理解的原型链。 首先，在之前的实现…

我们之前实现的画画工具，都是非常简单的功能，按照用户鼠标轨迹显示一条简单的线段。接下来，我们实现一个稍微复杂的功能：用鼠标拖动画出一个矩形。 首先，用户按下鼠标，然后移动鼠标，我们在用户按下鼠标的位置和当前鼠标移动的位置之间显示一个矩形。随着用户不断移动鼠标，矩形的大小也跟随鼠…

接下来，我们继续完善功能。作为一个手写应用，undo/redo操作是必须的。要现实undo/redo，最容易想到的实现方式，就是我们记住每一次操作的结果，在用户undo的时候，显示之前的结果给用户就可以了。但是这样有一个很大的问题，就是我们的canvas，实际上一张图片。要记住…

记住每一次绘制的路径，然后橡皮擦擦除的时候，去计算路径和橡皮擦的位置，然后把他们擦除，或者把一个比较长的路径裁剪成两个（或者多个）比较短的路径。最后用新的路径在canvas上面重新绘制即可。但是这种方式会比较复杂，因为我们不但要记住所有的路径，还需要去通过算法裁剪这些路径。 采…

我们目前仅仅测试实现了铅笔的功能。接下来我们继续增加一个新的功能：荧光笔。荧光笔通常是带有一定颜色，并且具有半透明特性，可以把下面的字迹显露出来。 而为了在铅笔和荧光笔之间进行切换，我们就需要增加两个按钮，来实现这个切换功能。 首先，我们在html里面增加了两个按钮，并且分别绑…