​如何用canvas绘制一个多边形

2017-11-27 11:15 36 1 收藏

canvas对于进行php网页设计的人来说一定是不陌生的,这是一个可以使用脚本进行图形绘制的html元素,通常我们所使用的脚本都是Javascript,利用一些合适的代码来实现图画的绘制。那么​如何用canvas绘制一个多边形?

【 tulaoshi.com - canvas教程 】

如何用canvas绘制一个多边形

  分析:

  计算出每个顶点的坐标,然后把它们连起来,就是一个正多边形啦~

  圆心角a的度数为360/n,弧度计算为2π/n。

  如果把圆心的坐标为(0,0),那么顶点P1的坐标为[X1=cos(a),Y1=sin(a)]。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/canvasjiaocheng/)

  以此类推,顶点Pn坐标为[Xn=cos(a*n),Yn=sin(a*n)]。

  圆心的实际坐标是外接矩形的中心:[Ox=(rect.right+rect.left)/2 , Oy=(rect.top+rect.bottom)/2]。

  所以Pn的实际坐标是[Xn+Ox,Yn+Oy]。

  把P0-P1…Pn连起来就是我们要的结果了。

  Java中可以使用Path来保存路径,最后使用canvas.drawPath来绘制出来。

如何用canvas绘制一个多边形

  代码:

如何用canvas绘制一个多边形

  总结

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/canvasjiaocheng/)

  try: 语句测试代码块的错误,一般把可能会出错的代码放到这里

  catch: 只有try里面的代码块发生错误时,才会执行这里的代码,参数err记录着try里面代码的错误信息

  finally: 无论有无异常里面代码都会执行

  try里面的代码报错的时候,catch里面的代码才会执行,finally里面的代码永远会执行

  catch和finally里面,正常的代码会从上到下顺序执行

  如果只是catch里面代码出错,则报catch里面的错误

  如果catch和finally都出错则会报finally里面的错误

如何用canvas绘制一个多边形

来源:http://www.tulaoshi.com/n/20171127/2767864.html

延伸阅读
多边形也是一个GDI对象,同样遵守其他GDI对象的规则,只是通常都不将其选入DC中。在MFC中多边形有CRgn表示。多边形用来表示一个不同与矩形的区域,和矩形具有相似的操作。如:检测某点是否在内部,并操作等。此外还得到一个包含此多边形的最小矩形。下面介绍一下多边形类的成员函数: CreateRectRgn 由矩形创建一个多边形 CreateEllipticRg...
教程绘制出来的海报效果还挺漂亮的,绘制难度不大,推荐一下和图老师的朋友们一起分享学习。 我们先来看看最终的效果图吧: 今天我们要教会您一种新的设计思路,当然更直接的收获是能教会你利用抽象的多边形打造炫目的设计效果。 作为设计师,我相信大家都对设计有一种热情,在内心深处有着某种源动力,促使着我们不断创新,我们不断的研...
多边形效果依然是热门趋势,想尽快上手,多练教程才是王道。今天飞屋睿UIdesign教同学们用AI打造3D多边形纸艺效果的雪糕,喜欢的朋友让我们一起来学习吧。 风靡全球的低多边形风格让我们耳目一新,而平面上不断发挥创意的同时,尝试一下3D效果又有何不可?谈到3D,大家肯定第一时间会想到专业3D建模的软件,而往往普罗大众的硬件还没有跟上3D的...
平常大家对网页进行切片输出的时候,一般都用普通的切片工具进行输出的。但是如果遇到导航很多,切片重叠时候,用一般的方法就无法进行处理,这时多变型切片工具的好处就显现出来了,以下我就详细介绍多变切片工具的使用方法! 1.打开作好的导航图片,在第一桢做好按钮一般状态图形,在第二桢上,做好按钮over状态图形,如图所示:(转载请注...

经验教程

646

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部