canvas画旋转椭圆

小咪咪 2022-07-15 08:37 200阅读 0赞

要求使用画布变换方法。

椭圆画法参照大神佳作：[http://web.jobbole.com/82960/][http_web.jobbole.com_82960]

效果如下：

![20161109235536174][]

代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<title>旋转椭圆</title>
    	<meta charset="utf-8">
    </head>
    <body>
    	<canvas id="canvas" width="600" height="600"></canvas>
    
    	<script type="text/javascript">
    		var canvas = document.querySelector('#canvas'),
    			context = canvas.getContext('2d');
    
    		var width = canvas.width,
    			height = canvas.height;
    
    		// 原点坐标
    		var originX = width / 2,
    			originY = height / 2,
    			radius = 100;
    
    		context.lineWidth = 1;
    
    		/* 画椭圆
    		 * x, y表示原点坐标
    		 * radiusX, radiusY分别表示x和y轴的半径
    		 */
    		function ellipse(x, y, radiusX, radiusY) {
    		    context.save();
    		    var radius= (radiusX > radiusY) ? radiusX : radiusY;
    		    var ratioX = radiusX / radius;
    		    var ratioY = radiusY / radius;
    		    context.scale(ratioX, ratioY);
    		    context.beginPath();
    		    context.arc(x / ratioX, y / ratioY, radius, 0, 2 * Math.PI, false);
    		    context.restore();
    		    context.stroke();
    		    context.closePath();
    		}
    
    		// 把原点移动到圆心，旋转之后才不会变形
    		context.translate(originX, originY)
    		
    		// 椭圆数目
    		var num = 50;
    		for (var i = 0; i < num; i++) {
    			ellipse(0, 0, 10, 80);
    			context.rotate(2 * Math.PI / num);
    		}
    	</script>
    </body>
    </html>

[http_web.jobbole.com_82960]: http://http://web.jobbole.com/82960/
[20161109235536174]: /images/20220715/59d3474b87c44dff907befe61d0d4858.png

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 css画圆、半圆、椭圆、圆环

css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依

╰+哭是因爲堅強的太久メ/ 2023年08月17日 16:53/ 0 赞/ 115 阅读

相关 canvas图片画圆角

获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大，一遍是一倍或者两倍 var getPixelRatio = function(context)

冷不防/ 2023年01月11日 08:52/ 0 赞/ 254 阅读

相关 canvas旋转

canvas旋转的两种方法： 1、先用translate()将(0,0)坐标移动到想要旋转的中心点，再用rotate()旋转，最后要用translate()将中心移回(0,0

怼烎@/ 2022年10月01日 04:45/ 0 赞/ 510 阅读

相关 canvas画旋转椭圆

要求使用画布变换方法。椭圆画法参照大神佳作：[http://web.jobbole.com/82960/][http_web.jobbole.com_82960] 效果如

小咪咪/ 2022年07月15日 08:37/ 0 赞/ 201 阅读

相关 Canvas 画椭圆的方法

转自：AlloyTeam， www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/ 虽然标题是画椭圆，

比眉伴天荒/ 2022年07月12日 07:27/ 0 赞/ 203 阅读

相关使用 canvas 画圆

src="https://mdn.mozillademos.org/zh-CN/docs/learn/JavaScript/Building\_blocks/Looping\_

缺乏、安全感/ 2022年06月03日 09:28/ 0 赞/ 257 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 257 阅读

相关 Canvas 画圆

原文地址：http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b \-----------------------

爱被打了一巴掌/ 2021年12月15日 11:55/ 0 赞/ 418 阅读

相关 canvas画时钟

![70][] 效果如上，可以获取当前时间显示，秒针可以动．１．文件结构： ![70 1][] ２．html: <!DOCTYPE html>

忘是亡心i/ 2021年10月09日 04:18/ 0 赞/ 548 阅读

相关 canvas画圆

画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所

雨点打透心脏的1/2处/ 2021年07月24日 16:22/ 0 赞/ 582 阅读