canvas教程(二) 绘制直线

通过 canvas 教程(一) 简介 咱们知道了 canvas 的一些基本状况

而本次是给你们带来直线的绘制

canvas 中，基本图形有两种，一种是直线，还有一种是曲线
可是不管是直线仍是曲线，咱们都应该先了解 canvas 的坐标系 s

canvas 的坐标系

要绘制以前确定要了解一下 canvas 的坐标系，咱们以前确定接触过数学坐标系：y 轴正方向是向上的

其实在前端领域里几乎全部的坐标系都是使用的 w3c 的坐标你，canvas 也是同样，w3c 的坐标系和数学坐标系的区别就在于：w3c 坐标系的 y 轴正方向是向下的

绘制直线

canvas 中绘制直线可使用 moveTo 和 lineTo 两个方法，咱们看看绘制一条直线的语法是怎么样的

context.moveTo(x1, y1); //将画笔移动至坐标(x1,y1)做为新的起点
context.lineTo(x2, y2); //从起点画线到(x2,y2)并以此做为新的起点
context.stroke(); //描边连线

stroke 是指描边，对应的还有 fill 填充，咱们在下面的绘制中试一试便知道是什么意思了

moveTo 和 lineTo 是能够重复使用来同时绘制多条直线

因此咱们能够进行绘制三角形，矩形等

描边三角形：

context.moveTo(50, 50);
context.lineTo(50, 100);
context.lineTo(100, 100);
context.lineTo(50, 50);
context.stroke();

填充矩形：

context.moveTo(50, 50);
context.lineTo(50, 100);
context.lineTo(150, 100);
context.lineTo(150, 50);
context.lineTo(50, 50);
context.fill();

是吧，咱们很容易就理解了其中的区别。

绘制矩形

那么在咱们开发当中，矩形是很是常见的，但咱们发现一条一条的直线绘制是一件很麻烦的事情，因此 canvas 也带有了绘制矩形的方法: rect(x, y, width, height)

其中 x,y 表明绘制起点 width 和 height 分别要绘制的矩形的宽和高

而在咱们绘制的时候能够修改颜色便是描边颜色：strokeStyle 和填充颜色：fillStyle

这两个属性的取值分为三种 1.颜色值 2.渐变色 3.图案
后面两种暂且不表，颜色则支持十六进制、颜色关键字（例如：red）、rgb、rgba

因此绘制矩形的步骤是

context.strokeStyle = 'red'; //1. 设置描边颜色
context.rect(50, 50, 100, 50); //2. 绘制矩形
context.stroke(); //3. 描边

canvas 也提供了另外两种绘制矩形的方法：描边矩形和和填充矩形
就是上面的 2，3 的结合
填充和描边的分别是 fill 和 stroke 那么填充矩形和描边矩形的方法就是 fillRect 和 strokeRect 了
语法均是一致的

⚠️ strokeStyle 和 fillStyle 必须在绘制以前设置，不然无效

清除画布

有绘制矩形的方法，也有清除矩形的方法，这里的清除矩形不是指清除以前画的全部矩形，而是指在画布清除指定矩形区域
方法名字为 clearRect，属性和绘制矩形是一致的

因此咱们之后也会常常用到这个方法来，用来清空整个 canvas，即 context.clearRect(0,0,canvas.width,canvas.height)

结束

本次讲了：绘制直线、绘制矩形、描边和填充、清除矩形，你们学会了多少呢？

其实已经能够利用这些作一些好玩的事情了，好比五角星，多边形，取色板等有趣的形状，工具

好了，本次的教程就到这里结束了，下次将为你们带来曲线相关的绘制