HTML5利用Canvas繪製圖形(使用影象、裁剪區域、使用文字。陰影效果和操作畫素)
阿新 • • 發佈：2019-02-09
使用影象
在canvas中插入影象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function Draw(){ //使用三種方式插入影象 var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var newImg=new Image(); //使用Image()建構函式建立影象物件 newImg.src="../img/3.jpg"; newImg.onload=function(){ //從左上角開始繪製圖像 context.drawImage(newImg,0,0); //從指定座標開始繪製圖像，並設定影象寬和高 指定這些引數可以使得影象可以縮放 context.drawImage(newImg,250,100,150,200); //裁剪一部分影象放在左上角，並稍微放大 context.drawImage(newImg,90,80,100,100,0,0,120,120); } } window.addEventListener("load",Draw,false); </script> </head> <body> <canvas id="canvas" width="400" height="300">你的瀏覽器不支援該功能!</canvas> </body> </html>
三種方法插入圖片的效果
裁剪區域
在路徑繪圖中，我們使用了兩大繪圖方法，即用於繪製線條的 stroke()方法和用於填充區域的fill()方法。關於路徑的處理，還用一種方法叫做裁剪方法clip()。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>裁剪區域</title> <script type="text/javascript"> function Draw(){ //使用裁剪區域繪圖 var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var newImg=new Image(); //使用Image()建構函式建立影象物件 newImg.src="../img/3.jpg"; newImg.onload=function(){ //設定一個圓形的裁剪區域 ArcClip(context); //從左上角開始繪製圖像 context.drawImage(newImg,0,0); //設定全域性半透明 context.globalAlpha=0.6; //使用路徑繪製的矩形 FillRect(context); } } function ArcClip(context){ context.beginPath(); context.arc(150,150,100,0,Math.PI*2,true);//設定一個圓形的繪圖路徑 context.clip(); //裁剪區域 } //使用路徑繪製的矩形 function FillRect(context){ context.beginPath(); context.rect(150,150,90,90); context.fillStyle="#f90"; context.fill(); } window.addEventListener("load",Draw,false); </script> </head> <body> <canvas id="canvas" width="400" height="300">你的瀏覽器不支援該功能!</canvas> </body> </html>
高大上效果
注：在繪製圖片之前，，首先使用方法 ArcClip(context)設定一個圓形裁剪的區域：先設定一個圓形的繪圖路徑，再呼叫 clip()方法，即完成了區域的裁剪。接著繪製了影象，把載入的圖片，從畫布的左上角開始繪製，可以看見，只有在裁剪區域裡才有繪製。最後，又使用了路徑的方法回執了矩形，並填充了半透明的顏色，也只在裁剪區域內有繪製。
把Draw函式做一下改動就可以取消裁剪區域
function Draw2(){ //使用裁剪區域繪圖 var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var newImg=new Image(); //使用Image()建構函式建立影象物件 newImg.src="../img/3.jpg"; newImg.onload=function(){ //儲存當前狀態 context.save(); //設定一個圓形的裁剪區域 ArcClip(context); //從左上角開始繪製圖像 context.drawImage(newImg,0,0); //恢復被儲存的狀態 context.restore(); //設定全域性半透明 context.globalAlpha=0.6; //使用路徑繪製的矩形 FillRect(context); } } function ArcClip(context){ context.beginPath(); context.arc(150,150,100,0,Math.PI*2,true);//設定一個圓形的繪圖路徑 context.clip(); //裁剪區域 } //使用路徑繪製的矩形 function FillRect(context){ context.beginPath(); context.rect(150,150,90,90); context.fillStyle="#f90"; context.fill(); } window.addEventListener("load",Draw2,false);
仔細觀察一下與上幅圖的區別
在裁剪區域之前，首先呼叫了save()方法儲存了當前上下文的狀態；在裁剪區域內繪製了圖片之後，呼叫了 restore()方法恢復了上下文狀態，即裁剪區域之前的狀態，所以在接下來的繪圖中不再受裁剪區域限制。如圖中的矩形已經超出了裁剪區域的範圍。
使用文字
在Canvas中，也可以繪製文字。可以使用填充的方法繪製，也可以使用描邊的方法繪製，並且在繪製文字之前，還可以設定文字的文字樣式和對齊方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>繪製文字</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//填充方式繪製文字
context.fillStyle="#f90";
context.font="bold 36px impact";
//fillText(text,x,y,maxwidth) text要繪製的文字，x起點橫座標，y縱座標,maxwidth可選引數，表示文字的最大寬度
context.fillText("Hello World!",10,50);
//描邊方式繪製文字
context.strokeStyle="#90";
context.font="bold italic 36px impact";
context.strokeText("Hello World!",10,100);
//度量繪製文字寬度
var text="Hllo World!";
context.fillStyle="#90";
context.font="bold 30px impact";
//度量文字是以當前設定的文字樣式為基礎。
var tm=context.measureText(text);
//根據已經設定的文字樣式度量文字
context.fillText(text,10,150);
context.fillText(tm.width,tm.width+15,150);
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的瀏覽器不支援canvas</canvas>
</body>
</html>吶吶，執行效果，感覺如何
陰影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>繪製文字</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
//設定陰影屬性
context.shadowColor="#666"; //顏色
context.shadowOffsetX=5;//陰影的橫向位移量，向右為正，左為負
context.shadowOffsetY=5; //縱向位移量，向下為正，上為負
context.shadowBlur=5.5; //高斯模糊，值越大，陰影邊緣越模糊
//填充方式繪製文字
context.fillStyle="#f90";
context.font="bold 36px impact";
context.fillText("Hello World!",10,50);
context.fillStyle="#90";
context.arc(100,100,30,0,Math.PI*2,false);
context.fill();
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的瀏覽器不支援canvas</canvas>
</body>
</html>是不是再次感覺到了神奇
操作畫素
在Canvas中，繪圖API還提供了畫素級的操作方法，分別是：createImageData()。getImageData()和putImageData()。使用這些方法，可以直接操縱底層的畫素資料。
先來體會一下效果
實現方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>操作畫素</title>
<script type="text/javascript">
function Draw(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var newImg=new Image();
newImg.src="../img/3.jpg";
newImg.onload=function(){
context.drawImage(newImg,0,0,400,300);
context.save();
//獲取影象資料
var imageData=context.getImageData(0,0,400,300);
//修改ImageData物件的data資料，處理為反向
for(var i=0,n=imageData.data.length;i<n;i+=4){
//紅色部分
imageData.data[i+0]=255-imageData.data[i+0];
//綠色部分
imageData.data[i+1]=255-imageData.data[i+1];
//藍色部分
imageData.data[i+2]=255-imageData.data[i+2];
}
//繪製該影象資料
context.putImageData(imageData,200,150);
}
}
window.addEventListener("load",Draw,false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">你的瀏覽器不支援canvas</canvas>
</body>
</html>注：這個也要放在伺服器上運行了，不能直接本地測試