把图片导入到canvas

最新推荐文章于 2024-04-05 00:50:04 发布

sdfujichao

最新推荐文章于 2024-04-05 00:50:04 发布

阅读量2.2k

点赞数

分类专栏： html5—canvas 文章标签： canvas

本文链接：https://blog.csdn.net/sdfujichao/article/details/51863850

版权

html5—canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

把图片导入到canvas中，可以吧图片当做绘制图形的边框背景，也可以直接加载，注意点是进行的操作要在noload方法总进行，同时对她进行的变形操作都要在哪个方法外面进行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#myCanvas{border: 1px solid black;}
		</style>
	</head>
	<body>
		<canvas width="1000px" height="600px" id="myCanvas"></canvas>
	</body>
	<script type="text/javascript">
		var oContent = document.getElementById("myCanvas").getContext('2d');
		var img = new Image();
		img.src = 'img/charector.png';
		img.onload = function(){
			var bg = oContent.createPattern(img,'no-repeat');
			
			// 做背景图片
				oContent.fillStyle = bg;
				
				oContent.fillRect(0, 0, 300, 200);
				
				
				alert('fuji')
// 				// 用边框显示图片
//				oContent.strokeStyle = bg;
//				oContent.lineWidth = 50;
//				oContent.strokeRect(0,0,500,200)

				//oContent.drawImage(img,0,0,300,200);
		}
		
		// 添加背景图片的图形不能再那个函数中进行变形
		oContent.translate(200,200)
	</script>
</html>