您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何使用HTML5 Canvas實現(xiàn)圖片縮放、顏色漸變效果”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用HTML5 Canvas實現(xiàn)圖片縮放、顏色漸變效果”這篇文章吧。
翻轉(zhuǎn)、移動、平移、放大、縮小
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移動 50 y 移動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之間的豎直,表示漸變中顏色的地點相對地位,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)容只會載和其他圖形重疊的地方保留
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);
}
}
以上是“如何使用HTML5 Canvas實現(xiàn)圖片縮放、顏色漸變效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。