canvas - 圆形

最新推荐文章于 2024-08-16 18:48:55 发布

梅花三

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量206

点赞数

分类专栏： canvas javascript 文章标签： canvas javascript

本文链接：https://blog.csdn.net/weixin_43794073/article/details/106034710

版权

javascript 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

canvas

5 篇文章 0 订阅

订阅专栏

使用 arc() 或 arcTo() 方法画圆形
效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#cvs {
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id='container'>
		<canvas id='cvs'>
			sorry, your browser doesn't support canvas API.
		</canvas>
	</div>
</body>
<script>
	window.onload = function() {
		// 获取画布
		const cvs = document.querySelector('#cvs')
		cvs.width = 800
		cvs.height = 800
		// 获取画笔
		const ctx = cvs.getContext('2d')

		const PI = Math.PI
		
		drawCircle(350, 350, 50, PI, PI * 2)
		drawCircle(400, 400, 50, PI * 3 / 2, PI * 1 / 2)
		drawCircle(350, 450, 50, 0, PI)
		drawCircle(300, 400, 50, PI * 1 / 2, PI * 3 / 2)
		drawCircle(350, 400, 100, 0, PI * 2)
		drawCircle(350, 400, 50, 0, PI * 2)

		ctx.strokeStyle = '0f0'
		ctx.strokeRect(300, 350, 100, 100)

		function drawCircle(x, y, r, startAngle, endAngle) {
			ctx.moveTo(x, y)
			ctx.beginPath()
			ctx.arc(x, y, r, startAngle, endAngle)
			ctx.strokeStyle = 'lime'
			ctx.stroke()
		}
	}
</script>
</html>

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#cvs {
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id='container'>
		<canvas id='cvs'>
			sorry, your browser doesn't support canvas API.
		</canvas>
	</div>
</body>
<script>
	window.onload = function() {
		// 获取画布
		const cvs = document.querySelector('#cvs')
		cvs.width = 800
		cvs.height = 600
		// 获取画笔
		const ctx = cvs.getContext('2d')

		ctx.globalAlpha = 0.5
		
		for(let i = 0; i < 50; i++) {
			ctx.beginPath()
			ctx.arc(Math.random() * 800, Math.random() * 600, Math.random() * 50, 0, Math.PI * 2)
			const fillStyle = 'rgb(' + randomRGB() + ',' +  randomRGB() + ',' + randomRGB() + ')'
			ctx.fillStyle = fillStyle
			ctx.fill()
		}

		function randomRGB() {
			return Math.floor(Math.random() * 256)
		}
	}
</script>
</html>