HTML5画布图片教程

最新推荐文章于 2022-12-02 10:35:41 发布

limeiyans

最新推荐文章于 2022-12-02 10:35:41 发布

阅读量815

点赞数

分类专栏： HTML5画布图片教程文章标签： HTML5画布图片教程

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

版权

HTML5画布图片教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

画一幅图像使用HTML5画布,我们可以使用drawImage()方法需要一个图像对象和一个目标点。目标点定义了图像的左上角相对于画布的左上角。

自从drawImage()方法需要一个图片对象,我们必须首先创建一个图像,等待它加载在实例化之前drawImage()。为此,我们可以使用图像的onload属性对象。

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

      imageObj.onload = function() {
        context.drawImage(imageObj, 69, 50);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
0

收藏

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

画一幅图像使用HTML5画布,我们可以使用drawImage()方法需要一个图像对象和一个目标点。目标点定义了图像的左上角相对于画布的左上角。自从drawImage()方法需要一个图片对象,我们必须首先创建一个图像,等待它加载在实例化之前drawImage()。为此,我们可以使用图像的onload属性对象。 body { margin: 0px
复制链接

扫一扫

专栏目录