`
xuelianbobo
  • 浏览: 174869 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

用javascript画圆形

 
阅读更多
function drawCircle(x,y,r){
	//圆弧上每一个像素长的距离一个点  算出一共需要多少个点
    var pointCount=Math.round(2*Math.PI*r);
    //循环算出每一个点的坐标 并将生成的点添加到body中(body可以是其他的容器 如div)
    for (var i=0;i<=pointCount;i++){
    	var a=(i*2*Math.PI)/(pointCount);
    	X1=(x+Math.cos(a)*r);//根据圆心 半径 和三角函数计算x
    	Y1=(y+Math.sin(a)*r);//同计算x
    	var point=document.createElement("div");
		point.style.position='absolute';
    	point.style.background='red';
    	point.style.left=X1;
    	point.style.top=Y1;
    	point.style.width='3px';
    	point.style.height='3px';
    	document.getElementsByTagName("body")[0].appendChild(point);
    }
}
 
分享到:
评论

相关推荐

    HTML5+JavaScript动画基础(文本+源码)

    Canvas API提供了丰富的绘图函数,如fillRect()用于填充矩形,arc()用于绘制圆形或弧形,以及drawImage()用于在画布上显示图像,这些都是制作动画的基础。 JavaScript作为主要的脚本语言,负责控制动画的时间序列和...

    《HTML5+JavaScript动画基础》源代码

    JavaScript可以定时调用函数,更新屏幕上的元素状态,如使用`requestAnimationFrame()`方法来平滑地刷新每一帧。 4. **CSS3动画与过渡**: 虽然主要讨论JavaScript动画,但CSS3也提供了强大的动画和过渡功能,比如`...

    ReactNative组件用于利用ReactART创建动画圆形进度条

    React Native 是一个由Facebook开发的开源框架,它允许开发者使用JavaScript和React的声明式编程模型来构建原生的iOS和Android应用。ReactART是React的一个扩展库,它为React Native提供了一个2D图形渲染层,使得...

    NiftyCube javascript圆形边框

    NiftyCube的实现原理主要是利用CSS3的border-radius属性来创建圆形边框,然后通过JavaScript控制边框的颜色、宽度和动画效果。在HTML中,你需要创建一个div元素,并为其应用NiftyCube的特定类名。之后,你可以通过...

    圆形切割消失动画

    3. **JavaScript动画**:在更复杂的情况下,可能需要JavaScript来控制动画的每一帧,例如使用requestAnimationFrame API来实现更精细的控制。 4. **视图层更新**:无论是CSS还是JavaScript,都需要确保视图层能正确...

    HTML5+JavaScript画板

    一旦用户选择了新的颜色,JavaScript会更新当前的绘图笔触颜色,确保后续的绘制会使用新选择的颜色。 更进一步,程序允许用户插入背景图片。这涉及到HTML5的`&lt;img&gt;`标签和JavaScript的图像加载处理。用户可以选择...

    js 画饼图 javascript

    "JS完美画饼图"这个话题涉及到使用JavaScript库或者自定义代码来创建动态、交互式的饼图。在这个过程中,我们将探讨如何使用JavaScript和相关的库来实现这一目标。 首先,我们需要理解饼图的基本原理。饼图由一个...

    css3圆形进度条时分秒计时器js特效

    本篇将详细介绍如何利用CSS3和JavaScript实现一款简洁、美观的圆形进度条时分秒计时器。 首先,我们需要理解CSS3的特性。CSS3引入了许多新的选择器、属性和动画效果,使得网页设计更加丰富和动态。其中,圆角边框...

    css+javascript 实现扇形导航动画效果

    扇形布局可以通过使用`transform`属性和`rotate()`函数来实现,通过对每个导航项设置不同的旋转角度,我们可以创建出一个圆形的外观。同时,使用`border-radius`属性可以调整元素的圆角,以达到更真实的扇形效果。...

    CSS3 圆形动画.zip

    本主题“CSS3圆形动画”聚焦于如何使用CSS3来创建各种各样的圆形动态效果,提升网页的交互性和吸引力。在JavaScript特效和CSS样式标签的指引下,我们可以探讨以下几个关键知识点: 1. **圆角边框**:CSS3引入了`...

    QML--Canvas画布实现矩形圆形等圈定

    它提供了JavaScript API,允许开发者直接在2D画布上绘制图形,包括但不限于矩形、圆形以及其他几何形状。QML(Qt Meta Language)是Qt框架的一部分,主要用于创建富交互式用户界面,而qt5是Qt框架的第五个主要版本,...

    jquery html5图表动画圆形饼图.zip

    至于标签中的"javascript",这表明项目可能使用了原生JavaScript或者与jQuery结合,来处理用户交互和动态更新数据。JavaScript可以实时更新饼图的数据,比如当用户选择不同的数据集或过滤条件时,饼图能即时反映出...

    JavaScript_Javascript画布库SVGtoCanvas Canvas Canvas解析器.zip

    这个压缩包“JavaScript_Javascript画布库SVGtoCanvas Canvas Canvas解析器.zip”聚焦于JavaScript在处理画布(Canvas)和矢量图(SVG)上的应用。 Canvas是HTML5中的一个重要元素,它允许开发者通过JavaScript进行...

    html5 canvas画布绘制圆形时钟代码

    这里,我们将使用`requestAnimationFrame`来定期更新时钟的指针位置,以模拟实际时钟的运动。 ```javascript const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); function ...

    JavaScript可展开隐藏的侧边栏圆形菜单DEMO演示

    这个DEMO演示就是关于如何用JavaScript实现一个可展开和隐藏的侧边栏圆形菜单。这种类型的菜单设计可以增加网站或应用的用户体验,使导航更加直观且有趣。 首先,我们要理解这个圆形菜单的核心组成部分。在HTML中,...

    jquery html5 图表用canvas绘制一个动画圆形饼图

    jQuery则是一个广泛使用的JavaScript库,它简化了DOM操作,事件处理,动画效果以及Ajax交互。当jQuery与HTML5 Canvas结合时,可以轻松地创建出动态的、具有动画效果的图表,比如圆形饼图。在这个场景中,我们将深入...

    javascript画圆代码

    JS画圆代码,不是用画布实现,是纯代码通过 document.write('.')来实现的

    javascript大转盘抽奖程序

    总的来说,一个JavaScript大转盘抽奖程序涉及的技术点包括HTML5 Canvas的使用、JavaScript编程、概率计算、动画实现、事件处理以及响应式设计。通过这个项目,开发者不仅可以学习到Web前端开发的相关技能,还能提升...

    qml实现圆形进度条

    下面我们将深入探讨如何使用QML来实现一个圆形进度条。 首先,我们需要了解QML中的基本元素,如Rectangle、Path和PathRectangle等。这些元素是构建图形界面的基础。对于圆形进度条,我们可以使用Rectangle作为基础...

    jQuery css3酷炫圆形菜单动画展开收缩特效

    在本文中,我们将深入探讨如何使用jQuery和CSS3来创建一个酷炫的圆形菜单,该菜单具有动态展开和收缩的动画效果。这个效果是通过结合jQuery的事件处理和CSS3的过渡与变换特性实现的,使得用户交互时的视觉体验更加...

Global site tag (gtag.js) - Google Analytics