参考：

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. cygwin下编译zlib源代码

    本文介绍在cygwin下编译zlib源代码的方法步骤,这个过程尽管简单,但还是有一些须要注意的地方. zlib源代码下载地址: http://www.zlib.net/ 下载后.解压就会生成zlib- ...

  2. Java知识点梳理——多态

    1.定义:多态是同一个行为具有多个不同表现形式或形态的能力,即一个接口不同的实例执行不同的操作: 2.优点:消除类型之间的耦合关系.可替换性.可扩展性.接口性.灵活性.简化性: 3.多态存在的3个必要 ...

  3. 红黑树C++实现

    1 /* 2 * rbtree.h 3 * 1. 每个节点是红色或者黑色 4 * 2. 根节点是黑色 5 * 3. 每个叶子节点是黑色(该叶子节点就空的节点) 6 * 4. 如果一个节点是红色,则它的 ...

  4. 【BZOJ4675】点对游戏 树分治+期望

    [BZOJ4675]点对游戏 Description 桑尼.露娜和斯塔在玩点对游戏,这个游戏在一棵节点数为n的树上进行. 桑尼.露娜和斯塔三人轮流从树上所有未被占有的节点中选取一点,归为己有,轮流顺序 ...

  5. 在Web工程中，普通Java类如何读文件

    我们在以前讨论过在Web工程不能采用Java工程原先的读取方式,即创建一个文件流(FileInputStream)并给出一个文件目录(从src开始找一直找到你要读取文件的目录),这种的方式是不可行的. ...

  6. Qunit 和 jsCoverage使用方法（js单元测试）

    Qunit 和 jsCoverage使用方法(js单元测试) 近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的 ...

  7. Windows数据库定时备份

    首先打开:任务计划程序 右键任务计划程序库,选择创建基本任务 然后即可以按照实际情况逐步进行 直到启动程序--浏览(程序或脚本)时,这里本人导入的是backup.bat文件,文件内容为 @echo 设 ...

  8. python - 常用的小方法

    常用的小方法: bin() oct() hex() chr() ord() dir() id() len() int() str() type() help() range(10)   /  rang ...

  9. shell脚本读取文件+读取命令行参数+读取标准输入+变量赋值+输出到文件

    读取url_list文件批量下载网页 url_list http://www.tianyancha.com/company/2412078287 http://www.4399.com/special ...

  10. TCP原理

    1.http://coolshell.cn/articles/11564.html 2.http://coolshell.cn/articles/11609.html 3.一站式学习wireshark ...