一聚教程网:一个值得你收藏的教程网站

热门教程

HTML5 Canvas 图案进行填充使用样例

时间:2022-06-25 18:14:57 编辑:袖梨 来源:一聚教程网

说到填充,除了可以使用实色或者部分透明的颜色,还可以使用图案和渐变。本文先介绍如何使用图案填充。

1,图案填充的实现步骤

(1)首先要有个小图片,它要能够前后左右拼接在一起覆盖一块大区域
原文:HTML5 - Canvas的使用样例12(使用图案进行填充)
(2)把这张图片加载到图片对象中。可以在页面中放一个隐藏的元素,或者使用代码将外部图片加载进来,让后处理图片对象的onLoad事件。
(3)有了图片对象,使用 createPattern() 方法创建一个图案对象。可以设置如下重复方向:
          repeat-x:水平重复
          repeat-y:垂直重复
          repeat:两个方向都重复
(4)最后使用图案对象设置 fillStyle 或者 strokeStyle 属性。

2,样例演示


var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
var img = document.getElementById("brickTile");
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.rect(0, 0, canvas.width, canvas.height);
context.fill();

热门栏目