【JavaScript】用JS绘制一个球
参考：
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绘制一个球的更多相关文章
- Javascript实战开发：教你使用raphael.js绘制中国地图
最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...
- js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...
- 【前端】用javaScript实现实现一个球池的效果
ballPool 用javaScript实现实现一个球池的效果,实现效果如下所示: 动图: 截图: HTML代码: <!DOCTYPE html> <html > <he ...
- D3.js (v3)+react框架 基础部分之认识选择集和如何绘制一个矢量图
首先需要下载安装d3.js : yarn add d3 然后在组建中引入 : import * as d3 from 'd3' 然后定义一个方法,在componentDidMount()这个钩子 ...
- Node.js是一个事件驱动I/O服务端JavaScript环境
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎.目的是为了提供撰写可扩充网络程序,如Web服务.第一个版本由Ryan Dahl于2009年发布,后来,Jo ...
- Day.js 是一个轻量的处理时间和日期的 JavaScript 库
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。
编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...
随机推荐
- 【BZOJ】3391: [Usaco2004 Dec]Tree Cutting网络破坏（dfs）
http://www.lydsy.com/JudgeOnline/problem.php?id=3391 显然判断每个点只需要判断子树是否小于等于n/2即可 那么我们虚拟一个根,然后计算每个子树的si ...
- kafka2:常用topic命令
常用操作 创建一个topic bin/kafka-topics.sh --create --zookeeper 192.168.3.230:2181 --replication-factor 3 -- ...
- 《linux系统及其编程》实验课记录（二）
实验 2:获取对使用命令的帮助 实验环境: 安装了 Red Hat Enterprise Linux 6.0 可运行系统,并且是成功验证系统.有另外一个无特权用户 student,密码 student ...
- 广义高斯分布（GGD）
广义高斯分布(GGD)-Generalized Gaussian Distribution 广义高斯分布及其在图像去噪的应用_百度文库 https://wenku.baidu.com/view/2b8 ...
- Mybatis 二级缓存脏读
脏读的产生 Mybatis的二级缓存是和命名空间绑定的,所以通常情况下每一个Mapper映射文件都有自己的二级缓存,不同的mapper的二级缓存互不影响.这样的设计一不注意就会引起脏读,从而导致数据一 ...
- Configuration注解类 Bean解析顺序
@PropertySource 加载properties @ComponentScan 扫描包 @Import 依赖的class @ImportResource 依赖的xml @Bean 创建bean ...
- xmpp muc 群聊协议 1
翻译来自 :http://wiki.jabbercn.org/index.php?title=XEP-0045&variant=zh-cn#.E6.9C.AF.E8.AF.AD 通用术语 Af ...
- javamail 发送邮件demo(文字与附件)
package com.get.one; import javax.mail.BodyPart; import javax.mail.Message; import javax.mail.Multip ...
- delphi ----日期控件运用,日期问题，日期时间比较
一.日期控件 1.DateTimePicker 1)只显示年月 DateMode:dmUpDown format:yyyy-MM 2)将DateTimePicker的Format属性中加入日期格式设成 ...
- js滚动显示: 滚动条置顶/底
<script> //当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下面的内容 document.getElementByIdx ( 'chatboard').scrollTop ...