DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript基礎——使用Canvas繪圖
JavaScript基礎——使用Canvas繪圖
編輯：關於JavaScript     

最近在學習Canvas畫圖的方法，最近有時間做了個整理，如下：

1、基本用法

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

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

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

var drawing=document.getElementById("drawing"); 
//確定浏覽器支持<canvas>元素 
if(drawing.getContext){ 
//取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 
var context=drawing.getContext("2d"); 
//取得圖像的數據URI 
var imgURI=drawing.toDataURL("image/png"); 
alert(imgURI); 
//顯示圖像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
}

2、2D上下文

（1）、填充和描邊

填充：用指定的樣式填充圖形；描邊：就是只在圖形的邊緣畫線。fillStyle和strokeStyle兩個屬性的值可以是字符串、漸變對象或模式對象。

var drawing=document.getElementById("drawing"); 
//確定浏覽器支持<canvas>元素 
if(drawing.getContext){ 
//取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 
var context=drawing.getContext("2d");</span> 
<span style="font-size:14px;">//此程序由於沒有圖像，填充和描邊不會顯示 
context.strokeStyle="#0000ff"; 
context.fillStyle="red"; 
}

（2）、繪制矩形

  矩形是唯一一種可以直接在2D上下文繪制的形狀。與矩形有關的方法包括：fillRec()、strokeRect()和clearRect()。這三個方法都能接收4個參數：x坐標、y坐標、寬度和高度。

 <!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.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//繪制半透明的藍色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//繪制紅色描邊矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//繪制半透明的藍色描邊矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在兩個矩形重疊的地方清除一個小矩形 
context.clearRect(30,30,30,30); 
} 
</script> 
</body> 
</html>

下面為使用toDataURL()方法，導出在canvas元素上繪制的圖像程序如下：

<!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> 
<br /> 
<h3>下面為使用toDataURL()方法，導出在canvas元素上繪制的圖像。</h3> 
<script> 
var drawing=document.getElementById("drawing"); 
//確定浏覽器支持<canvas>元素 
if(drawing.getContext){ 
//取得繪圖上下文對象的引用，“2d”是取得2D上下文對象 
var context=drawing.getContext("2d"); 
//繪制紅色矩形 
context.fillStyle="red"; 
context.fillRect(10,10,50,50); 
//繪制半透明的藍色矩形 
  context.fillStyle="rgba(0,0,255,0.5)"; 
context.fillRect(30,30,50,50); 
//繪制紅色描邊矩形 
context.strokeStyle="red"; 
context.strokeRect(10,90,50,50); 
//繪制半透明的藍色描邊矩形 
  context.strokeStyle="rgba(0,0,255,0.5)"; 
context.strokeRect(30,120,50,50); 
//在兩個矩形重疊的地方清除一個小矩形 
context.clearRect(30,30,30,30); 
//取得圖像的數據URI 
var imgURI=drawing.toDataURL("image/png"); 
//顯示圖像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
} 
</script> 
</body> 
</html>

（3）、繪制路徑

要繪制路徑，首先必須調用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
使用 Node.js 做 Function Test實現方法
Info上周 meeting 上同事說他們現在在用 java 寫 function test，產生了
Vue.js學習筆記之 helloworld
Vue.js 是用於構建交互式的 Web 界面的庫。Vue.js 提供了 MVVM 數據綁定和一個可
javascript實現跨域的方法匯總
由於同源策略的限制，XMLHttpRequest只允許請求當前源（包含域名、協議、端口）的資源。js

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
javascript跨域請求包裝函數與用法示例 JS高級筆記 通過Javascript將數據導出到外部Excel文檔的函數代碼 Firebug Lite使用在IE、Opera、Safari浏覽器 Javascript模擬加速運動與減速運動代碼分享 帶有定位當前位置的百度地圖前端web api實例代碼 js中對函數設置默認參數值的3種方法 NodeJS制作爬蟲全過程（續） JavaScript中操作字符串小結 事件處理器作為浏覽器對象的屬性
熱門推薦
同步文本框內容JS代碼實現 JS+CSS實現的簡單折疊展開多級菜單效果 JS封裝的選項卡TAB切換效果示例 浏覽器環境下JavaScript腳本加載與執行探析之defer與async特性 JS實現樣式清新的橫排下拉菜單效果 JavaScript插件化開發教程（五） 利用vue-router實現二級菜單內容轉換 js調用Flex中的方法並向flex中傳參及flex調用js示例 window.location.href的用法(動態輸出跳轉)
大家都在看
CSS樣式表層疊（cascade）處理沖突 簡介JavaScript中用於處理正切的Math.tan()方法 Javascript高級技巧分享 利用簡單的線條設計充滿典雅風格的封面 CSS HACK 解決兼容的寫法二 YUI網頁布局:自適應寬度的輸入框 用“顏色”區分 HTML優化技巧應用法則(1) js基本ajax寫法示例代碼
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved