参考：

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. gibhub上搭建个人静态网站介绍

    之前学习过git的基本命令.今天介绍一下github上搭建个人网站的步骤. 在window系统上搭建gibhub个人网站(只能执行html.css和js文件),这就是纯静态页面. 步骤一:注册gith ...

  2. js json ie不支持json

    JSON是包含在JScript 5.8中,而为了向下兼容ie8只有在文档模式是”Internet Explorer 8 Standards”的时候才使用JScripte 5.8,其他时候使用JScri ...

  3. 蓝桥杯 第三届C/C++预赛真题（8） 密码发生器（水题）

    在对银行账户等重要权限设置密码的时候,我们常常遇到这样的烦恼:如果为了好记用生日吧,容易被破解,不安全:如果设置不好记的密码,又担心自己也会忘记:如果写在纸上,担心纸张被别人发现或弄丢了... 这个程 ...

  4. GCD介绍（四）: 完结

    转自http://www.dreamingwish.com/dream-2012/gcd-four-the-the-odds-and-ends.html Dispatch Queue挂起 dispat ...

  5. 转载：定位ARM Hard Fault 的方法

    转载自:http://www.openedv.com/posts/list/25030.htm 1.用Keil的话,可以做如下操作: 先将fault中断函数的内容改为: HardFault_Handl ...

  6. Kotlin——中级篇（二）： 属性与字段详解

    在前面的章节中,详细的为大家讲解到了Kotlin中对类的类的定义.使用.初始化.初始化.类继承等内容,但是在一个类中,几乎上是不可能不出现属性与字段(field)的,这一篇文章就为大家奉上Kotlin ...

  7. 报错 findMergedAnnotation activemq

    springmvc 集成activemq引入activemq-all-5.14.4有冲突 springmvc 4.2.9集成activemq-5.14.4时报错,错误信息如下 NoSuchMethod ...

  8. 【BZOJ2208】[Jsoi2010]连通数 DFS

    [BZOJ2208][Jsoi2010]连通数 Description Input 输入数据第一行是图顶点的数量,一个正整数N. 接下来N行,每行N个字符.第i行第j列的1表示顶点i到j有边,0则表示 ...

  9. Spring Cloud Feign组件

    采用Spring Cloud微服务框架后,经常会涉及到服务间调用,服务间调用采用了Feign组件. 由于之前有使用dubbo经验.dubbo的负载均衡策略(轮训.最小连接数.随机轮训.加权轮训),du ...

  10. php 问题及原因总结

    1.php 加水印时出现问题的原因 :或许某个参数输入错误,导致页面一点反应都没有.