drawImage（）的用法

一、绘制图片

1、用法一：将图片直接定位在画布上

        context.drawImage(img,x,y);
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImage</title>
		<style type="text/css">
			*{
				padding:0;
				margin: 0;
			}
			body{
				text-align: center;
				padding-top: 20px;
			}
			canvas{
				box-shadow: 0 0 10px #333333;
				margin: 0 auto;
			}
		</style>
	</head>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600"></canvas>
		
		<script>
			function draw(){
				var ctx = document.getElementById('canvas');
				
				if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					
					//定义图片
					var img = new Image();
					img.src = 'img/timg.jpg';
					
					//确保图片被加载完成
					img.onload = function() {
						//使用drawImage绘制到画布上面
						ctx.drawImage(this,20,80);
					}
				}else{
					alert('请更新浏览器！！！');
				}
			}
		</script>
	</body>
</html>

2、用法二：定图像的宽度和高度，将图像放大或者缩小

        context.drawImage(img,x,y,width,height);

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImage</title>
		<style type="text/css">
			*{
				padding:0;
				margin: 0;
			}
			body{
				text-align: center;
				padding-top: 20px;
			}
			canvas{
				box-shadow: 0 0 10px #333333;
				margin: 0 auto;
			}
		</style>
	</head>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600"></canvas>
		
		<script>
			function draw(){
				var ctx = document.getElementById('canvas');
				
				if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					
					//定义图片
					var img = new Image();
					img.src = 'img/timg.jpg';
					
					//确保图片被加载完成
					img.onload = function() {
						//使用drawImage绘制到画布上面
						ctx.drawImage(this,50,50,700,500);
					}
				}else{
					alert('请更新浏览器！！！');
				}
			}
		</script>
	</body>
</html>

3、用法三：剪切图像，并在画布上定位被剪切的部分

        context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数描述：
1、img 规定要使用的图片。
2、sx（可选）开始剪切的 x 坐标位置。
3、sy（可选）开始剪切的 y 坐标位置。
4、swidth（可选）被剪切图像的宽度。
5、sheight（可选）被剪切图像的高度。
6、x 在画布上放置图像的 x 坐标位置。
7、y 在画布上放置图像的 y 坐标位置。
8、width（可选）要使用的图像的宽度。（伸展或缩小图像）
9、height （可选）要使用的图像的高度。（伸展或缩小图像）
在这里插入图片描述
裁剪结果如下：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImage</title>
		<style type="text/css">
			*{
				padding:0;
				margin: 0;
			}
			body{
				text-align: center;
				padding-top: 20px;
			}
			canvas{
				box-shadow: 0 0 10px #333333;
				margin: 0 auto;
			}
		</style>
	</head>
	<body onload="draw()">
		<canvas id="canvas" width="800" height="600"></canvas>
		
		<script>
			function draw(){
				var ctx = document.getElementById('canvas');
				
				if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					
					//定义图片
					var img = new Image();
					img.src = 'img/timg.jpg';
					
					//确保图片被加载完成
					img.onload = function() {
						//使用drawImage绘制到画布上面
						ctx.drawImage(this,100,100,100,100,50,50,700,500);
					}
				}else{
					alert('请更新浏览器！！！');
				}
			}
		</script>
	</body>
</html>
# css # html5
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区