HTML5 Canvas實現圖片縮放、翻轉、顏色漸變的代碼

2020-03-24 18:40:39

字體：大中小

來源：轉載

供稿：網友

varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=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) //翻轉 varimg=newImage(); 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移動50y移動100 context.translate(50,100); context.beginPath(); context.strokeStyle='#cccccc'; context.strokeRect(10,10,150,100); //旋轉 context.beginPath(); context.strokeStyle='#000000'; context.strokeRect(200,50,100,50); //默認旋轉是根據0,0中心，使用translate可以按照自己的設置的中心旋轉 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); }
varcanvas=document.getElementById('canvas'); if(canvas.getContext){ varcontext=canvas.getContext('2d'); //線性繪制漸變 vargrd=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); //徑向漸變 vargrd=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 ; //只繪制新內容，刪除其他所有內容 context.globalCompositeOperation='copy'; //圖形重疊的地方，其顏色值相減后決定 context.globalCompositeOperation='darker'; //畫布上已經有的內容只會載和其他圖形重疊的地方保留 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(); //顏色翻轉 varimg=newImage(); img.src='images/1.jpg'; img.onload=function(){ context.drawImage(img,0,0,1,1); varimgData=context.getImageData(0,0,1,1); varpixels=imgData.data; console.log(pixels); for(vari=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); } }html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML教程-定義列表

下一篇：html的盒模型詳解