```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mycanvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px">
</canvas>
<script>
var mycanvas=document.getElementById("mycanvas");
var cxt=mycanvas.getContext("2d");
// 图片对象
var img=new Image();
img.src="images/topthree1.webp";
// 图片加载完成之后触发的函数
img.onload=function(){
// 绘制图像
// 第一个参数是开始绘制点的x坐标
// 第二个参数是开始绘制点的y坐标
// 第三个参数是绘制的宽度
// 第四个参数是绘制的高度
cxt.drawImage(img,0,0,100,100);
}
</script>
</body>
</html>
