HTML5 canvas写入图像

时间：5年前阅读：5264

<!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,我们将及时处理。

微信扫码关注

更新实时通知

HTML5 canvas写入图像

网友评论