html5 CanvasPattern对象用法详解-守望者-AIR技术交流

破晓发表于 2016-7-22 18:28:42

html5 CanvasPattern对象用法详解

<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">注意：本文属于《<a href="http://www.365mini.com/page/html5-canvas.htm" title="html5 Canvas绘制图形入门详解" style="color: rgb(102, 0, 153); text-decoration: none;">html5 Canvas绘制图形入门详解</a>》系列文章中的一部分。如果你是html5初学者，仅仅阅读本文，可能无法较深入的理解Canvas，甚至无法顺畅地通读本文。请点击上述链接以了解使用HTML5 Canvas绘制图形的完整内容。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"><code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasPattern</code>对象是HTML5 Canvas API中用于给指定的图形铺上指定的图像的关键对象，这与CSS中<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">background</code>属性的作用有点类似。CanvasPattern 对象就表示平铺图像所采用的模式(在指定的图形上以何种方式进行平铺)。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"><code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasPattern</code>对象的用法非常简单。我们只需要使用<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象的 createPattern() 方法创建一个新的 CanvasPattern 对象，并将该对象设为<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">strokeStyle</code>或<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">fillStyle</code>属性值即可。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">下面，我们就来详细了解一下<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasRenderingContext2D</code>对象的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">createPattern()</code>方法。<pre class="q" style="margin-top: 10px; margin-bottom: 5px; padding: 10px; border: 1px dotted rgb(119, 136, 85); outline: 0px; font-size: 13px; vertical-align: baseline; word-break: break-all; overflow: auto; color: rgb(51, 51, 51); line-height: 19.5px; background: none 0px 0px repeat scroll rgb(245, 245, 245);">createPattern(image, repetitionStyle)</pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;"><code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">createPattern()</code>方法用于创建一个表示将图像在当前图形上以什么样的方式进行重复平铺的<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasPattern</code>对象。参数<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">image</code>指定用于平铺的图像，该参数可以是一个<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">Image</code>对象，也可以是一个<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">Canvas</code>对象。参数<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">repetitionStyle</code>表示图像如何进行重复平铺，可能的值有<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">repeat</code>(在水平和垂直方向上均进行重复平铺，这也是默认值)、<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">repeat-x</code>(只在水平方向上重复平铺)、<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">repeat-y</code>(只在垂直方向上重复平铺)、<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">no-repeat</code>(只铺一次，不进行重复平铺)。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">下面，我们就来看一个具体的例子。我们将如下图所示的图像(宽度和高度均为20px)，在canvas指定的矩形区域中进行不同方式的平铺，并查看对应的图形效果。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">用于平铺的图片:<a class="fancybox" rel="gallery" href="http://www.365mini.com/static/upload/image/info.png" title="用于平铺的图片" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://www.365mini.com/static/upload/image/info.png" data-original="/static/upload/image/info.png" class="lazy" width="20" height="20" alt="用于平铺的图片" title="用于平铺的图片" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>(注意：原图片已丢失，此处放置的是一个类似的图片，只是颜色略有差异)。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><!DOCTYPE html> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><html> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><head> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><meta charset="UTF-8"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><title>HTML5 CanvasPattern实现图像平铺的入门示例</title> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></head> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><body> </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"> </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">您的浏览器不支持canvas标签。 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></canvas> </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"> </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"><script type="text/javascript"> </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//获取Canvas对象(画布) </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">var canvas = document.getElementById("myCanvas"); </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">if(canvas.getContext){   </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    var ctx = canvas.getContext("2d");   </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //创建一个表示图片的Image对象 </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    var img = new Image(); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //指定图片的URL </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    img.src = "http://www.365mini.com/static/upload/image/info.png"; </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //当图片加载完毕后再设置对应的图像平铺模式并填充矩形 </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    img.onload = function(){ </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        //创建CanvasPattern对象，指定上述图片进行水平和垂直方向的重复平铺 </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">        var pattern = ctx.createPattern(img, "repeat"); </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        ctx.fillStyle = pattern; </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">        //从坐标点(0,0)开始，绘制并填充宽度为200px、高度为100px的矩形 </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        ctx.fillRect(0, 0, 200, 100);       </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    } </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">} </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></script> </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);"></body> </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></html></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">对应的显示效果如下：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvaspattern-demo-1" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 432px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-1.png" title="repeat:水平方向和垂直方向均重复平铺" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-1.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-1.png" class="lazy" width="422" height="315" alt="repeat:水平方向和垂直方向均重复平铺" title="repeat:水平方向和垂直方向均重复平铺" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>repeat:水平方向和垂直方向均重复平铺<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">值得注意的是，如上述代码所示，如果<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">createPattern()</code>方法的image参数值不是当前页面一个已经存在的Image对象或Canvas对象，那么我们需要等待浏览器将图片加载完毕后才能调用<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">createPattern()</code>方法及后续操作，否则将无法正确显示对应的图形。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">接着，我们将<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">createPattern()</code>方法的第2个参数<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">repetitionStyle</code>改为其他可能的值并分别查看对应的图形效果。<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 431px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-2.png" title="repeat-x:只在水平方向上重复平铺" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-2.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-2.png" class="lazy" width="421" height="311" alt="repeat-x:只在水平方向上重复平铺" title="repeat-x:只在水平方向上重复平铺" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>repeat-x:只在水平方向上重复平铺<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 435px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-3.png" title="repeat-y:只在垂直方向上重复平铺" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-3.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-3.png" class="lazy" width="425" height="314" alt="repeat-y:只在垂直方向上重复平铺" title="repeat-y:只在垂直方向上重复平铺" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>repeat-y:只在垂直方向上重复平铺<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 427px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-4.png" title="no-repeat:不进行重复平铺" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-4.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-4.png" class="lazy" width="417" height="313" alt="no-repeat:不进行重复平铺" title="no-repeat:不进行重复平铺" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>no-repeat:不进行重复平铺<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">此外，有一点尤为需要注意，<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasPattern</code>对象开始平铺图像的参考起点并不是我们当前绘制图形的左上角，而是整个canvas画布的左上角，确切地说，即canvas的起点坐标<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">(0,0)</code>。在上面的例子中，我们的矩形的起始坐标点也是<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">(0,0)</code>，所以看不出有什么区别。现在，我们将矩形的起始坐标点改为<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">(10,10)</code>，我们再来看看绘制的图形效果。<pre class="prettyprint linenums" style="margin-bottom: 20px; padding: 10px; border: 1px solid rgb(153, 153, 153); outline: 0px; font-size: 12px; vertical-align: baseline; word-break: break-all; overflow: auto; position: relative; color: rgb(51, 51, 51); font-stretch: normal; line-height: 1.5; font-family: "Courier New", Consola, SimSun; border-radius: 8px; box-shadow: rgb(153, 153, 153) 0px 2px 4px; background: rgb(247, 247, 247);"><ol class="linenums" style="margin-right: 2.2em; margin-left: 2.2em; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"><script type="text/javascript"> </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//获取Canvas对象(画布) </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">var canvas = document.getElementById("myCanvas"); </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">if(canvas.getContext){ </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //获取对应的CanvasRenderingContext2D对象(画笔) </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    var ctx = canvas.getContext("2d"); </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //创建一个表示图片的Image对象 </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    var img = new Image(); </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //指定图片的URL </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    img.src = "http://www.365mini.com/static/upload/image/info.png"; </li><li class="L1" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">    //当图片加载完毕后再设置对应的图像平铺模式并填充矩形 </li><li class="L2" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    img.onload = function(){ </li><li class="L3" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        //创建CanvasPattern对象，指定上述图片进行水平和垂直方向的重复平铺 </li><li class="L4" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">        var pattern = ctx.createPattern(img, "repeat"); </li><li class="L5" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        ctx.fillStyle = pattern; </li><li class="L6" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">        //从坐标点(10,10)开始，绘制并填充宽度为200px、高度为100px的矩形 </li><li class="L7" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">        ctx.fillRect(10, 10, 200, 100); </li><li class="L8" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;">    } </li><li class="L9" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: rgb(238, 238, 238);">} </li><li class="L0" style="margin-left: 0px; border: 0px; outline: 0px; vertical-align: baseline; background: transparent;"></script></li></ol></pre><p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">对应的显示效果如下：<a class="run" href="http://www.365mini.com/diy.php?f=html5-canvaspattern-demo-2" target="_blank" title="运行代码" style="color: rgb(255, 255, 255); text-decoration: none; border-radius: 5px; box-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px; cursor: pointer; display: inline-block; font-size: 12px; text-align: center; vertical-align: middle; white-space: nowrap; border: 1px solid rgb(4, 91, 178); padding: 0.3em 0.8em !important; background: rgb(14, 120, 231) !important;">运行代码</a><p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 432px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-5.png" title="矩形起点坐标更改后的图像平铺效果" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-5.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-5.png" class="lazy" width="422" height="311" alt="矩形起点坐标更改后的图像平铺效果" title="矩形起点坐标更改后的图像平铺效果" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>矩形起点坐标更改后的图像平铺效果<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">在上面的示例代码中，我们用于平铺的图像没有变、矩形的大小也没有，仅仅只更改了矩形的起点坐标，就出现了上述不同的效果。这就是因为<code style="margin-right: 3px; margin-left: 3px; padding: 1px 4px; border: 1px solid rgb(225, 225, 232); outline: 0px; vertical-align: baseline; font-family: Consolas, Monaco, Menlo, 宋体; color: rgb(221, 17, 68); border-radius: 3px; background: rgb(247, 247, 249);">CanvasPattern</code>对象平铺图像的参考起点坐标就是canvas画布的起点坐标。<p style="margin-top: 1.2em; margin-bottom: 1.3em; border: 0px; outline: 0px; font-size: 13px; vertical-align: baseline; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: transparent;">你可以这样理解，我们的图像就是直接平铺在canvas上的，只是默认情况下，这些图像都不可见。当我们绘制图形时，该图形所在区域的图像才会显示出来。你可以参考下面几个例子，以帮助理解。<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 452px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-6.png" title="更改矩形起点为(20,20)，repeat" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-6.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-6.png" class="lazy" width="442" height="320" alt="更改矩形起点为(20,20)，repeat" title="更改矩形起点为(20,20)，repeat" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>更改矩形起点为(20,20)，repeat<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 430px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-7.png" title="更改矩形起点为(30,30)，repeat-x" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-7.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-7.png" class="lazy" width="420" height="313" alt="更改矩形起点为(30,30)，repeat-x" title="更改矩形起点为(30,30)，repeat-x" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>更改矩形起点为(30,30)，repeat-x<p class="img-box" style="margin-top: 1.2em; margin-bottom: 1.3em; padding-top: 5px; border: 1px solid rgb(204, 204, 204); outline: 0px; font-size: 13px; vertical-align: baseline; text-align: center; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; width: 430px; background: transparent;"><a class="fancybox" rel="gallery" href="http://codeplayer.qiniudn.com/canvas-pattern-8.png" title="绘制一个等边直角三角形，repeat" style="color: rgb(102, 0, 153); text-decoration: none; background: none !important;"><img src="http://codeplayer.qiniudn.com/canvas-pattern-8.png" data-original="http://codeplayer.qiniudn.com/canvas-pattern-8.png" class="lazy" width="420" height="316" alt="绘制一个等边直角三角形，repeat" title="绘制一个等边直角三角形，repeat" _show_text="true" style="border-width: 0px; border-style: initial; outline: 0px; vertical-align: baseline; max-width: 100%; height: auto; overflow: hidden; display: inline; background: transparent;"></a>绘制一个等边直角三角形，repeat<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">注意：到目前为止，FireFox浏览器对该对象的支持存在bug，你所期望的效果可能和实际显示效果不一致。<p class="note" style="margin-top: 1.2em; margin-bottom: 5px; padding: 10px; border: 1px solid rgb(230, 219, 85); outline: 0px; font-size: 13px; vertical-align: baseline; border-radius: 3px; color: rgb(51, 51, 51); font-family: "Courier New", 宋体, "Times New Roman", serif; line-height: 19.5px; background: none 0px 0px repeat scroll rgb(255, 255, 224);">本文来自：http://www.365mini.com/page/html5-canvaspattern.htm

页: [1]

守望者--AIR技术交流's Archiver

html5 CanvasPattern对象用法详解