javascript+canvas制作九宮格小程序
更新時(shí)間:2014年12月28日 09:46:38 投稿:hebedich
這篇文章主要介紹了javascript+canvas制作九宮格小程序,效果非常棒,這里推薦給有需要的小伙伴們
js核心代碼
復(fù)制代碼 代碼如下:
/*
*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
代碼很簡(jiǎn)潔,效果卻非常炫酷,小伙伴們學(xué)會(huì)了嗎?
您可能感興趣的文章:
- 原生JS實(shí)現(xiàn)九宮格抽獎(jiǎng)效果
- js實(shí)現(xiàn)九宮格拼圖小游戲
- 基于javascript實(shí)現(xiàn)九宮格大轉(zhuǎn)盤效果
- javascript九宮格圖片隨機(jī)打亂位置的實(shí)現(xiàn)方法
- js實(shí)現(xiàn)九宮格的隨機(jī)顏色跳轉(zhuǎn)
- js實(shí)現(xiàn)九宮格抽獎(jiǎng)
- js實(shí)現(xiàn)九宮格圖片半透明漸顯特效的方法
- jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
- js實(shí)現(xiàn)九宮格布局效果
- 原生JS生成九宮格
相關(guān)文章
JavaScript高級(jí)程序設(shè)計(jì) 擴(kuò)展--關(guān)于動(dòng)態(tài)原型
前文是基于《JavaScript高級(jí)程序設(shè)計(jì)》中關(guān)于對(duì)象創(chuàng)建的筆記和總結(jié)。2010-11-11JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果,涉及javascript針對(duì)鼠標(biāo)事件與頁面樣式的操作技巧,需要的朋友可以參考下2015-06-06js仿微博實(shí)現(xiàn)統(tǒng)計(jì)字符和本地存儲(chǔ)功能
這篇文章主要介紹了js仿微博實(shí)現(xiàn)統(tǒng)計(jì)字符和本地存儲(chǔ)功能的相關(guān)資料,需要的朋友可以參考下2015-12-12setTimeout()遞歸調(diào)用不加引號(hào)出錯(cuò)的解決方法
用了setTimeout()想實(shí)現(xiàn)遞歸調(diào)用,如果第一個(gè)參數(shù)不加引號(hào)的話,就會(huì)出錯(cuò),下面與大家分享下該如何解決2014-09-09JS實(shí)現(xiàn)兼容各瀏覽器解析XML文檔數(shù)據(jù)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)兼容各瀏覽器解析XML文檔數(shù)據(jù)的方法,涉及javascript對(duì)XML文件的解析技巧,并根據(jù)各瀏覽器進(jìn)行了相關(guān)調(diào)整,具有良好的兼容性,需要的朋友可以參考下2015-06-06