最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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();
相关文章
- 《侠客风云传》貔貅拳套获取方式 怎么获得吸蓝拳套 08-08
- 黑曜石《宣誓》采用非线性叙事：把选择权交给玩家！ 08-08
- 无限暖暖满电行动任务攻略-无限暖暖满电行动任务怎么做 08-08
- 无限暖暖植物在哪采集-无限暖暖植物采集地点汇总 08-08
- 魔兽世界法力陵墓如何去-魔兽世界法力陵墓进去方法攻略 08-08
- 无尽梦回荆棘之梦怎么样-无尽梦回荆棘之梦优势详解 08-08