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" οnclick="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()
?
轉載于:https://www.cnblogs.com/brenda301/p/5518663.html
總結
以上是生活随笔為你收集整理的math and date、ajax、画布的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ITIL的一些简单感受
- 下一篇： 一些VR延迟优化方法