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 作为对象使用就 ...
随机推荐
- javascript面向对象(学习和理解)
js中创建变量基本如下: var name = 'saodiseng'; var email = 'wuyucoder@126.com'; var website = 'http://www.cnbl ...
- 把 Mac 上的 bash 换成 zsh
本人补充:mac版git下载地址:http://code.google.com/p/git-osx-installer/downloads/list?can=3&q=&sort=- ...
- Nginx模块之———— RTMP 模块的在线统计功能 stat 数据流数据的获取(不同节点则获取的方式不同)
一.目前只有一个Live节点存在 单节点获取方式如下: public function getStreamByIp($outerIP, $streamName) { //查询录像模块的IP地址外网,根 ...
- iOS 调试问题汇总
// PBXcp error修复-No such file or directory (2013-05-02 15:20:50) 差不多算是Xcode比较常见的一个编译错误了,原因往往是添加或删除美术 ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- 24. Swap Nodes in Pairs
24. Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...
- iOS9 3DTouch开发
在iOS 9中,新iPhone将第三维度添加到了用户界面. 用户现在可以用力摁下主屏按钮来快速调出应用提供的功能菜单. 在应用中,用户现在可以用力摁下视图以查看更多内容的预览并且快速访问一些功能. 想 ...
- c语言的continue
continue 是跳过此次循环的剩下部分,直接进入下个循环.
- C# for循环 循环中先求长度还是使用list.Count,哪个效率高
这种问法可能问的不好.应该说成是第一种方法完全没有必要,很多人可能以为那样会为代码带来效率,而实际上是不会给效率带来任何提升. 因为事实上,索引器内部,为了安全期间,还是会去求整个list的count ...
- (转)Sqoop中文手册
Sqoop中文手册 1. 概述 本文档主要对SQOOP的使用进行了说明,参考内容主要来自于Cloudera SQOOP的官方文档.为了用中文更清楚明白地描述各参数的使用含义,本文档几乎所有参数 ...