canvas绘画实例

最新推荐文章于 2024-05-27 21:50:54 发布

幺妹儿儿

最新推荐文章于 2024-05-27 21:50:54 发布

阅读量476

点赞数

分类专栏：前端文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_52237591/article/details/123558478

版权

前端专栏收录该内容

2 篇文章 2 订阅

订阅专栏

（一）光束

效果如下：

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas</title>
		<style type="text/css">
			body {
				background-color: antiquewhite;
			}

			#canvas {
				background-color: bisque;
				margin-top: 100px;
				margin-left: 200px;
			}
		</style>

	</head>
	<body>
		<canvas id="canvas" width="1000" height="500">
			<script>
			var mycanvas = document.getElementById("canvas");
			var ctx = mycanvas.getContext("2d");
				ctx.beginPath();
				for (var i = 0; i <= 10; i++) {
					ctx.beginPath();
					ctx.arc(i * 25, i * 25, i * 10, 0, 2 * Math.PI, true);
					ctx.closePath();
					ctx.fillStyle = "rgba(255,0,0,0.25)";
					ctx.fill();
				}
			</script>
		</canvas>
	</body>
</html>

（二）房子

效果如下：

代码如下：

<!--html文件-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>house</title>
		<script src="demo.js"></script>
		<style>
			body{
				background-color: beige;
			}
			#canvas{
				background-color: gold;
				margin: 300px;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="1000" height="500">
		</canvas>
	</body>
</html>

//js文件
function init() {
	var mycanvas = document.getElementById("canvas");
	var ctx = mycanvas.getContext("2d");
	//屋顶
	ctx.beginPath();
	ctx.moveTo(300, 280);
	ctx.lineTo(700, 280);
	ctx.lineTo(500, 100);
	ctx.closePath();
	ctx.fillStyle = "indianred";
	ctx.fill();
	//房体
	ctx.beginPath();
	ctx.moveTo(330, 280);
	ctx.lineTo(330, 500);
	ctx.lineTo(670, 500);
	ctx.lineTo(670, 280);
	ctx.strokeStyle = "#FFD700";
	ctx.fillStyle = "lightyellow";
	ctx.fill();
	//窗户
	ctx.strokeRect(350, 310, 80, 80);
	ctx.moveTo(350, 350);
	ctx.lineTo(430, 350);
	ctx.moveTo(390, 310);
	ctx.lineTo(390, 390);
	ctx.stroke();
	ctx.closePath();
	//门
	ctx.beginPath();
	ctx.fillStyle = "#FFD700";
	ctx.fillRect(570, 400, 70, 100);
	ctx.arc(605, 400, 35, 0, 180 * Math.PI / 180, true);
	ctx.fill();
	ctx.beginPath();
	ctx.fillStyle = "brown";
	ctx.arc(580, 450, 5, 0, 360 * Math.PI / 180, true);
	ctx.fill();




}

window.addEventListener("load", init, true);

幺妹儿儿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
canvas绘画实例

（一）光束效果如下：完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>canvas</title> <style type="text/css"> body { background-color: antiquewhite; } #canvas { background-c.
复制链接

扫一扫