本文目录一览：
- 1、js中在canvas中加入一张背景怎么让背景滚动
- 2、怎样canvas画布上添加滚动条，显示更多数据
- 3、使用canvas实现图片滑动验证
- 4、HTML5 在CANVAS标签里面增加滚动条
- 5、如何实现canvas的图片轮播
- 6、canvas绘制的图片如何让他移动？像我下图这样移动总是有轨迹。
js中在canvas中加入一张背景怎么让背景滚动
html
head
meta charset="utf-8" /
titleLScroll5.html/title
script type="text/javascript"
var LScroll = {
img: null,
sc: null,
scx: null,
at: 0,
flag: true,
loadImg: function(srcs, callback) {
var mg = new Image();
mg.src = srcs;
mg.onload = function() {
callback(this);
}; // callback function
return LScroll.img = mg;
},
init: function(srcs) {
if (!document.body)
document.createElement('body');
if (!LScroll.sc) {
var sc = document.createElement('canvas');
LScroll.scx = sc.getContext('2d');
var callback = function(imgs) { // after onload image can be draw
sc.width = imgs.width / 4;
sc.height = imgs.height; //not style.
sc.style.backgroundColor = 'black';
sc.style.border = 'solid 1px white';
document.body.style.backgroundColor = 'black';
document.body.style.textAlign = 'center';
document.body.appendChild(LScroll.sc = sc);
LScroll.draw(LScroll.sc, LScroll.scx);
};
LScroll.loadImg(srcs, callback);
}
},
draw: function(sc, scx) {
scx.clearRect(0, 0, sc.width, sc.height);
scx.save();
scx.beginPath();
switch (LScroll.flag) {
case true:
if (-LScroll.at == LScroll.img.width - sc.width)
LScroll.flag = !LScroll.flag;
LScroll.at--;
break;
case false:
if (LScroll.at == 0)
LScroll.flag = !LScroll.flag;
LScroll.at++;
}
scx.drawImage(LScroll.img, LScroll.at, 0);
scx.restore();
setTimeout(function() {
LScroll.draw(sc, scx);
}, 10);
}
};
window.onload = function() {
LScroll.init('./Park.jpg');
};
/script
/head
body
/body
/html
怎样canvas画布上添加滚动条，显示更多数据
canvas有一个font属性，用font属性先设定好文字的字体，加粗，倾斜，字号，然后用fillText 或者strokeText插入文字就好了， 给个例子： window.onload=function () { var content = document.getElementById("canvas"); var cxt = content.getCo...
使用canvas实现图片滑动验证
验证码本质是一种区分真实用户和僵尸程序的一种图灵测试。一些黑客会利用机器技术在某些业务应用中进行刷票（多次点击投票）、发广告、窃取客户密码等恶意操作，企业应用通过验证码确定操作者身份为真实用户，才允许进行下一步操作。具体来说，在注册、发帖、发评论、投票、提交密码前添加验证码，可以防止批量注册、发广告、刷票和破解密码等恶意操作。
滑块验证码是验证码的一种，是由图片验证码衍生后的产物。由于滑块验证码安全性更高，趣味性更强，所以多数网站或APP都选择了滑块验证码。比如说之前的b站。
那么滑块验证码的原理是什么呢？为什么拖拽到拼图处，就能判断出是人为操作还是机器人呢？
其实滑块验证码，不仅仅只是完成拼图，前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习建模，结合访问频率、地理位置、历史记录等多个维度信息，快速、准确的返回人机判定结果，故而机器识别+模拟不易通过。
滑块验证需要前后端配合，本文就讲一下前端如何用canvas实现。
每次的拼图照片都是随机产生的，由后端提供
拼图缺口的x,y坐标用random方法随机产生
画完拼图，接下来要画滑块。这里需要用到第二个canvas，利用绝对定位使两个canva位置重合
保证滑块和拼图缺口的图案相同
增加操作条的dom到页面上，给按钮绑定onMouseDown事件
这就实现了简单的前端效果，实际操作中前端需要与后端通信，由后端进行验证返回结果。但其实滑块验证也不够安全，很容易模拟绕过，所以现在的b站也换成了中文验证码。
HTML5 在CANVAS标签里面增加滚动条
使用缓存Canvas，将中间的部分缓存，然后drawImage将缓存canvas画到主画布上，这样你可以使用drawImage的剪切方法来模拟滚动了。
如何实现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绘制的图片如何让他移动？像我下图这样移动总是有轨迹。
你在paint绘制函数里面，在canvas.drawImage绘制图片之前，清除一下canvas，代码如下：
canvas.clearRect(0,0,elem.width,elem.height);