JavaScript 之 canvas（二）-- 绘制基本图形

本文首发地址： https://www.jeremyjone.com/465/ ，转载请注明
代码地址：https://github.com/jeremyjone/CanvasPaint ，需要请自行查看。

在JavaScript 之 canvas（一）中理解了canvas的绘图原理，这次就开始绘制基本图形。

一般来说，canvas的图形分成实心(fill)和空心(stroke)，我们的绘图板基本使用的是空心图形，但是也要了解一下实心图形，其原理是一毛一样的。

直线

一般来说，直线需要知道两端坐标，所以代码如下：

// 直线
context.moveTo(150, 150);  // 移动到某一位置
context.lineTo(300, 150);  // 画直线从当前点到给定的位置
context.stroke();

这样就绘制出一条起点在 (150, 150)，终点在 (300, 150) 的水平直线。

好像很简单的样子，接着来看下一个。

箭头

箭头的思路和直线差不多，先画直线，然后在终点位置画一个填充的三角形即可。
注意三角形需要按照直线的方向，所以用到的数学属性如下：

// 箭头
// 箭头的思路和直线差不多，先画直线，然后在终点位置画一个填充的三角形即可
// 注意三角形需要按照直线的方向，所以用到的数学属性如下
context.moveTo(230, 230);  // 移动到指定坐标
context.lineTo(500, 230);  // 画直线
context.stroke();  // 填充直线
let endRadians = Math.atan((230 - 230) / (500 - 230));  // 计算出当前直线的角度
endRadians += ((500 >= 230) ? 90 : -90) * Math.PI / 180;  // 角度的正负取值
context.translate(500, 230)