JavaScript基礎——使用Canvas繪圖
更新時間：2016年11月02日 09:07:34 作者：A_山水子農
這篇文章主要介紹了JavaScript基礎——使用Canvas繪圖，Canvas也真的跟現實生活中的畫布非常相似，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
最近在學習Canvas畫圖的方法，最近有時間做了個整理，如下：
1、基本用法
要使用<canvas>元素，必須先設置其width和height屬性，指定可以繪圖的區(qū)域大小，出現在開始后結束標簽中的內容是后備信息，如果瀏覽器不支持<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）。執(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)";
//最后必須調用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;//設置模糊的像素數，默認值為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)建一個新的先行漸變，可以調用createLinearGradient()方法。這個方法接收4個參數：起點的x坐標，起點的y坐標，終點的x坐標，終點的y坐標。創(chuàng)建漸變對象后，下一步就是使用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>
要創(chuàng)建徑向漸變（或放射漸變），可以使用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);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Bootstrap彈出帶合法性檢查的登錄框實例代碼【推薦】的相關資料,需要的朋友可以參考下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實現數字每三位加逗號的方法,以實例形式講述了js實現數字每三位加逗號的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了JavaScript如何獲取到導航條中HTTP信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了JavaScript數據類型和判斷方法的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
深拷貝和淺拷貝是面試中經常出現的,主要考察對基本類型和引用類型的理解深度,這篇文章主要給大家介紹了關于js深拷貝和淺拷貝的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了微信小程序如何連接Java后臺,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
本文主要介紹了webpack打包時如何修改文件名的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
不用一行代碼和一句提示語就搞定整個表單驗證,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10