PHP前端开发

使用HTML5 Canvas创建一个图案

百变鹏仔 3个月前 (09-22) #HTML

文章标签创建一个

使用以下方法通过 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(&#39;mycanvas&#39;);                       // Make sure we don&#39;t execute when canvas isn&#39;t supported            if (canvas.getContext){               // use getContext to use the canvas for drawing               var ctx = canvas.getContext(&#39;2d&#39;);                              // create new image object to use as pattern               var img = new Image();               img.src = &#39;images/pattern.jpg&#39;;               img.onload = function(){                  // create pattern                  var ptrn = ctx.createPattern(img,&#39;repeat&#39;);                  ctx.fillStyle = ptrn;                  ctx.fillRect(0,0,150,150);               }            } else {               alert(&#39;You need Safari or Firefox 1.5+ to see this demo.&#39;);            }         }      </script>   </head>   <body id = "test" onload = "drawShape();">      <canvas id = "mycanvas"></canvas>   </body></html>

文章推荐

本站为非盈利性网站,不接受任何赞助和广告。

特别声明：本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。 | 举报邮箱：344225443@qq.com

互联网ICP备案：陕ICP备2023000799号 Copyright 2023-2024 sharedbk.com All rights reserved | (c)2008-2024 共享博客