使用canvas绘制图像

最新推荐文章于 2025-09-04 16:51:32 发布

转载最新推荐文章于 2025-09-04 16:51:32 发布 · 203 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3759656/blog/2247236

文章标签：

#python

本文介绍如何使用HTML5的Canvas元素和JavaScript进行图像绘制。通过创建图像对象并利用drawImage方法，可以实现在画布上绘制图像、裁剪图像以及进行图像变换等功能。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图像</title>
	<style>
		canvas{
			border:1px solid red;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			// 绘制图像
			// 1.创建图像对象  img节点
			var img = new Image();
			// var img1 = document.createElement('img');
			img.src = '../1.jpg';
			img.onload = function(){
				// 参数：img节点，开始绘制的位置x,y
				context.drawImage(img,0,0);
				// 参数：img节点，开始绘制的位置x,y,宽,高
				// context.drawImage(img,0,0,200,200);
				// 参数：img节点，局部位置x,y,宽,高,目标位置x,y,宽,高
				context.drawImage(img,345,100,100,100,500,0,200,200);
			}

		}
	</script>
</head>
<body>
	<canvas id="canvas" width="700px" height="400px"></canvas>
</body>
</html>

转载于:https://my.oschina.net/u/3759656/blog/2247236