zoukankan      html  css  js  c++  java
  • Canvas patterns 【每日一段代码24】

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>createPatterns</title>
    <script type="text/javascript">
    function draw() {
    var cxt = document.getElementById("myCanvas").getContext("2d");
    //创建新的图像对象作为图案
    var img = new Image();
    img.src = "C:/Users/Administrator/Desktop/11.jpg";
    img.onload = function(){
    //创建图案
    var ptrn = cxt.createPattern(img,'repeat');
    cxt.fillStyle = ptrn;
    cxt.fillRect(0,0,460,478);
    }
    }
    </script>
    </head>
    <body onLoad="draw()" style="text-align:center;">
    <canvas id="myCanvas" width="460" height="478" style="border:2px solid #06f;"></canvas>
    </body>
    </html>

    显示效果如下:

    【图案 Patterns 方法。createPattern(image,type) 该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。图案的应用跟渐变很类似的,创建出一个 pattern 之后,赋给 fillStyle 或 strokeStyle 属性即可。注意:与 drawImage 有点不同,你需要确认 image 对象已经装载完毕,否则图案可能效果不对的。实例中创建一个图案然后赋给了 fillStyle 属性。值得一提的是,使用 Image 对象的 onload handler 来确保设置图案之前图像已经装载完毕。】

  • 相关阅读:
    Beta 冲刺(5/7)
    Beta 冲刺(4/7)
    Beta 冲刺(3/7)
    Beta 冲刺(2/7)
    Beta 冲刺(1/7)
    福大软工 · 第十次作业
    PTA-B 1039 到底买不买 解题思路记录
    SDN负载均衡
    团队作业——项目验收与总结博客
    个人作业——软件工程实践总结作业
  • 原文地址:https://www.cnblogs.com/naokr/p/2360587.html
Copyright © 2011-2022 走看看