JS | canvas 画笔讲谈 + 纹理

7 篇文章 0 订阅
5 篇文章 0 订阅

"它画笔的名堂呢,称之为九天十地,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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值