参考：

1、http://www.w3school.com.cn/html5/html_5_canvas.asp

2、http://blog.csdn.net/qq_27626333/article/details/51595138

效果图：

思路：

1、创建一个画布。

2、在画布上绘制一个圆。

3、把画布放到HTML页面上。

代码：

index.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>draw a Ball</title>

    </head>

    <body>

        <script src="js/ball.js"></script>

    </body>

</html>

ball.js

// Create the canvas

var canvas = document.createElement("canvas"); // 创建一个画布

var ctx = canvas.getContext("2d"); // 可以把ctx理解成一支画笔！

canvas.width = 1024;

canvas.height = 768;

document.body.appendChild(canvas);

// DRAW THE BALL

ctx.fillStyle="crimson";

ctx.beginPath();

ctx.arc(300,400,250,0,Math.PI*2,true);

//绘制弧线，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法

//以(x,y)为圆心绘制一条弧线，弧线半径为radius，起始和结束角度（用弧度表示）分别为startAngle

//和endAngle。最后一个参数表示是否按逆时针方向计算，值为false表示顺时针方向计算。

//内容来自http://blog.csdn.net/qq_27626333/article/details/51595138！

ctx.closePath();

ctx.fill();

【JavaScript】用JS绘制一个球的更多相关文章

  1. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  2. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  3. 【前端】用javaScript实现实现一个球池的效果

    ballPool 用javaScript实现实现一个球池的效果,实现效果如下所示: 动图: 截图: HTML代码: <!DOCTYPE html> <html > <he ...

  4. D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图

    首先需要下载安装d3.js  :  yarn add d3 然后在组建中引入 :  import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...

  5. Node.js是一个事件驱动I/O服务端JavaScript环境

    Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Jo ...

  6. Day.js 是一个轻量的处理时间和日期的 JavaScript 库

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能

    利用JavaScript(JS)实现一个九宫格拖拽功能   Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...

  8. (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  9. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

随机推荐

  1. linux less使用方法

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  2. asp.net session丢失的解决方法小结

    现在我就把原因和解决办法写出来. ASP.NET Session丢失原因: 由于Asp.net程序是默认配置,所以Web.Config文件中关于Session的设定如下: < sessionSt ...

  3. Unittest框架概念

    1.测试脚手架(test fixture): 测试准备前要做的工作和测试执行完后要做的工作(包括setUp()和tearDown()) 2.测试用例(test case): 最小的测试单元 3.测试套 ...

  4. Duilib教程－简单介绍

    在读这篇博客的时候,可能您已经对duilib有一定的了解.所以,我并不打算对duilib进行过多的介绍.它的内核首先由外国人编写,后来由国人一个小组接过来继续编写,于是就有了现在的Duilib. 1. ...

  5. Codeforces Round #207 (Div. 1) B （gcd的巧妙运用）

    比赛的时候不知道怎么写... 太弱了. 看了别人的代码,觉得这个是个经典的知识点吧. gcd的巧妙运用 自己想的时候苦苦思考怎么用dp求解. 无奈字符串太长而想不出好的算法. 其实在把a和b字符串都分 ...

  6. 2013暑假江西联合训练赛 -- by jxust_acm 解题报告

    第6题是利用周期性求解, 第7题是 (总的序列长度-最长的满足要求的序列长度) 第8题是 设定起点,可以找到最早出现的不满足条件,然后后面都是不满足的,利用队列求解这个过程 大神给的简单,精炼的题解. ...

  7. mysql如何判断一个字符串是否包含另外一个字符串？

    转自:http://blog.csdn.net/hechurui/article/details/49278493 判断子字符串在父字符串当中的索引: SELECT LOCATE("b&qu ...

  8. “绝对”妹纸~position

    CSS:布局之fixed,relative,absolute 记住abs是跟随 relative的,没有看到position:relative;之前他会一直向上查找. 直到执着的找到relative! ...

  9. orchestrator-Raft集群部署

    本文简要说明下orchestrator的Raft集群部署,其实部署很简单主要是好好研究下配置文件的配置,这里我的样例配置文件暂时只适用于我们这块业务 如果您自己使用请根据情况自行修改. 主要通过配置文 ...

  10. 使用ADO如何获得SQLSERVER 2K的数据库名的列表

    打开数据库连接_ConnectionPtr m_pConn;_RecordsetPtr m_pRs;m_pConn.CreateInstance(__uuidof(Connection));m_pRs ...