當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript：使用Canvas绘图

發布時間：2023/12/20 javascript 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript：使用Canvas绘图小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、基本用法
? 要使用<canvas>元素，必須先設置其width和height屬性，指定可以繪圖的區域大小，出現在開始后結束標簽中的內容是后備信息，如果瀏覽器不支持<canvas>元素，就會顯示這些信息。例如

<canvas id="drawing" width="200" height="200">A Drawing of something</canvas>

使用toDataURL()方法，可以導出在<canvas>元素上繪制的圖像。

? ?要繪制路徑，首先必須調用beginPath()方法，表示要開始繪制新路徑。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="420" height="420" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //開始路徑 context.beginPath(); /**繪制弧線，使用arc(x,y,radius,startAngle,endAngle,counterclockwise)方法 *以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結束角度（用弧度表示）分別為startAngle *和endAngle。最后一個參數表示是否按逆時針方向計算，值為false表示順時針方向計算。 */ context.arc(130,130,90,0,2*Math.PI,false); /**arcTo(x1,y1,x2,y2,radius):從上一點開始繪制一條弧線，到(x2,y2)為止，并且以給 *定的半徑radius穿過(x1,y1) */ context.arcTo(310,220,400,130,80) /**bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點開始繪制一條曲線，到（x,y）為 *止，并且以(c1x,c1y)和(c2x,c2y)為控制的。 */ context.bezierCurveTo(320,210,400,250,310,300); /*lineTo(x,y):從上一點開始繪制一條直線，到(x,y)為止*/ context.lineTo(0,300); context.moveTo(130,220); context.lineTo(100,300); /**quadraticCurveTo(cx,cy,x,y):從上一點開始繪制一條二次曲線，到(x,y)為止，并且 *以(cx,cy)作為控制點 */ context.quadraticCurveTo(40,380,130,400); context.lineTo(450,400); /*rect(x,y,width,height):從點（x,y）開始繪制一個矩形路徑*/ context.rect(80,80,100,100) context.strokeStyle="rgba(0,0,255,0.5)"; //最后必須調用stroke()方法，這樣才能把圖像繪制到畫布上。 context.stroke(); } </script> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //開始路徑 context.beginPath(); //繪制外圓 context.arc(100,100,99,0,2*Math.PI,false); //繪制內圓 context.moveTo(194,100); //將繪圖游標移動到（x,y），不畫線 context.arc(100,100,94,0,2*Math.PI,false); //繪制分針 context.moveTo(100,100); context.lineTo(100,15); //繪制時針 context.moveTo(100,100); context.lineTo(35,100);context.strokeStyle="rgba(0,0,255,0.5)"; //最后必須調用stroke()方法，這樣才能把圖像繪制到畫布上。 context.stroke(); } </script> </body> </html>
?
（4）、繪制文本
? ?繪制文本主要有兩個方法：fillText()和strokeText()。這兩個方法接收4個參數：要繪制的文本字符串、x坐標，y坐標和可選的最大像素寬度。這兩個方法有三個屬性：font、textAlign和textBaseline。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //開始路徑 context.beginPath(); //繪制外圓 context.arc(100,100,99,0,2*Math.PI,false); //繪制內圓 context.moveTo(194,100);//將繪圖游標移動到（x,y），不畫線 context.arc(100,100,94,0,2*Math.PI,false); //繪制分針 context.moveTo(100,100); context.lineTo(100,20); //繪制時針 context.moveTo(100,100); context.lineTo(35,100); //添加文字“12” context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle";//文本的基線 context.fillText("12",100,15); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必須調用stroke()方法，這樣才能把圖像繪制到畫布上。 context.stroke(); } </script> </body> </html>

（5）、變換
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //開始路徑 context.beginPath(); //縮放圖像 /*scale(scaleX,scaleY):縮放圖像，在x方向乘以scaleX，在y方向乘以scaleY。 scaleX和scaleY的默認值都是1.0 */ context.scale(0.8,0.8); //繪制外圓 context.arc(100,100,99,0,2*Math.PI,false); //繪制內圓 context.moveTo(194,100);//將繪圖游標移動到（x,y），不畫線 context.arc(100,100,94,0,2*Math.PI,false); //變換原點 /*translate(x,y):將坐標原點移動到（x,y）。執行這個變換后，坐標(0,0)會變成之前由(x,y)表示的點 */ context.translate(100,100); //添加文字“12” context.font="bold 14px Arial"; context.textAlign="center"; context.textBaseline="middle";//文本的基線 context.fillText("12",0,-85); //旋轉表針 /*rotate(angle):圍繞原點旋轉圖像angle弧度*/ context.rotate(1); //繪制分針 context.moveTo(0,0); context.lineTo(0,-80); //繪制時針 context.moveTo(0,0); context.lineTo(-65,0); context.strokeStyle="rgba(0,0,255,0.5)"; //最后必須調用stroke()方法，這樣才能把圖像繪制到畫布上。 context.stroke(); } </script> </body> </html>
?
（6）、繪制圖像
var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); var image=document.getElementById("image"); context.drawImage(image,10,10,20,20);//起點為(10,10)，圖像大小會變成20x20像素； }

（7）、陰影
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //設置陰影 context.shadowColor="rgba(0,0,0,0.5)"//設置陰影顏色 context.shadowOffsetX=5;//設置形狀或路徑x軸方向的陰影偏移量，默認值為0； context.shadowOffsetY=5;//設置形狀或路徑y軸方向的陰影偏移量，默認值為0； context.shadowBlur=4;//設置模糊的像素數，默認值為0，即不模糊。 //繪制紅色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //繪制半透明的藍色矩形context.fillStyle="rgba(0,0,255,1)"; context.fillRect(30,30,50,50); } </script> </body> </html>

（8）、漸變
? 漸變由CanvasGradient實例表示，很容易通過2D上下文來創建和修改。要創建一個新的先行漸變，可以調用createLinearGradient()方法。這個方法接收4個參數：起點的x坐標，起點的y坐標，終點的x坐標，終點的y坐標。創建漸變對象后，下一步就是使用addColorStop()方法來指定色標，這個方法接收兩個參數：色標位置和css顏色值。色標位置是一個0（開始的顏色）到1（結束的顏色）之間的數據。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //設置漸變 var gradient=context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); //繪制紅色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //繪制漸變矩形context.fillStyle=gradient; context.fillRect(30,30,50,50); } </script> </body> </html>

為了確保漸變與形狀對齊，有時候可以考慮使用函數來確保坐標合適，例如：
function createRectLinearGradient(context,x,y,width,height){
? ?return context.createLinearGradient(x,y,x+width,y+height);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //設置漸變 var gradient=createRectLinearGradient(context,30,30,50,50); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); //繪制紅色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //繪制漸變矩形context.fillStyle=gradient; context.fillRect(30,30,50,50); } //確保漸變與形狀對齊 function createRectLinearGradient(context,x,y,width,height){return context.createLinearGradient(x,y,x+width,y+height); } </script> </body> </html>

? 要創建徑向漸變（或放射漸變），可以使用createRadialGradient()方法，這個方法接收6個參數，對應著兩個圓的圓心和半徑，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas繪圖</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d"); //設置漸變 var gradient=context.createRadialGradient(55,55,10,55,55,30); gradient.addColorStop(0,"white"); gradient.addColorStop(1,"black"); //繪制紅色矩形 context.fillStyle="red"; context.fillRect(10,10,50,50); //繪制漸變矩形context.fillStyle=gradient; context.fillRect(30,30,50,50); } </script> </body> </html>
（9）、模式
模式其實就是重復的圖像，可以用來填充或描邊圖形
var drawing=document.getElementById("drawing"); //確定瀏覽器支持<canvas>元素 if(drawing.getContext){ //取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 var context=drawing.getContext("2d");var image=document.images[0]; pattern=context.createPattern(image,"repeat");context.fillStyle=pattern; context.fillRect(10,10,150,150); }

總結

以上是生活随笔為你收集整理的JavaScript：使用Canvas绘图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于stm32的蓝牙开关
下一篇： gradle idea java ssm