使用HTML5 Canvas创建一个图案

前端开发教程 2025-02-12 0

使用以下方法通过 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(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('mycanvas');
           
            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){
               // use getContext to use the canvas for drawing
               var ctx = canvas.getContext('2d');
               
               // create new image object to use as pattern
               var img = new Image();
               img.src = 'images/pattern.jpg';
               img.onload = function(){
                  // create pattern
                  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>

以上就是使用HTML5 Canvas创建一个图案的详细内容，更多请关注双恒网络其它相关文章！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。