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、画布的更多相关文章

  1. javascript_core之正则、Math、Date

      javascript_core之正则.Math.Date 1.RegExp:Regular Expression,创建封装正则表达式: ①正则直接量:var reg=/reg/ig:②var re ...

  2. JavaScript中Global、Math、Date对象的常用方法

    JavaScript当中Global.Math.Date类型常用方法如下: /* js 中 Global对象 是一个不存在的对象,它里面的方法可以调用 常用方法: 1 encodeURI 对uri进行 ...

  3. Math和Date

    Math和Date 一.对象 1.对象的概念 对象的本质:键值对,属性名和属性值 对象的意义:存储数据,编程 对象中的变量:属性 对象中的函数:方法 2.对象的赋值 var obj = {}; var ...

  4. JavaScript-----13.内置对象 Math()和Date()

    1. 内置对象 js对象分为3种:自定义对象(var obj={}).内置对象.浏览器对象. 前两种对象是js基础内容,属于ECMAScript,第三个浏览器对象是js独有的.讲js API的时候会讲 ...

  5. javascript_core_06之正则、Math、Date

    1.RegExp:Regular Expression,创建封装正则表达式: ①正则直接量:var reg=/reg/ig:②var reg=new RegExp(“reg”,“ig”): 2.Reg ...

  6. 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; ...

  7. Javascript数组,String对象,Math对象,Date对象,正则表达式

    标题栏的滚动<html><head><title>山西众创金融</title></head>function init(){ //1.拿到标 ...

  8. Java之StringBuffer,StringBuilder,Math,Date,SimpleDateFormat,UUID,File

    java.lang 类 StringBuffer java.lang.Object java.lang.StringBuffer 所有已实现的接口: Serializable, Appendable, ...

  9. 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍

    Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...

随机推荐

  1. hadoop修改MR的提交的代码程序的副本数

    hadoop修改MR的提交的代码程序的副本数 Under-Replicated Blocks的数量很多,有7万多个.hadoop fsck -blocks 检查发现有很多replica missing ...

  2. Javascript中的队列

    队列遵循FIFO (First In First Out)原则. 普通队列 function Queue() { var items=[]; //向队列尾部添加一个或者多个元素 this.enqueu ...

  3. C# java MD5加密方不一致问题

    说来惭愧,做开发几年了,一直在吸取,今天也写写自已关于技术的一点点理解,不正之处,请大家多多指点. 由于之前开发的项目使用的是C#,用户信息使用的C#的MD5加密码方式,而现在需要切换到Java平台下 ...

  4. Node聊天程序实例05:index.html和style.css

    作者:vousiu 出处:http://www.cnblogs.com/vousiu 本实例参考自Mike Cantelon等人的<Node.js in Action>一书. index. ...

  5. eclipse绘制activiti无法生成图形

    今天使用eclipse绘制acitiviti,发现无法绘制图形,设置里面勾选也勾选了,同时activiti插件也是最新的,最后发现同时打开了两个eclipse窗口就不支持生成图形,看来只能开一个窗口了 ...

  6. C#文件创建、修改、访问时间修改

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. POI2005Bank notes银行货币

    Description Byteotian Bit Bank (BBB) 拥有一套先进的货币系统,这个系统一共有n种面值的硬币,面值分别为b1, b2,..., bn. 但是每种硬币有数量限制,现在我 ...

  8. PHP 底层的运行机制与原理

    PHP说简单,但是要精通也不是一件简单的事.我们除了会使用之外,还得知道它底层的工作原理. PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现包含大量组件的软件框架.更狭义点看,可 ...

  9. SAP 设置屏幕字段的隐藏、显示、必填和可选,以设置物料组为例

    1.事务码MM01,把物料组设为选填字段. 2.找到物料组的屏幕字段. 3.在后台根据屏幕字段找到对应字段组.后台路径:后勤-常规—物料主数据—字段选择—给字段组分配字段.点击后面的箭头进入下一屏幕. ...

  10. flask笔记2-程序的基本结构

    第一个flask web程序 1.初始化(所有flask程序都必须创建一个程序实例,程序实例是Flask类的对象): from flask import Flask app = Flask(__nam ...