今天说说JavaScript在网页中画圆的函数arc!

一、arc所需要的参数设置

1
arc(x, y, radius, startAngle, endAngle, counterclockwise);

其中x,y,radius都很容易理解,那么重点说说startAngle,endAngle和counterclockwise三个参数!

   二、arc参数详解

1,startAngle和endAngle分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为0,结束的角度为Math.PI*2,这样正好画一个圆

2,下面通过实例来讲解startAngle和endAngle(注意html的代码我没有写)

1
2
3
4
5
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

我将开始角度设为0,结束角度设为1,这样如下图

1
2
3
4
5
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

我将开始角度设为1,结束角度设为2,这样如下图

上面我们可以看出第一张图的终点就是第二张图的起点,也就是说一个圆有无数个角度,只要你设置了开始角度和结束角度,它就可以以圆弧的形状将两点连起来!而起点和终点的差值就是图上两点的长度!当起点和终点的差值可以是两点重合时,就形成了圆!知道这一点我们就可以制作动态圆

3,counterclockwise是指是逆时针(true)还是顺时针(false)

大家看,当我将起点设置为0,终点为1,选择顺时针时

1
2
3
4
5
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, false);
cxt.stroke();

当我将起点设置为0,终点为1,选择逆时针时

1
2
3
4
5
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();

想要每天及时获取王业楼的个人博客更新的内容吗?赶快添加微信公众号“ly89cn”,或者扫描下方的二维码吧!

本文来源于王业楼的个人博客,本文地址:http://www.ly89.cn/detailB/61.html

欢迎分享本文,转载请注明本文出处和地址

详解JavaScript中的arc的方法的更多相关文章

  1. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  2. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  3. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  4. 详解Webwork中Action 调用的方法

    详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...

  5. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 详解javascript中this的工作原理

    在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向. 一.指向 window: 在全局中使用 this,它将会指向全 ...

  8. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

  9. sort方法实际应用详解---javascript中对一个对象数组按照对象某个属性进行排序

    转载: 查看原文 在javascript中,对象和数组是两种不同的类型,这和php中的数组概念不同.在javascript中,也有一些精妙的算法,用来对一些对象进行排序.我在面试迅雷的时候,也拿到一道 ...

随机推荐

  1. Java中的阻塞队列-LinkedBlockingQueue(二)

    原文地址:http://benjaminwhx.com/2018/05/11/%E3%80%90%E7%BB%86%E8%B0%88Java%E5%B9%B6%E5%8F%91%E3%80%91%E8 ...

  2. vueHistory 模式下,布置到服务器上路由刷新会报nginx404错误

    之前写完vue项目后,布置到服务器,用nginx反向代理后,一开始进去,进各种路由都是没问题的,但是一旦f5刷新后就会出现一个nginx404的错误. 经过翻阅vue文档后,发现这是vueHistor ...

  3. 常规项目用到的jar包之maven的pom.xml

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  4. mysql测试和sysbench工具详解

    前言 作为一名后台开发,对数据库进行基准测试,以掌握数据库的性能情况是非常必要的.本文介绍了MySQL基准测试的基本概念,以及使用sysbench对MySQL进行基准测试的详细方法. 文章有疏漏之处, ...

  5. Android - 看似内存泄漏,实则不是,记一次内存泄漏的案例分析

    APP中常常会存在内存泄漏的问题,一个简单的测试方法是,多次进入和退出同一页面(Activity),使用adb shell中的dumpsys meminfo com.android.settings ...

  6. python 不同目录间的模块调用

    有时候调用的模块不再同一个目录.直接import 是加载不进来的.默认的加载路径是sys.path中指定的路径.如果要指定加载的目录得需要把这个目录加到sys.path里面. 比如要加载父目录的同级目 ...

  7. Eclipse Push出现rejected - non-fast-forward错误

    在 Push到服务器时有时会出现 rejected - non-fast-forward 错误,这是由于pull的代码而远端发生改变,此时再提交之前你需要将远端的改变合并到本地上 参考:https:/ ...

  8. 来自SaberSama的HTML总结

    html 为什么要转过来呢? 因为我觉到,同样是一个初学者,应该互相学习,交流. html:是Hyper Text Markup Language的简写,即超文本标记语言. 网页的组成成分为HTML- ...

  9. Verilog八线 - 三线优先编码器设计(74LS148)

    百度百科_74LS148 if语句法 //8线-3线优先编码器设计(74LS148) // //EI | A7 A6 A5 A4 A3 A2 A1 A0 | Y2 Y1 Y0 GS EO //0 | ...

  10. Oracle编程入门经典 第12章 事务处理和并发控制

    目录 12.1          什么是事务处理... 1 12.2          事务处理控制语句... 1 12.2.1       COMMIT处理... 2 12.2.2       RO ...