17.JS | canvas 画笔讲谈 +纹理

"它画笔的名堂呢，称之为九天十地，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是个很好用的的属性。神奇的纹理图片及代码如下：

one图片

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