JavaScript在网页中画圆的函数arc使用方法
更新时间：2015年11月13日 14:21:20 作者：王业楼
这篇文章主要介绍了JavaScript在网页中画圆的函数arc使用方法的相关资料,需要的朋友可以参考下
一、arc所需要的参数设置
复制代码 代码如下:
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的代码我没有写）
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，这样如下图
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，选择顺时针时
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，选择逆时针时
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.arc(70, 30, 25, 0, 1, true);
cxt.stroke();
以上内容是小编给大家介绍的JavaScript在网页中画圆的函数arc使用方法，希望大家喜欢。
相关文章
兼容IE FF Opera的javascript最短的拖动代码
关于拖动的代码太多了要么复杂要么不兼容,在这就不多说了. 这里提供个简洁的。2008-01-01
下面小编就为大家带来一篇JS只能输入正整数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。本文就来利用Canvas实现满屏爱心和文字动画的制作，感兴趣的可以了解一下2022-11-11
在 Vue 3 中使用 Element Plus 的 <el-menu> 组件时,默认情况下菜单项是关闭状态的,如果你想让某个菜单项默认处于展开状态,你可以通过设置菜单项的 default-active 属性来实现,这篇文章主要介绍了element-plus默认菜单打开,需要的朋友可以参考下2024-08-08
指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）
有时候我们更新的内容，有很多的大图片，就会导致页面变形或看不到全图。一般情况我们用css的max-width控制，但有些浏览器不支持，我们也可以用js做个补充2014-02-02
这篇文章主要为大家介绍了如何通过JavaScript模拟实现新浪的下拉菜单效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试2022-03-03
在javascript中， 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解2013-10-10
这篇文章主要介绍了JavaScript详解类数组与可迭代对象的实现原理，ES6中引入了迭代器与可迭代对象的概念，并且提供了对可迭代对象的相关支持，如for...of循环，Map(iterable)构造器，展开语法...等。让我们对数组外的数据集合的遍历操作也得到极大简化2022-06-06
大型网站往往很矛盾，想用户在首页看到更多东西，又不想浪费太多服务器流量。比如一个有3屏的首页。可能50%的用户进首页的目的是点击首页的连接，到子页面。2010-05-05
经常用到javascript对dom，喜欢这方便的朋友也很多，要想更好的对dom进行操作，这些基础一定要知道的。2010-04-04
最新评论