Question

我想在一张顶部和底部带有动态文字的图片中绘制这样的画布图形：http://www.circlesagility.com/images/Agility%20Logo.gif

＆＃13;

<!DOCTYPE html>
<html>

<body>

  <p>Image to use:</p>
  <img id="scream" width="220" height="220" style="border-radius: 50%;" src="//www.circlesagility.com/images/Agility%20Logo.gif" alt="The Scream">

  <p>Canvas:</p>
  <!--<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">-->
  <canvas id="myCanvas" width="320" height="320" style="border-radius: 50%;border:1px solid #d3d3d3;"></canvas Your browser does not support the HTML5 canvas tag. </canvas>

  <script>
    window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("scream");
      ctx.drawImage(img, 0, 0);
      ctx.font = "24px Calibri";
      ctx.fillStyle = "yellow";
      ctx.fillText("My Text", 100, 100);
    }
  </script>

</body>

</html>

＆＃13;

如何在html5画布中使用文本修改图像

0 个答案: