読者です 読者をやめる 読者になる 読者になる

CanvasのfillStyleにcanvas/SVGを指定する

JavaScript SVG

チラシの裏

canvasのfillStyleにcreatePatternを使って生成したCanvasPatternオブジェクトを指定する場合、createPatternにはcanvasSVGを指定できるのか試してみた。

canvasChrome安定版やFirefox4.0だけでなく、iPhone4やAndroid端末(SC-02B)でも表示された。

<html>
<script type="text/javascript">
function draw() {
  var pattern = document.getElementById("pattern");
  pctx = pattern.getContext("2d");
  pctx.rect(10, 10, 40, 40);
  pctx.fillStyle = "red";
  pctx.fill();

  var ctxt = document.getElementById("stage").getContext("2d");
  ctxt.fillStyle = ctxt.createPattern(pattern, "repeat");
  ctxt.rect(0, 0, 450, 450);
  ctxt.fill();
}
</script>
<body onload="draw();">
<div id="container">
  <canvas id="stage" width="450" height="450"></canvas>
  <canvas id="pattern" width="30" height="30" style="display:none;"></canvas>
</div>
</body>
</html

SVGを指定するパターンはSafariやiPhone4, SC-02Bでは表示できない。

<html>
<script type="text/javascript">
function draw() {
  var img = document.createElement("img");
  img.onload = function() {
    var ctxt = document.getElementById("stage").getContext("2d");
    var pattern = ctxt.createPattern(img, "repeat");
    ctxt.fillStyle = pattern;
    ctxt.rect(0, 0, 450, 450);
    ctxt.fill();
  };
  img.src = "kame.svg";
}
</script>
<body onload="draw();">
<div id="container">
  <canvas id="stage" width="450" height="450"></canvas>
</div>
</body>
</html>

まあ、あんまりこういうことはやらないよね。