整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被卷去的高：document.body.scrollTop
網頁被卷去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
實現代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請調整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實際尺寸-->
瀏覽器窗口 的 實際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過深入Document內部對body進行檢測，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結果輸出至兩個文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調用函數，獲取數值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內部對body進行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數的最后，通過按名稱訪問表單元素，結果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調用findDimensions ( )函數，完成整個操作。
Canvas API（畫布）提供了一個通過 javascript 和 html 的 canvas 元素來在網頁上實時繪制圖形的方式。可用于動畫、游戲、圖標、圖片編輯等多個方面。
使用前，首先需要新建在網頁上新建 canvas 元素。
<canvas id="mycanvas" width="400" height="400">
您的瀏覽器不支持canvas！
</canvas>上述代碼，如果瀏覽器不支持 canvas，就會顯示標簽中間的文字--您的瀏覽器不支持 canvas！標簽通常指定一個 id 屬性，width、height 屬性一般定義畫布的大小。
每個 canvas 元素都有一個對應的 context 對象（上下文對象），Canvas API 定義在 context 對象上，使用 getContext 方法來獲取對象。
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d")getContext 方法指定參數2d，表示 canvas 用于生成平面圖案，如果是 3d，表示 canvas 用于生成3d立體圖像。
canvas 畫布提供了一個畫圖的平面空間范圍，每個點都有自己的坐標，原點位于畫布的左上角，x表示橫坐標，y表示縱坐標。
2.1 繪制路徑
eg：繪制一條線寬為5像素的紅色線條，代碼如下：
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d")
ctx.beginPath();
ctx.moveTo(0,0)
ctx.lineTo(400,400)
ctx.lineWidth = 5
ctx.strokeStyle = "red"
ctx.stroke()eg：繪制一個綠色三角形，代碼如下：
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d")
ctx.beginPath();
ctx.moveTo(0,0)
ctx.lineTo(400,400)
ctx.lineTo(0,400)
ctx.closePath()
ctx.lineWidth = 5
ctx.strokeStyle = "red"
ctx.stroke()
ctx.fillStyle = "green"
ctx.fill()2.2 繪制矩形
上述繪制矩形的方法中均有四個參數，其中x,y表示矩形的左上角頂點，也算起點，width、height 為矩形的寬高。strokeRect 與 strokeStyle 配合使用，fillRect 與 fillStyle 配合使用。
eg：繪制一個帶有紅色邊框的矩形，代碼如下：
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext('2d')
ctx.strokeStyle="red";
ctx.strokeRect(100,100,200,100)上述 stroke 替換成fill便可繪制一個紅色矩形。
2.3 繪制圓形 / 弧
上述的參數中，x,y 表示圓心的坐標，radius 是半徑，start 開始弧度，end 結束弧度，anticlockwise 表示是否是逆時針。
eg：繪制一個帶有紅色描邊的黑色圓，代碼如下：
<canvas id="circle" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("circle")
var ctx = canvas.getContext('2d')
ctx.arc(200,200,100,0,Math.PI*2,false);
ctx.lineWidth=10
ctx.strokeStyle = "red"
ctx.stroke()
ctx.fillStyle="#000"
ctx.fill()
</script>2.4 繪制文本
上述兩個方法均帶有三個參數，第一個 string 是需要繪制的內容，x,y 是文字的位置，需要注意的是 y 坐標是以文字的基線處開始算距離的，并非是文字頂部。文字的其他樣式可通過 font 屬性設置，與 css 的 font 類似。
eg：繪制實心的文字，并設置文字加粗、大小20像素是微軟雅黑字體。代碼如下：
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext('2d')
ctx.fillStyle="red";
ctx.font = "bold 40px 微軟雅黑"
ctx.fillText("我愛前端",100,100)注意：繪制文本的時候無法換行，如果需要換行的時候就需要多次繪制文字，達成換行目的。
2.5 設置漸變色
其中 x1,y1 表示起點，x2,y2 表示終點，通過不同坐標可控制漸變方向。
eg：給文字設置漸變色，代碼如下：
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext('2d')
var grd = ctx.createLinearGradient(0,0,400,400)
grd.addColorStop(0,"#4dffff")
grd.addColorStop(1,"#8e12aa")
ctx.fillStyle=grd;
ctx.font = "bold 40px 微軟雅黑"
ctx.fillText("我愛前端",100,100)2.6 設置陰影
eg：制作一個帶有陰影的矩形，代碼如下：
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext("2d")
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5
ctx.shadowBlur = 10;
ctx.shadowColor = "rgba(0,0,0,0.5)"
ctx.fillStyle="red"
ctx.fillRect(0,0,200,100);3.1 drawImage
drawImage(img,x,y) - 對圖片進行重繪
drawImage方法接受三個參數，第一個是圖片文件的 DOM 元素，x,y 表示繪制圖片的起始位置，也是圖片的左上角。由于圖片加載需要時間，drawImage 方法只能在圖片加載完成后才能調用。
eg：把一張圖片重繪到 canvas 上，代碼如下：
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext("2d")
var img = new Image()
img.src="https://zhengxin-pub.cdn.bcebos.com/financepic/cc840df83f7b47551e080410cc6c484c_fullsize.jpg"
img.onload = function(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.drawImage(img,0,0)
}3.2 getImageData、putImageData
getImageData(0,0,canvas.width,canvas.height)
getImageData 用來讀取 canvas 的內容，返回一個對象，包含了每個像素的信息。
var info = ctx.getImageData( 0 , 0 , canvas.width , canvas.height )putImageData( info , 0 , 0 )
putImageData 是將 getImageData 獲取到的信息，重新繪制到 canvas。
3.3 toDataURL
對圖像數據做出修改后，使用 toDataURL 方法，將 canvas 數據重新轉化成一般的圖像文件格式，然后可以進行另存本地或轉發功能。
eg：將 canvas 繪制的矩形轉成一張圖片，顯示到網頁上，代碼如下：
<canvas id="mycanvas" width="400" height="400"></canvas>
<img src="" alt="" id="picture">
<script>
var canvas = document.getElementById("mycanvas")
var ctx = canvas.getContext('2d')
ctx.strokeStyle="red";
ctx.strokeRect(100,100,200,100)
var img = document.getElementById("picture")
img.src= canvas.toDataURL("image/png")
</script>3.4 save、restore
eg：下面代碼先用 save 方法，保存了當前設置，然后繪制了一個有陰影的矩形。接著，使用 restore 方法，恢復了保存前的設置，繪制了一個沒有陰影的矩形。
么是canvas？我理解的canvas就是定義在html上的一個容器，開發人員可以通過js等工具在這個容器上進行創作，渲染出各種特效。
那么怎么使用canvas：
1.在html中定義一個canvas容器：
<canvas id="myCanvas" width="500px" height="500px"></canvas>
以上是在html中定義了一個canvas容器，那么接下來需要使用js工具在這個容器上進行創作。
var c=document.getElementById("myCanvas");
<!--js通過id來找到canvas容器-->
var ctx=c.getContext("2d");
<!--創建一個context對象:context對象是創建一個HTML5對象，該對象可以繪制路徑、矩形、及圖像等-->
創建了context對象后，我們可以使用context對象中的各種方法來進行創作。
例如：
<canvas id="mycanvas"></canvas>
canvas中fillStyle屬性和fillRect()方法的用法：
<!--通過getElementById來獲取canvas容器，并將其賦值給對象c-->
var c=document.getElementById("mycanvas");
<!--getContext用于返回一個對象-->
var context=c.getContext("2d");
至此創建了一個畫布，現在可以在上面進行繪制了。
context.fillStyle="red";
fillStyle這個屬性是用于設置顏色、漸變和模式的
至此填充顏色為紅色，但還是沒有效果，因為我們需要給定一個范圍來展示
這是需要用到方法fillRect()，此方法用于繪制矩形
context.fillRect(0,0,100,100);//x軸起始點，y軸起始點，寬度，高度
源碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas(3)</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
<script>
var c=document.getElementById("mycanvas");
/*getContext用于返回一個對象*/
var context=c.getContext("2d");
/*至此創建了一個畫布，現在可以在上面進行繪制了。*/
context.fillStyle="red";
context.fillRect(20,20,150,100);
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
