HTML5 Canvas

最新推荐文章于 2025-12-20 10:45:52 发布

转载最新推荐文章于 2025-12-20 10:45:52 发布 · 313 阅读

文章标签：

#html5 #canvas #画布

html5 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个HTML5 Canvas的应用实例，演示了如何在Canvas上显示图像、绘制填充及空心矩形、圆形以及线条，并添加文字说明。通过jQuery简化DOM操作。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#myCanvas {
				background-image: url(img/map.png);
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			var img; //规定要使用的图像、画布或视频。
			var x = 150; //在画布上放置图像的 x 坐标位置。
			var y = 150; //在画布上放置图像的 y 坐标位置。
			var width = 33; //可选。要使用的图像的宽度。（伸展或缩小图像）
			var height = 24; //可选。要使用的图像的高度。（伸展或缩小图像）
			$(function() {
				myCanvas = $('#myCanvas')[0];
				myContext = myCanvas.getContext('2d');
				//添加图片
				img = new Image();
				img.src = 'img/house.png';
				myContext.drawImage(
					img, x, y, width, height
				);
				//画填充长方形
				myContext.fillStyle = "#FF0000"; //填充红色
				myContext.fillRect(200, 220, 30, 20); //意思是：在画布上绘制 30x20 的矩形，从左上角开始 (200,220)。
				//画空心长方形
				myContext.strokeStyle = '#FF0000'
				myContext.lineWidth = 1;
				myContext.strokeRect(200, 250, 30, 20)
				//画圆
				myContext.fillStyle = "#00FF00"; //填充绿色
				myContext.beginPath();
				myContext.arc(300, 250, 20, 0, 2 * Math.PI); //意思是：中心：300*250，半径：20，起始角：0，结束角：2 * Math.PI
				myContext.closePath();
				myContext.stroke(); //画圆边框
				myContext.fill(); //填充圆
				//画线
				myContext.moveTo(10, 10);
				myContext.lineTo(150, 50);
				myContext.lineTo(10, 50);
				myContext.stroke();
				//写字
				myContext.fillStyle = '#000000';
				myContext.font = "16px Arial";
				myContext.fillText("Hello World", 200, 50);
			});
		</script>
	</head>

	<body>
		<canvas id="myCanvas" width="600" height="400">这个浏览器不支持HTML5元素。</canvas>
		<img src="img/house.png" style="display: none;" />
	</body>

</html>