› 首页 ›期权学习›期权知识›正文

HTML5 canvas写入图像

xiaojiucai 期权知识 2020-08-18 624 0

<!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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。