canvas圖片在路線上滾動,canvas滑動事件

本文目錄一覽：

• 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);