canvas(path)

最新推荐文章于 2022-09-21 15:35:24 发布

spfLinux

最新推荐文章于 2022-09-21 15:35:24 发布

阅读量277

点赞数

分类专栏： HTML5 文章标签： JS canvas

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		canvas{
			background: #ddd;
		}
	</style>
</head>
<body>
	<h2>canvas——路径</h2>
	<canvas id="c2" width="500" height="400">
		您的浏览器版本太低，请升级！
	</canvas>

	<script>
		var c2=document.getElementById('c2');
		var ctx=c2.getContext('2d');
		//三角形
		ctx.strokeStyle="red";
		ctx.beginPath();
		ctx.moveTo(250,50);
		ctx.lineTo(300,100);
		ctx.lineTo(200,100);
		ctx.closePath();
		ctx.stroke();

		//圆
		ctx.beginPath();
		ctx.arc(250,200,50,0,2*Math.PI);
		ctx.closePath();
		ctx.stroke();

		//圆拱
		ctx.beginPath();
		ctx.arc(300,200,50,0*Math.PI/180,180*Math.PI/180);
		ctx.stroke();  //这个放到里面会画出拱形，放到外面则会多出一条线
		ctx.closePath();
		
	</script>
</body>
</html>