typescript重写canvas --16.利用drawImage绘制图片

1.使用 canvas 利用drawImage绘制图片

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
img标签<br />
<img id="flower" src="flower.jpg" alt="The Flower" width="240" height="240" /><br />
canvas画板<br />
<canvas id="myCanvas" width="500" height="350">
你的浏览器不支持HTML5
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");

var img=document.getElementById("flower");

img.onload = function(){    
   context.drawImage(img,10,10);   
};   

</script>
</body>
</html>

显示效果如下

16.png

2.typescript重写canvas --利用drawImage绘制图片

html文件

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
img标签<br />
<img id="flower" src="flower.jpg" alt="The Flower" width="240" height="240" /><br />
canvas画板<br />
<canvas id="myCanvas" width="500" height="350">
<script src="./js/16.js"></script>
</body>
</html>

ts文件

const canvas=<HTMLCanvasElement>document.getElementById("myCanvas")
const context=canvas.getContext("2d") 
if (context){
const img=<HTMLImageElement>document.getElementById("flower");
 img.onload = function(){    
    context.drawImage(img,10,10);   
 }; 
}

生成的js文件

"use strict";
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
if (context) {
    const img = document.getElementById("flower");
    img.onload = function () {
        context.drawImage(img, 10, 10);
    };
}