js和canvas實現數字滾動,canvas 滾動條

本文目錄一覽：

• 1、Unity3d如何實現滾動文本框
• 2、如何實現canvas的圖片輪播
• 3、怎樣canvas畫布上添加滾動條，顯示更多數據
• 4、HTML5 在CANVAS標籤裡面增加滾動條

Unity3d如何實現滾動文本框

一、在Canvas新建一個Panel，add scroll Rect和mask組件，Rect Transform設成 middle-center，因為這樣才能設置大小和text控件相同大小

二、Panel下新建一個Text，Vertical Overflow設置成Overflow，然後add Content Size Fitter這個Layout，該Layout的Vertical Fit設置為Perferred Size，然後調整大小和在Panel中的位置

三、新建一個ScrollBar，不在Panel之下，和Panel並列，Direction設置成Bottan to Top。設置成Panel同樣的高度，並挨在一起，這樣看起來就是一個文本框右邊帶着一個垂直滾動條

四、Panel的Scroll Rect組件的Content指定Text，Vertical Scrollbar指定上面新建的ScrollBar。

如何實現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;

}

怎樣canvas畫布上添加滾動條，顯示更多數據

canvas是不能添加滾動條，

可以把canvas畫布放在一個層里，再給這個層添加滾動條，

div style=”width:300px; height:200px; overflow:auto”

canvas id=”idline” width=”750″ height=”400″ style=”border:2px solid gray”/canvas

/div

HTML5 在CANVAS標籤裡面增加滾動條

使用緩存Canvas，將中間的部分緩存，然後drawImage將緩存canvas畫到主畫布上，這樣你可以使用drawImage的剪切方法來模擬滾動了。