HTML5 Canvas中应用用相对路径描画圆弧

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

本文汉语翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “Advanced Path Methods, Arcs”

在Canvas制图中,“圆弧”既能够是1个整圆,还可以是圆周的1一部分。

拷贝编码
编码以下:

context.arc()
context.arc(x, y, radius, startAngle, endAngle, anticlockwise)

在上述方式叙述中,x和y界定圆心,radius界定圆周的半径。startAngle和endAngle以极座标值表明。anticlockwise(布尔运算值)界定圆弧的方位。

例如,假如大家想描画1个以点(100, 100)为圆心,半径为20的圆周,大家可使用下列编码:

拷贝编码
编码以下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false);

实行实际效果为:

值得留意的是,在上述编码中,大家必须将起止角度(0)和完毕角度(360)根据乘以(Math.PI/180)来变换成极座标弧度。当起止角度为0而完毕角度为360时,获得的是1个整圆。

除整圆,大家还可以描画圆弧片断。下述编码描画了4分之1个圆周:

拷贝编码
编码以下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, false);

假如大家想描画除上述圆弧以外的此外4分之3个圆周,大家能够将anticlockwise设定为true:

拷贝编码
编码以下:

context.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*90, true);

译注1:在Canvas的座标系中,Y轴的方位是向下的。

译注2:应用context.arcTo()方式还可以描画圆弧。Steve Fulton & Jeff Fulton 的 HTML5 Canvas 原著中对该方式的叙述是彻底不正确的。正确的arcTo()总结详见:曲线图之arcTo。