【HTML5】——canvas画奥运五环

最新推荐文章于 2021-09-15 19:21:31 发布

二十五六岁

最新推荐文章于 2021-09-15 19:21:31 发布

阅读量724

点赞数 1

分类专栏：移动web开发文章标签：奥运五环 canvas

本文链接：https://blog.csdn.net/qq_40803626/article/details/102709640

版权

移动web开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

思路

先画在环下面的，如下图，最后将剩下的全部画出来
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="c1" width="400px" height="400" style="border: 1px solid black;"></canvas>

		<script>
			var c = document.getElementById("c1");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(150, 150, 50, Math.PI, 0);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#eecd40";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(260, 150, 50, Math.PI, 0);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#198e4a";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(100, 100, 50, 0, 2 * Math.PI);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#163b62";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(210, 100, 50, 0, 2 * Math.PI);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#000000";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(320, 100, 50, 0, 2 * Math.PI);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#bf0628";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(150, 150, 50, -0.1 * Math.PI, 1.1 * Math.PI);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#ecc729";
			ctx.stroke();

			ctx.beginPath();
			ctx.arc(260, 150, 50, -0.1 * Math.PI, 1.1 * Math.PI);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#198e4a";
			ctx.stroke();
		</script>
	</body>
</html>

二十五六岁

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】——canvas画奥运五环

思路先画在环下面的，如下图，最后将剩下的全部画出来<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="c1" width=...
复制链接

扫一扫

专栏目录