html5的canvas画三角形和圆形，以及太极阵

最新推荐文章于 2019-10-06 20:42:20 发布

himilkhi

最新推荐文章于 2019-10-06 20:42:20 发布

阅读量1k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/himilkhi/article/details/68938658

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

//实现结合圆形画出太极阵

<!DOCTYPE HTML>  
<html>  
	<body>    
		<canvas id="myCanvas" width="500" height="500" style="background-color:#00FFFF; border:1px solid red;" >  
			Your browser does not support the canvas element. //您的浏览器不支持canvas控件
		</canvas>  
		<script type = "text/javascript">
				var canvas = document.getElementById("myCanvas");//获取canvas对象
				//简单的检测一下当前浏览器是否支持canvas对象,以免在一些不支持html5的浏览器上出现语法错误
				if(canvas.getContext){
			    //获取对应的CanvasRenderingContext2D对象
				var ctx = canvas.getContext("2d");
				//右边的红色半圆
				ctx.fillStyle = "white";
				ctx.beginPath();
				ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,false);
				ctx.closePath();
				ctx.fill();
				//左边的半圆
				ctx.fillStyle = "black";
				ctx.beginPath();
				ctx.arc(200,200,150,0.5*Math.PI,1.5*Math.PI,true);
				ctx.closePath();
				ctx.fill();
				//小上半圆
				ctx.fillStyle = "white";
				ctx.beginPath();
				ctx.arc(200,125,75,0.5*Math.PI,1.5*Math.PI,true);
				ctx.closePath();
				ctx.fill();
				//小下半圆
				ctx.fillStyle = "black"
				ctx.beginPath();
				ctx.arc(200,275,75,0.5*Math.PI,1.5*Math.PI,false);
				ctx.closePath();
				ctx.fill();
				//上部小圆
				ctx.fillStyle = "black";
				ctx.beginPath();
				ctx.arc(200,125,20,0,2*Math.PI,false);
				ctx.closePath();
				ctx.fill();
				//下部小圆
				ctx.fillStyle = "white";
				ctx.beginPath();
				ctx.arc(200,275,20,0,2*Math.PI,true);
				ctx.closePath();
				ctx.fill();
	
}

		</script>
	</body>  
</html>

himilkhi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html5的canvas画三角形和圆形，以及太极阵

//实现结合圆形画出太极阵 Your browser does not support the canvas element. //您的浏览器不支持canvas控件 var canvas = document.getElementById("myCanvas");//获取canvas对象 //简单的检测一下当前浏览器是否支持
复制链接

扫一扫