<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
background: #272822;
}
</style>
</head>
<body>
<img src="https://www.qiquanji.com/data/img/dmj/201903151552614460179778.jpg" id="yt03" />
<br />
<canvas id="canvas" width="1000" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var cv = canvas.getContext('2d');
// 获得图片
var yt03 = document.getElementById("yt03");
// 等yt03图片加载完毕后事件(要等加载完后，要不然不显示)
yt03.onload = function(){
// 将图像写入画板中 100是距离左边是100 ，距离上面是50
// cv.drawImage(yt03,100,50);
// 将图像写入画板中 100是距离左边是100 ，距离上面是50,300是指定图片大小的宽度，200是指定图片大小的高度
// cv.drawImage(yt03,100,50,300,200);
// 50是裁切图片的图片左边50开始,上边的50开始,200是载图片区域宽,高200
cv.drawImage(yt03,50,50,200,200,100,50,300,200);
}
// 将图像写入画板中
// cv.drawImage(yt03,100,50);
</script>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7496.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知