之前我使用遍历的方式绘制了一个线的颜色渐变，这种方式其实不好，本章节来看看使用createLinearGradient方法来设置颜色渐变。 createLinearGradient() 方法创建线性的渐变对象。 渐变可用于填充矩形、圆形、线条、文本等等。 提示：请使用该对象作为…

上面绘画了三条平行线设置了末端样式，下面给三条平行线进行打折，使用lineJoin的方式设置拐点的样式。 下面绘画一个正方形，并使用fillStyle来填充颜色。

绘画的方法一： 画四条线，然后设置线的宽度很宽，组合为一个镂空的正方形。 绘画的方法二： 画两个嵌套的正方形，采用非零环绕填充规则进行颜色的填充。 上面这两种方法肯定是第二种更加优化，不过这第二种需要理解非零环绕填充规则。下面先来演示这两个方法。 这样的确可以绘画，不过如何绘画…

可以从上图看到已经绘画出了两条直线作为平行线。但是有以下两个问题： 从对比边框border的1px来看，直线看上去有2px的宽度。其实这个直线的绘制宽度默认也只有1px，那么怎么会看起来有2px呢？ 直接看上去直线的颜色像是灰色。但是其实默认的颜色是黑色。那么怎么看起来像是灰色…

<canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩…

可以从浏览器可以看到，已经绘制出了一个矩形，但是注意，这个方法是没有独立路径的。 就是绘画的形状不会被其他形状覆盖。下面可以绘制多一个矩形，看看会不会覆盖，如下： 相对于上面没有独立路径的绘制方法，strokeRect(x,y,w,h) 是有独立路径的，每个绘制都是自动带有be…

如果要计算坐标系的原点坐标，首先需要这两个基本要素。 从上面的示意图来看，需要这几个基本参数就可以计算出原点坐标。 那么对于三角形好像就没那么好定位点了，下面来看看理解图。 也就是说还需要定义一个三角形的大小值 arrowSize，通过最远点坐标和arrowSize就可以计算出…

通过这四个基本步骤，就可以绘画出一个完整的网格图了，下面来示例。

Canvas绘制一条线条可以使用strokeStyle方法来绘制线条的颜色。但是却是绘制一条直线的。 下面让我们来换个思路，首先线是由点来组成的，也就是说可以绘画无数个点，每个点设置不同的颜色，最后组合成为一条线，那么就可以绘画出渐变色来。