"它画笔的名堂呢，称之为九天十地，web点头啪啪，霹雳金光雷电掌！一笔画出，方圆百里之内，不论颜色，状态，纹理，全部都手到擒来！"
——题记，改自《鹿鼎记》
正文
“别看我只是支画笔，我有雄心志气高”，今天便来讲讲canvas的画笔。之前做H5 canvas绘画时，思考如何让画出来的线条有纹理，翻找半天找不出个所以然，机缘巧合得知有个createPattern属性，嘿，成了，效果图如下。索性总结下画笔的属性，列个大概。
代码前提
先写个代码前提：
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas属性（部分）
strokestyle
描述画笔（绘制图形）颜色或者样式的属性。默认值是 #000(black)。
eg.ctx.strokeStyle = "blue";lineWidth
描述线段宽度的数字。 0、 负数、 Infinity
和 NaN
会被忽略。
eg:ctx.lineWidth = 15;lineJoin
此属性有3个值： round, bevel 及 miter。默认值是 miter。也就是说在相连部分的末端填充的区域分别为扇形，切断，三角形，如下图。
注意：如果2个相连部分在同一方向，那么lineJoin不会产生任何效果，因为在那种情况下不会出现连接区域。
-
lineCap
指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt（矩形）, round （圆形）， square （矩形）。默认值是 butt。
-
shadowBlur
设置模糊阴影，默认值是 0。 负数、 Infinity
或者 NaN
都会被忽略。注意：只有设置shadowColor属性值为不透明，阴影才会被绘制。
eg.ctx.shadowBlur = 10
-
shadowColor
设置阴影的颜色。 注意：shadowColor属性设置成不透明的，并且 shadowBlur
、 shadowOffsetX
或者 shadowOffsetY
属性不为0，阴影才会被绘制。
eg.ctx.shadowColor = "black"
-
shadowOffsetX
设置阴影的水平偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。
eg.ctx.shadowOffsetX = 10;
图例 shadowOffsetY
设置阴影的垂直偏移量。注意：将shadowColor属性设置成不透明，阴影才会被绘制。
eg.ctx.shadowOffsetY = 10;
-
createPattern
创建一个指定图像和重复的CanvasPattern
对象
语法：ctx.createPattern(image, repetition);
参数：repetition
指定如何重复图像。允许的值有："repeat"(both directions), "repeat-x"(horizontal only), "repeat-y" (vertical only), or "no-repeat"(neither).
如果为空字符串 ('') 或 null (但不是 undefined )，repetition将被当作"repeat"。
eg.
var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0,0,400,400);
};
-
lineDashOffset
使用 lineDashOffset属性绘制虚线。需要设置setLineDash。
eg.
ctx.setLineDash([4, 16]);
ctx.lineDashOffset = 2;
setLineDash
绘制一条线段，相当于描述线段的疏密度。
语法ctx.setLineDash(segments);
参数 segments：一个 Array 数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 如果数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25]会变成 [5, 15, 25, 5, 15, 25]。例子如上图。globalAlpha
设置图形和图片透明度的属性。 数值的范围从 0.0 （完全透明）到1.0（完全不透明）。
eg.
ctx.globalAlpha = 0.5;
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
拣了部分属性来说，前几个属性一般的H5都能满足。再来讲讲刚开始的效果图，主要在于createPattern和shadow属性，发现createPattern是个很好用的的属性。神奇的纹理图片及代码如下：
var _img1 = document.getElementById('one');
ctx.shadowColor = "#f3d02a";
ctx.lineJoin = 'bevel';
ctx.lineCap = 'butt';
ctx.lineWidth = 16;
ctx.globalAlpha = 0.9;
ctx.shadowOffsetX = 8;
ctx.shadowOffsetY = 1;
ctx.strokeStyle = ctx.createPattern(_img, 'repeat');
“别看我只是支画笔，我有雄心志气高”，暂此，敬请交流~~
参考文章：
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/canvas
