078_html5Canvas

最新推荐文章于 2025-02-17 17:17:17 发布

原创最新推荐文章于 2025-02-17 17:17:17 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #web前端

html学习专栏收录该内容

89 篇文章

订阅专栏

本文介绍HTML5 Canvas的基本概念及其使用方法，包括如何利用JavaScript在Canvas中绘制矩形、线条、圆形、渐变效果及图片。文章还详细解释了Canvas的坐标系统及其关键属性。

1. canvas元素用于在网页上绘制图形。

2. 什么是Canvas?

2.1. html5的canvas元素使用JavaScript在网页上绘制图像。

2.2. 画布是一个矩形区域, 您可以控制其每一像素。

2.3. canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3. Canvas对象的属性

3.1. height属性: 画布的高度。和一幅图像一样, 这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候, 在该画布上已经完成的任何绘图都会擦除掉。默认值是150px。

3.2. width属性: 画布的宽度。和一幅图像一样, 这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候, 在该画布上已经完成的任何绘图都会擦除掉。默认值是300px。

4. 创建Canvas元素

4.1. 向html5页面添加canvas元素。

4.2. 规定元素的id、宽度和高度:

<canvas id="myCanvas" width="200px" height="100px"></canvas>

5. 通过JavaScript来绘制

5.1. canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成:

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
</script>

5.2. JavaScript使用id来寻找canvas元素:

var c=document.getElementById("myCanvas");

5.3. 然后, 创建 CanvasRenderingContext2D对象:

var cxt=c.getContext("2d");

5.3.1. getContext("2d")对象是内建的html5对象, 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

5.4. 下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

5.5. fillStyle方法将其染成红色, fillRect方法规定了形状、位置和尺寸。

6. 理解坐标

6.1. 上面的fillRect方法拥有参数(0,0,150,75)。

6.2. 意思是: 在画布上绘制150x75的矩形, 从左上角开始(0,0)。

6.3. 如下图所示, 画布的X和Y坐标用于在画布上对绘画进行定位。

7.Canvas画矩形

7.1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>矩形</title>
	</head>
	<body>
		<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

		<script type="text/javascript">
			var canvas=document.getElementById('myCanvas');
			var ctx=canvas.getContext('2d');
			ctx.fillStyle='#FF0000';
			ctx.fillRect(0,0,180,100);
		</script>
	</body>
</html>

7.2.效果图

8.Canvas画线条

8.1.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>线条</title>
	</head>
	<body>
		<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
			Your browser does not support the canvas element.
		</canvas>

		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.moveTo(10,10);
			cxt.lineTo(150,50);
			cxt.lineTo(10,50);
			cxt.stroke();
		</script>
	</body>
</html>

8.2.效果图

9. Canvas画圆形

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>圆形</title>
	</head>
	<body>
		<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
			Your browser does not support the canvas element.
		</canvas>

		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			cxt.fillStyle="#FF0000";
			cxt.beginPath();
			cxt.arc(70,18,15,0,Math.PI*2,true);
			cxt.closePath();
			cxt.fill();
		</script>
	</body>
</html>

9.2. 效果图

10. Canvas画渐变

10.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>渐变</title>
	</head>
	<body>
		<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
			Your browser does not support the canvas element.
		</canvas>


		<script type="text/javascript">
			var c=document.getElementById("myCanvas");
			var cxt=c.getContext("2d");
			var grd=cxt.createLinearGradient(0,0,200,100);
			grd.addColorStop(0,"#FF0000");
			grd.addColorStop(1,"#0000FF");
			cxt.fillStyle=grd;
			cxt.fillRect(0,0,200,100);
		</script>
	</body>
</html>

10.2.效果图

11. Canvas画图片

11.1. 画图片有两个API

drawImage(image, x, y, imgWidth, imgHeight)
drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)

11.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片</title>
	</head>
	<body>
		原图: 宽: 140px, 高:122px<img src="button.png" /><br /><br />

		<canvas id="myCanvas" width="600px" height="600px" style="border:1px solid #c3c3c3;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('myCanvas');
			var ctx = canvas.getContext('2d');
			var img = new Image();
			img.src = 'button.png';
			// 图片异步加载, onload回调函数当图片加载完成时执行。
			img.onload = function(){
				// drawImage(image, x, y, imgWidth, imgHeight)
				ctx.drawImage(img, 0, 0);
				ctx.drawImage(img, 200, 0);
				
				ctx.drawImage(img, 0, 200, 140, 122);
				ctx.drawImage(img, 200, 200, 140, 61);
				ctx.drawImage(img, 400, 200, 70, 122);


				// drawImage(image, imgX, imgY, imgWidth, imgHeight, destX, destY, destWidth, destHeight)
				ctx.drawImage(img, 0, 0, 140, 122, 0, 400, 140, 122);
				ctx.drawImage(img, 0, 0, 140, 61, 200, 400, 140, 61);
				ctx.drawImage(img, 0, 61, 140, 61, 400, 400, 140, 61);
			};
		</script>
	</body>
</html>

11.3. 效果图