新手入门:canvas的drawImage()在画布上绘制图片详解

drawImage()的用法

  • 一、绘制图片
    • 1、用法一:将图片直接定位在画布上
    • 2、用法二:定图像的宽度和高度,将图像放大或者缩小
    • 3、用法三:剪切图像,并在画布上定位被剪切的部分

一、绘制图片

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

        context.drawImage(img,x,y);
新手入门:canvas的drawImage()在画布上绘制图片详解_第1张图片


<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImagetitle>
		<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);

新手入门:canvas的drawImage()在画布上绘制图片详解_第2张图片


<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImagetitle>
		<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 (可选)要使用的图像的高度。(伸展或缩小图像)
新手入门:canvas的drawImage()在画布上绘制图片详解_第3张图片
裁剪结果如下:
新手入门:canvas的drawImage()在画布上绘制图片详解_第4张图片


<html>
	<head>
		<meta charset="UTF-8">
		<title>practice9-DrawImagetitle>
		<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>

你可能感兴趣的:(HTML+CSS基础知识,前端javascript,css,js,canvas,html5)