canvas画个椭圆

HTML5，使用canvas，简单地画个椭圆

 

直接上代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>test</title>
	<style>
		*{margin:0;padding:0;}
		body{position:relative;}
		#myCanvas{width: 600px;height:600px;background: lightblue;position: relative;z-index: 1;}
		body:before{content:'';position:absolute;z-index: 2;top: 0px;left:300px;height:600px;border-right: 1px solid #eee;}
		body:after{content:'';position:absolute;z-index: 2;top: 300px;left:0px;width: 600px;border-top: 1px solid #eee;}		
	</style>
  </head>
  <body>
	<canvas id="myCanvas" width="600" height="600">
	您的浏览器不支持 HTML5 canvas 标签。
	</canvas>
		
    <script>
		// 获取canvas元素
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
		
		// 设置椭圆的位置、大小和样式
		ctx.beginPath();
		// ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
		// ctx.ellipse(中心点x.中心点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
		ctx.ellipse(300, 300, 200, 100, 0, 0,  2*Math.PI); 
		ctx.fillStyle = "red"; // 设置填充颜色为红色
		ctx.strokeStyle = "blue"; // 设置边框颜色为蓝色
		ctx.lineWidth = 2; // 设置线条宽度为2像素
		ctx.closePath();
		
		// 绘制椭圆
		ctx.fill(); // 填充椭圆内部区域
		ctx.stroke(); // 绘制椭圆边框
	</script>
  </body>
</html>

　　

 

 

 

posted @ 2024-02-28 15:38  一只两支三指  阅读(135)  评论(0)    收藏  举报