HTML5画布模式教程

最新推荐文章于 2021-06-17 22:17:06 发布

limeiyans

最新推荐文章于 2021-06-17 22:17:06 发布

阅读量664

点赞数

分类专栏： HTML5画布模式教程文章标签： HTML5画布模式教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18450073

版权

HTML5画布模式教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与HTML5画布创建一个模式,我们可以使用createPattern帆布上下文的()方法返回一个模式对象,设置fillStyle属性模式对象,然后使用填补填补形状fill()()。createPattern()方法需要一个图像对象和一个重复选项,可以重复,repeat-x,repeat-y或no-repeat。除非另有规定,违约重复重复选项。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var imageObj = new Image();
      imageObj.onload = function() {
        var pattern = context.createPattern(imageObj, 'repeat');

        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = pattern;
        context.fill();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布模式教程

与HTML5画布创建一个模式,我们可以使用createPattern帆布上下文的()方法返回一个模式对象,设置fillStyle属性模式对象,然后使用填补填补形状fill()()。createPattern()方法需要一个图像对象和一个重复选项,可以重复,repeat-x,repeat-y或no-repeat。除非另有规定,违约重复重复选项。 body {
复制链接

扫一扫

专栏目录