当前位置：网站首页>canvas - 圆形

canvas - 圆形

2022-07-24 05:18:00 【梅花三】

使用 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>
原网站

版权声明
本文为[梅花三]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_43794073/article/details/106034710

边栏推荐

猜你喜欢

随机推荐