Ch8 填充样式

createPattern()简介

纹理其实就是图案的重复,填充图案通过createPattern()函数进行初始化。它需要传进两个参数createPattern(img,repeat-style),第一个是Image对象实例,第二个参数是String类型,表示在形状中如何显示repeat图案。可以使用这个函数加载图像或者整个画布作为形状的填充图案。

有以下4种图像填充类型:

  • 平面上重复:repeat;
  • x轴上重复:repeat-x;
  • y轴上重复:repeat-y;
  • 不使用重复:no-repeat;

其实createPattern()的第一个参数还可以传入一个canvas对象或者video对象,这里我们只讲解Image对象,其余的大家自己尝试。

创建并填充图案

首先看一下怎么加载图像:

  1. 创建Image对象
  2. 为Image对象指定图片源

代码如下:

  1. var img =newImage();//创建Image对象
  2. img.src ="8-1.jpg";//为Image对象指定图片源

扩展:HTML中的相对路径

‘./目录或文件名’ 或者 ‘目录或文件名’ 是指当前操作的文件所在目录的路径

‘../目录或文件名’ 是指当前所操作的文件所在目录的上一级目录的路径

之后填充纹理:

  1. var pattern = context.createPattern(img,"repeat");
  2. context.fillStyle = pattern;

我们直接看一段完整的程序,这里我要重复填充这个萌萌的长颈鹿作为纹理。需要注意的是,选择图片时一定要选择那种左右互通,上下互通的图片做为纹理,这样看上去才不会有不自然的短接处。

萌萌的长颈鹿

安利一个网站。这张图取自优美图网,这个网站非常赞,里面的图片非常漂亮而且种类繁多,最重要的是它是免费的!!!我从初中开始就一直使用这个网站来找素材。并且最近又推出了APP,有Android和iOS端,推荐大家下载使用。(这是个秘密,我一般不告诉别人的。)

下面提供代码。

  1. <!DOCTYPE html>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>填充纹理</title>
  6. </head>
  7. <body>
  8. <divid="canvas-warp">
  9. <canvasid="canvas"style="border:1px solid #aaaaaa; display: block; margin: 50px auto;">
  10. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  11. </canvas>
  12. </div>
  13. <script>
  14. window.onload =function(){
  15. var canvas = document.getElementById("canvas");
  16. canvas.width =800;
  17. canvas.height =600;
  18. var context = canvas.getContext("2d");
  19. var img =newImage();
  20. img.src ="8-1.jpg";
  21. img.onload =function(){
  22. var pattern = context.createPattern(img,"repeat");
  23. context.fillStyle = pattern;
  24. context.fillRect(0,0,800,600);
  25. }
  26. }
  27. </script>
  28. </body>
  29. </html>

演示 8-1

运行结果:

很多个萌萌的长颈鹿

这里使用了Imageonload事件,它的作用是对图片进行预加载处理,即在图片加载完成后才立即除非其后function的代码体。这个是必须的,如果不写的话,画布将会显示黑屏。因为没有等待图片加载完成就填充纹理,导致浏览器找不到图片。

这里使用了”repeat”,童鞋们也可尝试使用一下其他三个值,看看会有什么不同的效果。也可以自己找一下其他的图片尝试填充,看看效果。

还有,长颈鹿是不是特别萌?看来我们已经是个艺术家了呢!这节内容很少,我们继续前进!😋