HTML5画布图片教程

来源：互联网发布：火箭发射器升级数据编辑：程序博客网时间：2024/04/28 05:27

画一幅图像使用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>

0 0