注册送68元体验金

canvas实现圆绘制的示例代码

  发布时间:2019-09-11 14:58:09   作者:UCCs   我要评论

这篇文章主要介绍了canvas实现圆绘制的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

arc

语法:arc(x, y, radius, startAngle, endAngle, anticlockwise)

前面两个参数是x坐标,y坐标,第三个参数是半径,第四个参数是开始的弧度,第五个参数是结束的弧度,第六个参数是顺时针还是逆时针,默认是顺时针。

看下面代码,这样就能绘制一个圆了。

ctx.arc(100, 100, 50, 0, 2 * Math.PI)
ctx.stroke()

效果图:

这里要说明的一点是,不管顺时针还是逆时针,圆的弧度的位置是不变的,不会因为顺势转或者逆时针而改变,0.5pi的位置

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI)
ctx.stroke()

ctx.arc(100, 100, 50, 0, 1.5 * Math.PI,true)
ctx.stroke()

上面代码第一个是顺时针绘制的,3/4 个弧度,用逆时针的话就是 1/4 个弧度,它的意思是从 0 开始,顺时针到 1.5pi的位置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持注册送68元体验金。

相关文章

  • 利用 Canvas实现绘画一个未闭合的带进度条的圆环

    这篇文章主要介绍了利用 Canvas实现绘画一个未闭合的带进度条的圆环,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随
    2019-07-26
  • 使用html5 canvas绘制圆环动效

    这篇文章主要介绍了使用html5 canvas绘制圆环动效,需要的朋友可以参考下
    2019-06-03
  • canvas绘制圆角头像的实现方法

    这篇文章主要介绍了canvas绘制圆角头像的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2019-01-17
  • 详解canvas在圆弧周围绘制文本的两种写法

    这篇文章主要介绍了详解canvas在圆弧周围绘制文本的两种写法,直接按弧度进行编写的,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-22
  • 详解html2canvas截图不能截取圆角图片的解决方案

    这篇文章主要介绍了详解html2canvas截图不能截取圆角图片的解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-30
  • canvas实现圆形进度条动画的示例代码

    这篇文章主要介绍了canvas实现圆形进度条动画的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-26
  • html5 canvas绘制矩形和圆形的实例代码

    下面小编就为大家带来一篇html5 canvas绘制矩形和圆形的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起公司小编过来看看吧
    2016-06-16
  • 通过HTML5 Canvas API绘制弧线和圆形的教程

    这篇文章主要介绍了通过HTML5 Canvas API绘制弧线和圆形的教程,用JavaScript可以自定义弧度以及设定起始终末点,使用JavaScript需要的朋友可以参考下
    2016-03-14
  • HTML5 Canvas中绘制椭圆的4种方法

    这篇文章主要介绍了HTML5 Canvas中绘制椭圆的4种方法,本文讲解了参数方程法、均匀压缩法、三次贝塞尔曲线法、光栅法等4种方法,需要的朋友可以参考下
    2015-04-24
  • HTML5 Canvas绘制圆点虚线实例

    这篇文章主要介绍了HTML5 Canvas绘制圆点虚线实例,HTML5并未提供画虚线的方法,本文是根据Stack Overflow的方法修改而来,需要的朋友可以参考下
    2015-01-01

最新评论