html [html5]画布图片绘制样本

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html [html5]画布图片绘制样本相关的知识，希望对你有一定的参考价值。


<!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() {
          // draw cropped image
          var sourceX = 200;
          var sourceY = 0;
          var sourceWidth = 150;
          var sourceHeight = 150;
          var destWidth = sourceWidth;
          var destHeight = sourceHeight;
          var destX = canvas.width / 2 - destWidth / 2;
          var destY = canvas.height / 2 - destHeight / 2;

          context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        };
        imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="150" height="150"></canvas>
  </body>
</html>

以上是关于html [html5]画布图片绘制样本的主要内容，如果未能解决你的问题，请参考以下文章

如何使用javascript HTML5画布通过N个点绘制平滑曲线？

在 HTML5 画布上绘制一个点 [重复]

在 HTML5 画布上绘制旋转文本

如何使用html5画布元素绘制透明图像

HTML5 响应式画布：调整浏览器画布绘制的大小消失

我们如何在 html5 画布上绘制调整大小的图像？