五、Canvas画圆弧

一、arc()圆弧（antiClockWise默认false：顺时针）

IMG_2909.PNG
IMG_2910.PNG
IMG_2911.PNG
IMG_2912.PNG

例：画圆角矩形

IMG_2914.PNG
IMG_2915.PNG
IMG_2916.PNG
IMG_2917.PNG
IMG_2918.PNG
IMG_2919.PNG
IMG_2920.PNG

利用上面画圆角矩形的工具，画1024棋盘：

IMG_2921.PNG
IMG_2922.PNG

二、arcTo()圆弧 （x1,y1是控制点，x2,y2是确定第2条切线的点）

IMG_2923.PNG
IMG_2925.PNG
IMG_2926.PNG

放大半径：

IMG_2927.PNG
IMG_2928.PNG

缩小半径：

IMG_2929.PNG
IMG_2930.PNG

放大半径，到超出切线长度

IMG_2931.PNG
IMG_2932.PNG

例：画一角弯月

IMG_2933.PNG
IMG_2934.PNG
IMG_2935.PNG
IMG_2936.PNG
IMG_2937.PNG

改进到：先画半径为1的圆弧，控制点到圆心的距离是d，然后进行变换,控制位置和大小。

IMG_2939.PNG
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • canvas笔记
    一：canvas简介 1.1什么是canvas？ ①：canvas是HTML5提供的一种新标签 ②：HTML5 ...
    GreenHand1阅读 10,190评论 2赞 32
  • HTML5+CSS3整体回顾
    转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提...
    前端进阶之旅阅读 12,965评论 22赞 225
  • 【基础系列】Canvas专题
    1 Canvas接口元素定义 1.1 getContext()方法 为了在canvas上绘制，你必须先得到一个画布...
    Kevin_Junbaozi阅读 5,179评论 1赞 2
  • Canvas教程(10)——使用切点绘制圆弧
    arcTo()介绍 arcTo()方法接收5个参数，分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线，即由...
    Airing阅读 6,313评论 0赞 20
  • canvas学习笔记
    一、canvas简介 1.1 什么是canvas？（了解） 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,364评论 3赞 40