大佬教程收集整理的这篇文章主要介绍了HTML5 Canvas 绘制椭圆与椭圆弧的实现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
if (CanvasRenderingContext2D.prototype.ellipse == undefined) { CanvasRenderingContext2D.prototype.ellipse = function(x,y,radiusX,radiusY,rotation,startAngle,endAngle,antiClockwisE) { this.save(); this.translate(x,y); this.rotate(rotation); this.scale(radiusX,radiusY); this.arc(0,1,antiClockwisE); this.restore(); } }
使用示例:
// var canvas = document.getElementById("canvas1"),ctx = canvas.getContext('2d'); //.... ctx.moveTo(100,200); ctx.ellipse(300,200,100,60,Math.PI,truE); ctx.stroke();
x,椭圆圆心X坐标
y,椭圆圆心Y坐标
radiusX,长半轴长度
radiusY,长半轴长度
rotation,椭圆旋转角度 (单位是度不是弧度)
startAngle,椭圆弧起始角弧度 (单位是弧度不是度!)
endAngle,椭圆弧结束角弧度 (单位是弧度不是度!)
antiClockwise,是否是逆时针方向绘制。true表示逆时针方向绘制椭圆弧,false顺时针方向绘制椭圆弧。
@H_673_49@
至于为什么一个方法内惊现 2 种角度单位,我只能说:前端标准就是这么乱!
Google出品的 canvas-5-polyfill.js 用于增强canvas兼容性,它也给canvas加上了ellipse方法
以上是大佬教程为你收集整理的HTML5 Canvas 绘制椭圆与椭圆弧的实现全部内容,希望文章能够帮你解决HTML5 Canvas 绘制椭圆与椭圆弧的实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。