HTML5 Canvas模式-之路教程

HTML5 Canvas模式语法：

var patt = context.createPattern(imageObj, repeatOption);
context.fillStyle = patt;
context.fill();

HTML5 Canvas模式

HTML5 Canvas模式示例

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

      #myCanvas {

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function () {

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

 

            var imageObj = new Image();

            imageObj.onload = function () {

                var patt = context.createPattern(imageObj, "repeat");

                context.rect(15, 15, canvas.width - 20, canvas.height - 20);

                context.fillStyle = patt;

                context.fill();

            };

            imageObj.src="pattern.jpg";

        };

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

HTML5 画布模式

在 HTML5 中创建模式使用画布上下文的 createPattern() 方法，然后我们可以使用 fillStyle 属性设置它的样式，并使用 fill() 方法填充它的形状。而 createPattern() 方法需要图像对象和重复选项，这些重复是repeat-x, repeat-y, 或者 no-repeat。重复选项默认为repeat。

日期：2020-04-11 23:04:09 来源：oir作者：oir

←html5 canvas路径

HTML5 Canvas径向渐变→

HTML5 Canvas模式语法：

HTML5 Canvas模式示例

HTML5 画布模式

目录