HTML5 Canvas

最新推荐文章于 2024-07-19 23:42:48 发布

曹振华

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量256

点赞数

分类专栏： html5 文章标签： html5 canvas 画布

html5 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!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>

曹振华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas

#myCanvas { background-image: url(img/map.png); } var img; //规定要使用的图像、画布或视频。 var x = 150; //在画布上放置图像的 x 坐标位置。 var y = 150; //在画布上放置图像的 y 坐标位置。 var width = 33; //可选。要使用的图像的宽
复制链接

扫一扫