js找那個canvas超出高度如何自動滾動渲染,js獲取頁面滾動高度

本文目錄一覽：

• 1、如何實現canvas的圖片輪播
• 2、JS中canvas畫布繪製中如何實現縮放，位移，旋轉
• 3、《JS原理、方法與實踐》- canvas動畫
• 4、JS之使用Canvas繪圖
• 5、html5 Canvas 如何自適應屏幕大小？
• 6、canvas 自適應屏幕的問題，能否鋪滿整個屏幕，並且畫布不是等比例放大？

如何實現canvas的圖片輪播

圖片自動滑動效果很多網站都要用，最近在學html5就拿這個練練手，發現用canvas實現起來其實很簡單。代碼比較粗糙，有很多改進的地方，不過還是先記錄一下。

一. html文件

[html] view

plaincopy

!DOCTYPE html

html lang=”en”

head

meta charset=”utf-8″/

titleHTML5 Images Slider/title

script src=””/script

script src=”test.js”/script

link href=”style.css” rel=”stylesheet” /

/head

body

div id=”container”

canvas id=”imgs” width=”500″ height=”300″ onclick=”canvasClick()”/canvas

/div

div class=”imgGallery”

span class=”cover”img src=”1.jpg” id=”img1″ width=”125″ height=”150″ onclick=”iconClick(this.id)”/span

img src=”2.jpg” id=”img2″ width=”125″ height=”150″ onclick=”iconClick(this.id)”

img src=”3.jpg” id=”img3″ width=”125″ height=”150″ onclick=”iconClick(this.id)”

img src=”4.jpg” id=”img4″ width=”125″ height=”150″ onclick=”iconClick(this.id)”

/div

/body

footer

/footer

/html

二. js文件，名字test.js

[javascript] view

plaincopy

var images = new Array();

var cIndex = 0;

var speed = 5;

var context;

var canvas;

var currentImage;

var width=300;

var height=300;

var stopX = 95;

var stopY = 0;

var autoTimeout;

var manuTimeout;

var interval;

var img1;

var img2;

var img3;

var img4;

var timeoutInterval = 5;

function slideImage(id,x,y,imgObj){

this.speed = speed;

this.preImage = null;

this.nextImage = null;

this.imgObj=imgObj;

this.x=x;

this.y=y;

this.direction=”right”;

this.id = id;

}

function buttonNext(x,y,bwidth,bheight){

this.x = x;

this.y = y;

this.width = bwidth;

this.height = bheight;

}

$(document).ready(

function(){

InitImages();

canvas = document.getElementById(“imgs”);

context = canvas.getContext(“2d”);

//移動圖片

context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);

context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);

context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);

context.fillStyle=”rgba(100,150,185,0.5)”;

context.fillRect(0,0,100,height);

context.fillRect(400,0,100,height);

interval = setTimeout(“intervalSlide()”, 20);

}

);

function drawFrame(){

context.clearRect(0,0,canvas.width,canvas.height);

//調用beginPath()確保不會接着上次繪製的圖形繪製

context.beginPath();

context.drawImage(currentImage.imgObj,currentImage.x,currentImage.y,width,height);

context.drawImage(currentImage.preImage.imgObj,currentImage.preImage.x,currentImage.preImage.y,width,height);

context.drawImage(currentImage.nextImage.imgObj,currentImage.nextImage.x,currentImage.nextImage.y,width,height);

context.drawImage(currentImage.preImage.preImage.imgObj,currentImage.preImage.preImage.x,currentImage.preImage.preImage.y,width,height);

//遮罩

context.fillStyle=”rgba(100,150,185,0.5)”;

context.fillRect(0,0,100,height);

context.fillRect(400,0,100,height);

//每一幀的位置變動

currentImage.x -= speed;

currentImage.preImage.x -= speed;

currentImage.nextImage.x -= speed;

currentImage.preImage.preImage.x -= speed;

if(currentImage.x == 200){

currentImage.nextImage.x = 500;

}

//到達指定位置停止變動

if(currentImage.x != stopX){

autoTimeout = setTimeout(“drawFrame()”,timeoutInterval);

}

else{

}

}

function InitImages(){

img1 = new slideImage(“img1”,-200,0,document.getElementById(“img1”));

img2 = new slideImage(“img2”,100,0,document.getElementById(“img2”));

img3 = new slideImage(“img3”,400,0,document.getElementById(“img3”));

img4 = new slideImage(“img4”,700,0,document.getElementById(“img4”));

img1.preImage = img4;

img1.nextImage = img2;

img2.preImage= img1;

img2.nextImage= img3;

img3.preImage=img2;

img3.nextImage=img4;

img4.preImage = img3;

img4.nextImage = img1;

currentImage=img2;

hilightSelectedImg();

}

function canvasClick(){

currentImage = currentImage.nextImage;

manuTimeout = setTimeout(“drawFrame()”,timeoutInterval);

}

function intervalSlide(){

currentImage = currentImage.nextImage;

hilightSelectedImg();

autoTimeout = setTimeout(“drawFrame()”, timeoutInterval);

setTimeout(“intervalSlide()”, 5000)

}

function iconClick(obj){

if(obj == “img1”){

currentImage = img1;

}

else if(obj == “img2”){

currentImage = img2;

}

else if(obj == “img3”){

currentImage = img3;

}

else if(obj == “img4”){

currentImage = img4;

}

currentImage.preImage.x = 100;

currentImage.preImage.preImage.x = -200;

currentImage.x = 400;

hilightSelectedImg();

manuTimeout = setTimeout(“drawFrame()”,timeoutInterval);

}

function hilightSelectedImg(){

img1.imgObj.width = 125;

img1.imgObj.height = 150;

img1.imgObj.style.opacity = 0.5;

img2.imgObj.width = 125;

img2.imgObj.height = 150;

img2.imgObj.style.opacity = 0.5;

img3.imgObj.width = 125;

img3.imgObj.height = 150;

img3.imgObj.style.opacity = 0.5;

img4.imgObj.width = 125;

img4.imgObj.height = 150;

img4.imgObj.style.opacity = 0.5

currentImage.imgObj.width = 150;

currentImage.imgObj.height = 175;

currentImage.imgObj.style.opacity = 1;

}

三. css文件。style.css

[css] view

plaincopy

canvas {

border:1px dashed black;

}

.imgGallery{

width:550px;

position:absolute;

height:170px

}

img{

opacity:0.5;

}

JS中canvas畫布繪製中如何實現縮放，位移，旋轉

cxt.scale(2,2);

縮放的是整個畫布，縮放後，繼續繪製的圖形會被放大或縮小。

ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置

x： 添加到水平坐標（x）上的值

y： 添加到垂直坐標（y）上的值

發生位移後，相當於把畫布的0,0坐標 更換到新的x,y的位置，所有繪製的新元素都被影響。

位移畫布一般配合縮放和旋轉等。

context.rotate(angle); 方法旋轉當前的繪圖

注意參數是弧度（PI）

如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算。

《JS原理、方法與實踐》- canvas動畫

動畫是由多幅連續的圖片組成，按順序切換不同的圖片給人一種動畫的感覺，切換的速度越快動畫的感覺越真實，當速度達到1秒24幅圖片的時候，人的肉眼就無法分辨了，這就是所說的24幀。canvas中的動畫其實就是循環執行擦除和繪製的操作，並且一般會在操作之前保存環境，操作之後恢復環境。

使用canvas製作動畫由兩個關鍵點：循環執行，繪製每次顯示的圖片。循環執行主要有兩種方式，一種是使用前面所學過的setInterval或者setTimeout方法；另一種是調用新增加的專門用於動畫的requestAnimationFrame方法，這個方法不需要設置間隔時間，直接將處理邏輯寫入參數的回調函數中就可以了。但是requeseAnimationFram自身需要被放到回調函數中，另外，它的啟動操作可以用cancelAnimationFrame方法來取消。

示例：

JS之使用Canvas繪圖

canvas 元素負責在頁面中設定一個區域，然後就可以通過 JavaScript 動態地在這個區域中繪製圖形。

要使用 canvas 元素，必須先設置其 width 和 height 屬性，指定可以繪圖的區域大小。出現在開始和結束標籤中的內容是後備信息，如果瀏覽器不支持 canvas 元素，就會顯示這些信息。

如果不添加任何樣式或者不繪製任何圖形，在頁面中是看不到該元素的。

要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調用getContext() 方法並傳入上下文的名字。傳入 “2d” ，就可以取得 2D 上下文對象。

使用 toDataURL() 方法，可以導出在 canvas 元素上繪製的圖像。這個方法接受一個參數，即圖像的 MIME 類型格式，而且適合用於創建圖像的任何上下文。

取得畫布中的一幅 PNG 格式的圖像：

如果繪製到畫布上的圖像源自不同的域， toDataURL() 方法會拋出錯誤。

使用 2D 繪圖上下文提供的方法，可以繪製簡單的 2D 圖形，比如矩形、弧線和路徑。2D 上下文的坐標開始於 canvas 元素的左上角，原點坐標是(0,0)。

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結果取決於兩個屬性： fillStyle 和 strokeStyle 。

這兩個屬性的值可以是字符串、漸變對象或模式對象，而且它們的默認值都是 “#000000” 。如果為它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進制碼、rgb 、 rgba 、 hsl 或 hsla 。

與矩形有關的方法包括 fillRect() 、strokeRect() 和 clearRect() 。這三個方法都能接收 4 個參數：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數的單位都是像素。

fillRect() 方法在畫布上繪製的矩形會填充指定的顏色。填充的顏色通過 fillStyle 屬性指定：

strokeRect() 方法在畫布上繪製的矩形會使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定。

描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數。另外，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（ “butt” 、”round” 或 “square” ），通過 lineJoin 屬性可以控制線條相交的方式是圓交、斜交還是斜接（ “round” 、 “bevel” 或 “miter” ）。

clearRect() 方法用於清除畫布上的矩形區域。本質上，這個方法可以把繪製上下文中的某一矩形區域變透明。

通過路徑可以創造出複雜的形狀和線條。要繪製路徑，首先必須調用 beginPath() 方法，表示要開始繪製新路徑。然後，再通過調用下列方法來實際地繪製路徑。

如果想繪製一條連接到路徑起點的線條，可以調用closePath() 。如果路徑已經完成，你想用 fillStyle 填充它，可以調用 fill() 方法。另外，還可以調用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle 。最後還可以調用 clip() ，這個方法可以在路徑上創建一個剪切區域。

繪製一個不帶數字的時鐘錶盤：

isPointInPath() 方法接收 x 和 y 坐標作為參數，用於在路徑被關閉之前確定畫布上的某一點是否位於路徑上。

繪製文本主要有兩個方法： fillText() 和 strokeText() 。這兩個方法都可以接收 4 個參數：要繪製的文本字符串、x 坐標、y 坐標和可選的最大像素寬度。

兩個方法都以下列 3 個屬性為基礎：

fillText() 方法使用fillStyle 屬性繪製文本， strokeText() 方法使用 strokeStyle 屬性為文本描邊。

通過上下文的變換，可以把處理後的圖像繪製到畫布上。2D 繪製上下文支持各種基本的繪製變換。創建繪製上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣下，所有處理都按描述直接繪製。為繪製上下文應用變換，會導致使用不同的變換矩陣應用處理，從而產生不同的結果。

把原點變換到錶盤的中心：

使用 rotate() 方法旋轉時鐘的錶針：

可以調用 save() 方法，調用這個方法後，當時的所有設置都會進入一個棧結構，得以妥善保管。調用 restore() 方法，在保存設置的棧結構中向前返回一級，恢復之前的狀態。

save() 方法保存的只是對繪圖上下文的設置和變換，不會保存繪圖上下文的內容。

可以使用 drawImage()方法把一幅圖像繪製到畫布上。

以使用三種不同的參數組合。最簡單的調用方式是傳入一個 HTML img 元素，以及繪製該圖像的起點的 x 和 y 坐標。

如果想改變繪製後圖像的大小，可以再多傳入兩個參數，分別表示目標

寬度和目標高度。通過這種方式來縮放圖像並不影響上下文的變換矩陣。

繪製出來的圖像大小會變成 20×30 像素。

可以選擇把圖像中的某個區域繪製到上下文中。 drawImage() 方法的這種調用方式總共需要傳入 9 個參數：要繪製的圖像、源圖像的 x 坐標、源圖像的 y 坐標、源圖像的寬度、源圖像的高度、目標圖像的 x 坐標、目標圖像的 y 坐標、目標圖像的寬度、目標圖像的高度。這樣調用drawImage() 方法可以獲得最多的控制。

2D 上下文會根據以下幾個屬性的值，自動為形狀或路徑繪製出陰影。

要創建一個新的線性漸變，可以調用 createLinearGradient() 方法。這個方法接收 4 個參數：起點的 x 坐標、起點的 y 坐標、終點的 x 坐標、終點的 y 坐標。調用這個方法後，它就會創建一個指定大小的漸變，並返回

CanvasGradient 對象的實例。

創建了漸變對象後，下一步就是使用 addColorStop() 方法來指定色標。這個方法接收兩個參數：色標位置和 CSS 顏色值。色標位置是一個 0（開始的顏色）到 1（結束的顏色）之間的數字。

為了讓漸變覆蓋整個矩形，而不是僅應用到矩形的一部分，矩形和漸變對

象的坐標必須匹配才行。

要創建徑向漸變（或放射漸變），可以使用 createRadialGradient() 方法。這個方法接收 6 個參數，對應着兩個圓的圓心和半徑。前三個參數指定的是起點圓的原心（x 和 y）及半徑，後三個參數指定的是終點圓的原心（x 和 y）及半徑。

模式其實就是重複的圖像，可以用來填充或描邊圖形。要創建一個新模式，可以調用createPattern() 方法並傳入兩個參數：一個 HTML img 元素和一個表示如何重複圖像的字符串。其中，第二個參數的值與 CSS 的 background-repeat 屬性值相同，包括 “repeat” 、 “repeat-x” 、”repeat-y” 和 “no-repeat” 。

createPattern() 方法的第一個參數也可以是一個 video 元素，或者另一個 canvas 元素。

2D 上下文的一個明顯的長處就是，可以通過 getImageData() 取得原始圖像數據。這個方法接收4 個參數：要取得其數據的畫面區域的 x 和 y 坐標以及該區域的像素寬度和高度。

取得左上角坐標為(10,5)、大小為 50×50 像素的區域的圖像數據：

返回的對象是 ImageData 的實例。每個 ImageData 對象都有三個屬性： width 、 height 和data 。其中 data 屬性是一個數組，保存着圖像中每一個像素的數據。

在 data 數組中，每一個像素用4 個元素來保存，分別表示紅、綠、藍和透明度值。

數組中每個元素的值都介於 0 到 255 之間（包括 0 和 255）。

還有兩個會應用到 2D 上下文中所有繪製操作的屬性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一個介於 0 和 1 之間的值（包括 0和 1），用於指定所有繪製的透明度。默認值為 0。如果所有後續操作都要基於相同的透明度，就可以先把 globalAlpha 設置為適當

值，然後繪製，最後再把它設置回默認值 0。

第二個屬性 globalCompositionOperation 表示後繪製的圖形怎樣與先繪製的圖形結合。

WebGL 是針對 Canvas 的 3D 上下文。

WebGL是從 OpenGL ES 2.0 移植到瀏覽器中的，而 OpenGL ES 2.0 是遊戲開發人員在創建計算機圖形圖像時經常使用的一種語言。WebGL 支持比 2D 上下文更豐富和更強大的圖形圖像處理能力。

WebGL 涉及的複雜計算需要提前知道數值的精度，而標準的 JavaScript 數值無法滿足需要。為此，WebGL 引入了一個概念，叫類型化數組（typed arrays）。類型化數組也是數組，只不過其元素被設置為特定類型的值。

類型化數組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內存中指定的字節數，但不會指定這些字節用於保存什麼類型的數據。通過 ArrayBuffer 所能做的，就是為了將來使用而分配一定數量的字節。

創建了 ArrayBuffer 對象後，能夠通過該對象獲得的信息只有它包含的字節數，方法是訪問其byteLength 屬性：

使用 ArrayBuffer （數組緩衝器類型）的一種特別的方式就是用它來創建數組緩衝器視圖。其中，最常見的視圖是 DataView ，通過它可以選擇 ArrayBuffer 中一小段字節。為此，可以在創建 DataView實例的時候傳入一個 ArrayBuffer 、一個可選的字節偏移量（從該字節開始選擇）和一個可選的要選擇的字節數。

實例化之後， DataView 對象會把字節偏移量以及字節長度信息分別保存在 byteOffset 和byteLength 屬性中。

類型化視圖一般也被稱為類型化數組，因為它們除了元素必須是某種特定的數據類型外，與常規的數組無異。

類型化數組是 WebGL 項目中執行各種操作的重要基礎。

目前，主流瀏覽器的較新版本大都已經支持 canvas 標籤。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對於 WebGL 而言，目前還只有 Firefox 4+和 Chrome 支持它。

html5 Canvas 如何自適應屏幕大小？

用JS調製屏幕大小。

1.CSS 方面：去掉所有元素的外間距、內邊距，html 和 body 寬高設為 100%，canvas 元素 display 設為 block。

2.JS 方面：監聽窗口的 resize 事件，在窗口大小改變的同時調整 canvas 的大小。

3.完整代碼這裡我們使用 jQuery 來處理窗口尺寸改變事件響應，以及屬性設置。

4.同時使用 $(window).get(0).innerHeight 獲取窗口高度，而不是 $(window).height()。是因為後者效果並不完美，無法返回所有瀏覽器窗口的完整高度值，這樣瀏覽器窗口中 canvas 元素和滾動條的四周可能會仍存在白色區域。

5.代碼公式：!DOCTYPE htmlhtmlheadmeta charset=”utf-8″title/titlescript src=”jquery-3.1.1.js”/scriptstyle* {margin: 0;padding: 0;}html, body {height: 100%;width: 100%;}canvas {display: block;background: #D6F8FF;}/stylescript type=”text/javascript”$(function() {//添加窗口尺寸改變響應監聽$(window).resize(resizeCanvas);//頁面加載後先設置一下canvas大小resizeCanvas();})//canvasfunctionresizeCanvas{$(“#myCanvas”).attr(“width”$(window).get(0).innerWidth);$(“#myCanvas”).atr(“height”, $(window).get(0).innerHeight);};/script/headbodycanvas id=”myCanvas” width=”400″ height=”200″/body。

/html

canvas 自適應屏幕的問題，能否鋪滿整個屏幕，並且畫布不是等比例放大？

能。具體參考以下方法：

直接設置canvas的style。width:100%;height:100%試試。

canvas width=”100″ height=”100″ style=”background-color: #ff0000;width:100%;height:100%;”/canvas。

可以用JS監控屏幕大小，然後調整Canvas的大小。在代碼中加入JS

$(window).resize(resizeCanvas);

function resizeCanvas()

{canvas.attr(“width”, $(window).get(0).innerWidth);

canvas.attr(“height”, $(window).get(0).innerHeight);

context.fillRect(0, 0, canvas.width(), canvas.height());};

resizeCanvas();

就可以了。

canvas 標籤只是圖形容器，您必須使用腳本來繪製圖形。

Canvas 對象表示一個 HTML 畫布元素 -canvas。它沒有自己的行為，但是定義了一個 API 支持腳本化客戶端繪圖操作。

你可以直接在該對象上指定寬度和高度，但是，其大多數功能都可以通過CanvasRenderingContext2D 對象獲得。 這是通過 Canvas 對象的getContext() 方法並且把直接量字符串 “2d” 作為唯一的參數傳遞給它而獲得的。

canvas 標記在 Safari 1.3 中引入，在製作此參考頁時，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，canvas 標記及其 API 可以使用位於excanvas點sourceforge點net的 ExplorerCanvas 開源項目來模擬。

提示：如果希望學習如何使用 canvas 來繪製圖形，可以訪問 Mozilla 提供的Canvas 教程（英文）以及相應的中文 Canvas 教程。