Canvas 纹理 ( Pattern )

纹理即 纹路,每个物体表面上不同的样子,譬如说木头的木纹状

使用过 Photoshop 的人都知道,如果要给一个图形填充一个效果,可以使用纯色填充,也可以使用渐变填充,还有一种填充,就是使用图案填充

我们把填充用到的那一小块图形称之为 纹理

Canvas 中的纹理可以是一张图片,也可以是另一个 Canvas

Canvas 使用 CanvasPattern 表示一个纹理,这个对象没有任何属性,也没有任何方法,唯一创建方法是使用 createPattern()

createPattern()

ctx.createPattern() 方法用于创建一个纹理,可以使用图像或者另一个 Canvas

语法

CanvasPattern ctx.createPattern(image, repetition);

参数说明

  1. image

    作为重复图像源的 CanvasImageSource 对象。可以是下列之一

    HTMLImageElement (<img>),
    HTMLVideoElement (<video>),
    HTMLCanvasElement (<canvas>),
    CanvasRenderingContext2D,
    ImageBitmap,
    ImageData,
    Blob
    
  2. repetition

    指定如何重复图像。允许的值有

    说明
    repeat 水平和垂直都重复,默认
    repeat-x 水平重复
    repeat-y 垂直重复
    no-repeat 不重复

    如果为空字符串 ('') 或 null (但不是 undefined),那么将使用 repeat

纹理的使用方法

  1. 使用 createPattern() 方法创建一个创建一个纹理对象

  2. 然后把渐变对象赋值给 fillStyle 属性

范例

我们使用下面的纹理来填充一个矩形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="200">
</canvas>
<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

var img = new Image();
img.src = '/static/i/canvas/canvas_pattern.png';
img.onload = function() {
  var pattern = ctx.createPattern(img, 'repeat');
  ctx.fillStyle = pattern;
  ctx.fillRect(0,0,300,200);
};
</script>
<br/>
<br/>

运行结果如下



Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.