您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)canvas如何實現(xiàn)圖片鏡像翻轉(zhuǎn)的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
1. 通過canvas自帶的畫布方法進行翻轉(zhuǎn)
var img = new Image(); //這個就是 img標簽的dom對象 img.src = './sy.png'; img.onload = function () { //圖片加載完成后,執(zhí)行此方法 ctx.drawImage(img, posx, posy, 210, 80); };
play.addEventListener('click', function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//清除畫布 //位移來做鏡像翻轉(zhuǎn) ctx.translate(210+ posx * 2, 0); ctx.scale(-1, 1); //左右鏡像翻轉(zhuǎn) //ctx.translate(0, 160 + posy * 2); //ctx.scale(1, -1); //上下鏡像翻轉(zhuǎn) ctx.drawImage(img, 0, 0, 210, 80); });
2.像素點的鏡像翻轉(zhuǎn)方法
//豎向像素反轉(zhuǎn) function imageDataVRevert(sourceData, newData) { for (var i = 0, h = sourceData.height; i < h; i++) { for (var j = 0, w = sourceData.width; j < w; j++) { newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[(h - i) * w * 4 + j * 4 + 0]; newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[(h - i) * w * 4 + j * 4 + 1]; newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[(h - i) * w * 4 + j * 4 + 2]; newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[(h - i) * w * 4 + j * 4 + 3]; } } return newData; }
//橫向像素反轉(zhuǎn) function imageDataHRevert(sourceData, newData) { for (var i = 0, h = sourceData.height; i < h; i++) { for (j = 0, w = sourceData.width; j < w; j++) { newData.data[i * w * 4 + j * 4 + 0] = sourceData.data[i * w * 4 + (w - j) * 4 + 0]; newData.data[i * w * 4 + j * 4 + 1] = sourceData.data[i * w * 4 + (w - j) * 4 + 1]; newData.data[i * w * 4 + j * 4 + 2] = sourceData.data[i * w * 4 + (w - j) * 4 + 2]; newData.data[i * w * 4 + j * 4 + 3] = sourceData.data[i * w * 4 + (w - j) * 4 + 3]; } } return newData; } `` var img = new Image(); //這個就是 img標簽的dom對象 img.src = './sy.png'; img.onload = function () { //圖片加載完成后,執(zhí)行此方法 ctx.drawImage(img, 0, 0, 210, 80); }; //像素點操作 var imgData = ctx.getImageData(0, 0, 210, 80); var newImgData = ctx.getImageData(0, 0, 210, 80); // var newImgData = ctx.getImageData(0, 0, w, h); ctx.putImageData(imageDataVRevert(newImgData, imgData), 0, 0); //上下翻轉(zhuǎn) // ctx.putImageData(imageDataHRevert(newImgData, imgData), 0, 0);//左右翻轉(zhuǎn)~~~~
感謝各位的閱讀!關(guān)于“canvas如何實現(xiàn)圖片鏡像翻轉(zhuǎn)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。