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的剪切方法来模拟滚动了。