使用HTML5画布创建图案

使用以下方法来使用HTML5 Canvas创建模式：createPattern(image,repetition)-此方法将使用图像来创建模式。第二个参数可以是具有以下值之一的字符串：repeat，repeat-x，repeat-y和no-repeat。如果指定了空字符串或null，则假定重复。

示例

您可以尝试运行以下代码以了解如何创建模式-

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #test {
            width:100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      <script>
         function drawShape(){
            //使用DOM获取canvas元素
            var canvas = document.getElementById('mycanvas');
           
            //确保不支持画布时不执行
            if (canvas.getContext){
               //使用getContext使用画布进行绘制
               var ctx = canvas.getContext('2d');
               
               //创建新的图像对象以用作图案
               var img = new Image();
               img.src = 'images/pattern.jpg';
               img.onload = function(){
                  //创建模式
                  var ptrn = ctx.createPattern(img,'repeat');
                  ctx.fillStyle = ptrn;
                  ctx.fillRect(0,0,150,150);
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
</html>

基础教程