快捷導(dǎo)航

javascript+canvas制作九宮格小程序

更新時(shí)間：2014年12月28日 09:46:38 投稿：hebedich

這篇文章主要介紹了javascript+canvas制作九宮格小程序，效果非常棒，這里推薦給有需要的小伙伴們

js核心代碼

/*

 *canvasid:html canvas標(biāo)簽id

 *imageid:html img 標(biāo)簽id

 *gridcountX:x軸圖片分割個(gè)數(shù)

 *gridcountY:y軸圖片分割個(gè)數(shù)

 *gridspace:宮格空隙

 *offsetX：x*y宮格相對(duì)canvas（0，0）X坐標(biāo)偏移量

 **offsetX：x*y宮格相對(duì)canvas（0，0）Y坐標(biāo)偏移量

 *isanimat：是否啟用動(dòng)畫顯示

 */

function ImageGrid(canvasid, imageid, gridcountX, gridcountY, gridspace, offsetX, offsetY, isanimat) {

    var image = new Image();

    var g = document.getElementById(canvasid).getContext("2d");

    var img=document.getElementById(imageid);

    image.src=img.getAttribute("src");

    g.drawImage(image, 0, 0);

    var imagedata = g.getImageData(0, 0, image.width, image.height);

    var grid_width = imagedata.width / gridcountX;

    var grid_height = imagedata.height / gridcountY;

    //動(dòng)畫

    if (isanimat) {

        var x = 0,

            y = 0;

        var inter = setInterval(function() {

            g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height);

            x < gridcountX ? x++ : x = 0;

            if (x == 0) {

                y < gridcountY ? y++ : y = 0;

            }

        }, 200);

        y == gridcountY ? clearInterval(inter) : null;

    } else { //非動(dòng)畫

        for (var y = 0; y < gridcountY; y++) {

            for (var x = 0; x < gridcountX; x++) {

                g.putImageData(imagedata, gridspace * x + offsetX, gridspace * y + offsetY, grid_width * x, grid_height * y, grid_width, grid_height);

            }

        }

    }

}

html代碼

復(fù)制代碼代碼如下:

<canvas id="canvas1" width="900px" height="550px">Canvas demo</canvas>

 <img id="image1" style="display:none" src="http://img.jbzj.com/file_images/article/201412/2014122894620636.jpg"/>

使用方法：

復(fù)制代碼代碼如下:

//eg...

ImageGrid("canvas1", "image1", 3, 3, 2, 220, 0, true); //3*3

ImageGrid("canvas1", "image1", 4, 4, 2, 440, 0, true); //4*4

ImageGrid("canvas1", "image1", 3, 4, 2, 660, 0, false); //3*4

代碼很簡潔，效果卻非常炫酷，小伙伴們學(xué)會(huì)了嗎？

您可能感興趣的文章:

相關(guān)文章

微信小程序使用audio組件播放音樂功能示例【附源碼下載】
這篇文章主要介紹了微信小程序使用audio組件播放音樂功能,結(jié)合實(shí)例形式分析了微信小程序audio組件播放在線音樂相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2017-12-12
Bootstrap按鈕組實(shí)例詳解
單個(gè)按鈕在Web頁面中的運(yùn)用有時(shí)候并不能滿足我們的業(yè)務(wù)需求，常常會(huì)看到將多個(gè)按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等。本文將詳細(xì)介紹Bootstrap按鈕組，感興趣的朋友一起看看吧
2017-07-07
top.location.href 沒有權(quán)限解決方法
以前好像沒有遇到這問題，也可能是沒有在意吧，我的blog內(nèi)容頁都是有判斷的，規(guī)則是，如果top.location不是內(nèi)容頁的話就跳到內(nèi)容頁
2008-08-08
js Calender控件使用詳解
這篇文章主要介紹了js Calender控件使用詳解,需要的朋友可以參考下
2015-01-01
window.event快達(dá)到全瀏覽器支持了，以后使用就方便了
在Tangram群里討論到<a href="#" onclick="baidu.event.preventDefault(event);">的寫法時(shí)，以為標(biāo)準(zhǔn)瀏覽器只能用arguments[0]來獲取到event，結(jié)果nodiseal同學(xué)說已經(jīng)可以這么用了，于是做了以下測(cè)試
2011-11-11
JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)彈性運(yùn)動(dòng)的原理、相關(guān)技術(shù)細(xì)節(jié)與實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-12-12
javascript URL編碼和解碼使用說明
在使用url進(jìn)行參數(shù)傳遞時(shí)，經(jīng)常會(huì)傳遞一些中文名的參數(shù)或URL地址，在后臺(tái)處理時(shí)會(huì)發(fā)生轉(zhuǎn)換錯(cuò)誤。
2010-04-04
js游戲人物上下左右跑步效果代碼分享
這篇文章主要介紹了js游戲人物上下左右跑步效果，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
js實(shí)現(xiàn)簡單購物車模塊
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單購物車模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
微信小程序云函數(shù)使用mysql數(shù)據(jù)庫過程詳解
這篇文章主要介紹了微信小程序云函數(shù)使用mysql數(shù)據(jù)庫過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08