您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)HTML5中Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
翻轉(zhuǎn)、移動(dòng)、平移、放大、縮小
XML/HTML Code復(fù)制內(nèi)容到剪貼板
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 放大與縮小 context.beginPath(); context.strokeStyle = "#000000"; context.strokeRect(10,10,150,100); // 放大3倍 context.scale(3,3); context.beginPath(); context.strokeStyle = '#cccccc'; context.strokeRect(10,10,150,100) // 縮小 context.scale(0.5,0.5); context.beginPath(); context.strokeStyle = '#cccccc'; context.strokeRect(10,10,150,100) // 翻轉(zhuǎn) var img = new Image(); img.src = 'images/1.jpg'; img.onload = function(){ context.drawImage(img, 10,10); context.scale(1, -1); context.drawImage(img, 0, -500); } // 平移 context.beginPath(); context.strokeStyle = '#000000'; context.strokeRect(10,101,150,100); // x移動(dòng) 50 y 移動(dòng)100 context.translate(50,100); context.beginPath(); context.strokeStyle = '#cccccc'; context.strokeRect(10,10,150,100); // 旋轉(zhuǎn) context.beginPath(); context.strokeStyle = '#000000'; context.strokeRect(200,50,100,50); // 默認(rèn)旋轉(zhuǎn)是根據(jù)0,0中心,使用translate可以按照自己的設(shè)置的中心旋轉(zhuǎn) context.translate(250,75); context.rotate(45 * Math.PI /180); context.translate(-250, -75); context.beginPath(); context.strokeStyle = '#cccccc'; context.strokeRect(200,50,100,50); // transform 矩陣 context.beginPath(); context.strokeStyle = '#000000'; context.strokeRect(10,10,150,100); context.transform(3,0,0,3,0,0); context.beginPath(); context.strokeStyle = '#cccccc'; context.strokeRect(10,10,150,100); }
漸變、圖像組合效果、顏色翻轉(zhuǎn)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
var canvas = document.getElementById('canvas'); if (canvas.getContext) { var context = canvas.getContext('2d'); // 線性繪制漸變 var grd = context.createLinearGradient(0,0,200,100); // postion 必須是0.1-1.0之間的豎直,表示漸變中顏色的地點(diǎn)相對(duì)地位,color表示顏色 grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, "#ff0000"); context.fillStyle = grd; context.fillRect(0,0, 200,100); // 徑向漸變 var grd = context.createRadialGradient(100,100,10,100,100,50); grd.addColorStop(0.1, "#00ff00"); grd.addColorStop(0.8, '#ff0000'); context.fillStyle = grd; context.fillRect(0,0,200,200); // 圖像組合效果 context.fillStyle = '#00ff00'; context.fillRect(10,10,50,50); // 新繪圖 //context.globalCompositeOperation = "source-over"; // 只繪制新內(nèi)容,刪除其他所有內(nèi)容 context.globalCompositeOperation = 'copy'; // 圖形重疊的地方,其顏色值相減后決定 context.globalCompositeOperation = 'darker'; // 畫布上已經(jīng)有的內(nèi)容只會(huì)載和其他圖形重疊的地方保留 context.globalCompositeOperation = 'destination-atop'; // 參考 http://www.w3school.com.cn/htmldom/prop_canvasrenderingcontext2d_globalcompositeoperation.asp context.beginPath(); context.fillStyle = '#ff0000'; context.arc(50,50,30,0, 2 * Math.PI); context.fill(); // 顏色翻轉(zhuǎn) var img = new Image(); img.src = 'images/1.jpg'; img.onload = function(){ context.drawImage(img, 0,0, 1, 1); var imgData = context.getImageData(0,0, 1,1); var pixels = imgData.data; console.log(pixels); for(var i = 0, n = pixels.length; i < n; i+=4) { pixels[i] = 255 - pixels[i]; pixels[i+1] = 255 - pixels[i + 1]; pixels[i+2] = 255 - pixels[i + 2]; } context.putImageData(imgData, 250, 0); } }
關(guān)于“HTML5中Canvas實(shí)現(xiàn)圖片縮放、翻轉(zhuǎn)、顏色漸變的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。