JavaScript基礎——使用Canvas繪圖

更新時間：2016年11月02日 09:07:34 作者：A_山水子農(nóng)

這篇文章主要介紹了JavaScript基礎——使用Canvas繪圖，Canvas也真的跟現(xiàn)實生活中的畫布非常相似，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

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

1、基本用法

要使用<canvas>元素，必須先設置其width和height屬性，指定可以繪圖的區(qū)域大小，出現(xiàn)在開始后結束標簽中的內(nèi)容是后備信息，如果瀏覽器不支持<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"); 
//取得圖像的數(shù)據(jù)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個參數(shù)：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); 
//取得圖像的數(shù)據(jù)URI 
var imgURI=drawing.toDataURL("image/png"); 
//顯示圖像 
var image=document.createElement("img"); 
image.src=imgURI; 
document.body.appendChild(image); 
} 
</script> 
</body> 
</html>

（3）、繪制路徑

要繪制路徑，首先必須調(diào)用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。最后一個參數(shù)表示是否按逆時針方向計算，值為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)"; 
//最后必須調(diào)用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); 
//繪制內(nèi)圓 
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)"; 
//最后必須調(diào)用stroke()方法，這樣才能把圖像繪制到畫布上。 
context.stroke(); 
} 
</script> 
</body> 
</html>

（4）、繪制文本

繪制文本主要有兩個方法：fillText()和strokeText()。這兩個方法接收4個參數(shù)：要繪制的文本字符串、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); 
//繪制內(nèi)圓 
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)"; 
//最后必須調(diào)用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); 
//繪制內(nèi)圓 
context.moveTo(194,100);//將繪圖游標移動到（x,y），不畫線 
context.arc(100,100,94,0,2*Math.PI,false); 
//變換原點 
/*translate(x,y):將坐標原點移動到（x,y）。執(zhí)行這個變換后，坐標(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)"; 
//最后必須調(diào)用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)"http://設置陰影顏色 
context.shadowOffsetX=5;//設置形狀或路徑x軸方向的陰影偏移量，默認值為0； 
context.shadowOffsetY=5;//設置形狀或路徑y(tǒng)軸方向的陰影偏移量，默認值為0； 
context.shadowBlur=4;//設置模糊的像素數(shù)，默認值為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上下文來創(chuàng)建和修改。要創(chuàng)建一個新的先行漸變，可以調(diào)用createLinearGradient()方法。這個方法接收4個參數(shù)：起點的x坐標，起點的y坐標，終點的x坐標，終點的y坐標。創(chuàng)建漸變對象后，下一步就是使用addColorStop()方法來指定色標，這個方法接收兩個參數(shù)：色標位置和css顏色值。色標位置是一個0（開始的顏色）到1（結束的顏色）之間的數(shù)據(jù)。

 <!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>

為了確保漸變與形狀對齊，有時候可以考慮使用函數(shù)來確保坐標合適，例如：

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>

要創(chuàng)建徑向漸變（或放射漸變），可以使用createRadialGradient()方法，這個方法接收6個參數(shù)，對應著兩個圓的圓心和半徑，

<!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); 
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
這篇文章主要介紹了Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】的相關資料,需要的朋友可以參考下
2016-06-06
Javascript封裝DOMContentLoaded事件實例
這篇文章主要介紹了Javascript封裝DOMContentLoaded事件實例,DOMContentLoaded是FF,Opera 9的特有的Event, 當所有DOM解析完以后會觸發(fā)這個事件,需要的朋友可以參考下
2014-06-06
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識點。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
js實現(xiàn)數(shù)字每三位加逗號的方法
這篇文章主要介紹了js實現(xiàn)數(shù)字每三位加逗號的方法,以實例形式講述了js實現(xiàn)數(shù)字每三位加逗號的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
JavaScript如何獲取到導航條中HTTP信息
這篇文章主要為大家詳細介紹了JavaScript如何獲取到導航條中HTTP信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
詳解JavaScript數(shù)據(jù)類型和判斷方法
這篇文章主要介紹了JavaScript數(shù)據(jù)類型和判斷方法的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
2020-09-09
JavaScript深拷貝與淺拷貝原理深入探究
深拷貝和淺拷貝是面試中經(jīng)常出現(xiàn)的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關于js深拷貝和淺拷貝的相關資料,需要的朋友可以參考下
2022-10-10
微信小程序如何連接Java后臺
這篇文章主要介紹了微信小程序如何連接Java后臺,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-08-08
webpack打包時如何修改文件名的實現(xiàn)示例
本文主要介紹了webpack打包時如何修改文件名的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
輕松搞定js表單驗證
不用一行代碼和一句提示語就搞定整個表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10