math and date、ajax、画布
console.log(Math.PI);//圆周率
console.log(Math.sqrt(4));//平方根2
console.log(Math.abs(-2.3));//绝对值2.3
console.log(Math.ceil(-2.3));//上舍入-2
console.log(Math.floor(-2.3));//下舍入-3
console.log(Math.max(-2,3,6,1));//最大值6
console.log(Math.min(-2,3,6,1));//最小值-2
console.log(Math.random());//0-1之间的随机数
console.log(Math.round(3.5));//把一个数字舍入为最接近的整数。4
console.log(Math.round(3.36));//四舍五入4
console.log(Math.round(3.4));//四舍五入3
console.log(Math.round(-3.4));//四舍五入-3
console.log(Math.round(-3.5));//四舍五入-3
var date=new Date();//返回当日的日期和时间。
console.log(date);
console.log(date.getDate());//从 Date 对象返回一个月中的某一天 (1 ~ 31)。
console.log(date.getDay());//从 Date 对象返回一周中的某一天 (0 ~ 6)。
console.log(date.getMonth());//从 Date 对象返回月份 (0 ~ 11)。
console.log(date.getFullYear());//从 Date 对象以四位数字返回年份。
console.log(date.getHours());//返回 Date 对象的小时 (0 ~ 23)。
console.log(date.getMinutes());//返回 Date 对象的分钟 (0 ~ 59)。
console.log(date.getSeconds());//返回 Date 对象的秒 (0 ~ 59)。
console.log(date.getMilliseconds());//返回 Date 对象的毫秒(0 ~ 999)。
console.log(date.getTime());//返回 1970 年 1 月 1 日至今的毫秒数。
get语法：var born = new Date("July 21, 1983 01:15:00")
document.write(born.getMinutes())
date.setDate(15);//设置 Date 对象中月的某一天 (1 ~ 31)。
date.setMinutes(22);//设置 Date 对象中的分钟 (0 ~ 59)。
date.setHours(11);//设置 Date 对象中的小时 (0 ~ 23)。 语法：dateObject.setHours(hour,min,sec,millisec)
date.setMilliseconds(200);//设置 Date 对象中的毫秒 (0 ~ 999)。
date.setFullYear()(2015);//设置 Date 对象中的年份（四位数字）。 语法：dateObject.setFullYear(year,month,day)
date.setSeconds(24);//设置 Date 对象中的秒 (0 ~ 59)。
date.setMonth(8);//设置 Date 对象中的月 (0 ~ 11)。 语法：dateObject.setMonth(month,day)
console.log(date);
ajax
1、AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
2、实例：
<html>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
接下来，在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数：
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
3、创建 XMLHttpRequest 对象：variable=new ActiveXObject("Microsoft.XMLHTTP");
4、向服务器发送请求：如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
5、服务器响应：如需获得来自服务器的响应，使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
eg：document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
6、onreadystatechange 事件：每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面
画布
1、，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器）：<canvas id="myCanvas" width="200" height="100"></canvas>
2、<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
cxt.fillStyle="#FF0000";//红色
cxt.fillRect(0,0,150,75);//矩形，在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
</script>
3、线条
通过指定从何处开始，在何处结束，来绘制一条线：
Canvas 实例：线条
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
4、圆形
通过规定尺寸、颜色和位置，来绘制一个圆：
Canvas 实例：圆形
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
5、 渐变
使用您指定的颜色来绘制渐变背景：
Canvas 实例：渐变
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
6、图像
把一幅图像放置到画布上：
Canvas 实例：图像
JavaScript 代码：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
7、颜色、样式和阴影
属性 描述
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
strokeStyle 设置或返回用于笔触的颜色、渐变或模式
shadowColor 设置或返回用于阴影的颜色
shadowBlur 设置或返回用于阴影的模糊级别
shadowOffsetX 设置或返回阴影距形状的水平距离
shadowOffsetY 设置或返回阴影距形状的垂直距离
方法 描述
createLinearGradient() 创建线性渐变（用在画布内容上）
createPattern() 在指定的方向上重复指定的元素
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）
addColorStop() 规定渐变对象中的颜色和停止位置
线条样式
属性 描述
lineCap 设置或返回线条的结束端点样式
lineJoin 设置或返回两条线相交时，所创建的拐角类型
lineWidth 设置或返回当前的线条宽度
miterLimit 设置或返回最大斜接长度
矩形
方法 描述
rect() 创建矩形
fillRect() 绘制“被填充”的矩形
strokeRect() 绘制矩形（无填充）
clearRect() 在给定的矩形内清除指定的像素
路径
方法 描述
fill() 填充当前绘图（路径）
stroke() 绘制已定义的路径
beginPath() 起始一条路径，或重置当前路径
moveTo() 把路径移动到画布中的指定点，不创建线条
closePath() 创建从当前点回到起始点的路径
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip() 从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo() 创建二次贝塞尔曲线
bezierCurveTo() 创建三次方贝塞尔曲线
arc() 创建弧/曲线（用于创建圆形或部分圆）
arcTo() 创建两切线之间的弧/曲线
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false
转换
方法 描述
scale() 缩放当前绘图至更大或更小
rotate() 旋转当前绘图
translate() 重新映射画布上的 (0,0) 位置
transform() 替换绘图的当前转换矩阵
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()
文本
属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对齐方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线
方法 描述
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本（无填充）
measureText() 返回包含指定文本宽度的对象
图像绘制
方法 描述
drawImage() 向画布上绘制图像、画布或视频
像素操作
属性 描述
width 返回 ImageData 对象的宽度
height 返回 ImageData 对象的高度
data 返回一个对象，其包含指定的 ImageData 对象的图像数据
方法 描述
createImageData() 创建新的、空白的 ImageData 对象
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上
合成
属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明值
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上
其他
方法 描述
save() 保存当前环境的状态
restore() 返回之前保存过的路径状态和属性
createEvent()
getContext()
toDataURL()
math and date、ajax、画布的更多相关文章
- javascript_core之正则、Math、Date
javascript_core之正则.Math.Date 1.RegExp:Regular Expression,创建封装正则表达式: ①正则直接量:var reg=/reg/ig:②var re ...
- JavaScript中Global、Math、Date对象的常用方法
JavaScript当中Global.Math.Date类型常用方法如下: /* js 中 Global对象 是一个不存在的对象,它里面的方法可以调用 常用方法: 1 encodeURI 对uri进行 ...
- Math和Date
Math和Date 一.对象 1.对象的概念 对象的本质:键值对,属性名和属性值 对象的意义:存储数据,编程 对象中的变量:属性 对象中的函数:方法 2.对象的赋值 var obj = {}; var ...
- JavaScript-----13.内置对象 Math()和Date()
1. 内置对象 js对象分为3种:自定义对象(var obj={}).内置对象.浏览器对象. 前两种对象是js基础内容,属于ECMAScript,第三个浏览器对象是js独有的.讲js API的时候会讲 ...
- javascript_core_06之正则、Math、Date
1.RegExp:Regular Expression,创建封装正则表达式: ①正则直接量:var reg=/reg/ig:②var reg=new RegExp(“reg”,“ig”): 2.Reg ...
- i++,++i,Math.max,hasOwnPrototype.ajax,indexOf(),firefox的一些东西,jquery的contains函数,window.open
一.i++与++i的区别 1 var i=0;3 console.log(i++)5 0 1 var j=0; 2 3 console.log(++j) 4 1 a=++i;相当于i=i+1;a=i; ...
- Javascript数组,String对象,Math对象,Date对象,正则表达式
标题栏的滚动<html><head><title>山西众创金融</title></head>function init(){ //1.拿到标 ...
- Java之StringBuffer，StringBuilder，Math，Date，SimpleDateFormat，UUID，File
java.lang 类 StringBuffer java.lang.Object java.lang.StringBuffer 所有已实现的接口: Serializable, Appendable, ...
- 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍
Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...
随机推荐
- MacOS X Terminal中设置代理
MacOS X中,即使在网络设置中配置了代理连接,Terminal中也不能访问不可描述的东西,需要额外设置. 我用的是Shadowsocks,使用privoxy搭建了本地的代理服务器,地址是http: ...
- 元素定义了position：fixed；后怎么居中
div{ position:fixed; width:1200px; margin:0 auto; top:0; bottom:0; left:0; right:0; }
- VS.Net 2015 Update3 学习(1) 支持Webpack
让vs.net 编译的时候自动执行webpack 首先 管理员模式下打开 “Developer Command Prompt for VS2015", 是管理员模式啊! 然后进入 cd c: ...
- Echarts_1:水平柱体
Echarts:http://echarts.baidu.com/index.html 这下面是我自己总结的一些配置注释,分享~ 效果图: 小白小白小白小白小白小白小白小白小白小白小白小白小白小白小白 ...
- Sublime Text2 javascript格式化插件JsFormat
一.安装方法: 按下快捷键 Ctrl+Alt+p 打开命令面板 输入install 这时下拉框第一项就会显示安装包控制器(这个需要初始化安装,不明白的搜索本站关于sublime Text2 的介绍) ...
- Spring官网下载dist.zip的几种方法
Spring官网下载dist.zip的几种方法 Spring官网改版后,很多项目的完整zip包下载链接已经隐掉了,虽然Spring旨在引导大家用更“高大上”的maven方式来管理所依赖的jar包, ...
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- SQL与Mongodb聚合的对应关系(举例说明)
SQL中的聚合函数和Mongodb中的管道相互对应的关系: WHERE $match GROUP BY $group HAVING $match SELECT $project ORDER BY $s ...
- centos中安装字体
转载自:http://blog.csdn.net/wlwlwlwl015/article/details/51482065 在使用phantomjs做自动化网页截图时,发现截图都没有文字.最后好久才发 ...
- linux笔记：shell编程-文本处理命令
cut(字段提取命令,也叫列提取命令): printf(格式化输出命令): awk(awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理): sed(sed是一个很好 ...