js基礎(使用Canvas畫圖)
阿新 • • 發佈:2019-02-07
HTML5的元素提供了一組JavaScript API,讓我們可以動態地建立圖形和影象。
圖形是在一個特定的上下文中建立的,而上下文物件目前有兩種。第一種是2D上下文,可以執行原始的繪圖操作,
比如:
- 設定填充、描邊顏色和模式;
- 繪製矩形;
- 繪製路徑;
- 繪製文字;
- 建立漸變和模式。
第二種是3D上下文,即WebGL上下文。WebGL是從OpenGLES2.0移植到瀏覽器中的,而OpenGLES2.0是遊戲開發人員在建立計算機圖形影象時經常使用的一種語言。WebGL支援比2D上下文更豐富和更強大的圖形影象處理能力,
比如:
- 用GLSL編寫的頂點和片段著色器;
- 支援型別化陣列,即能夠將陣列中的資料限定為某種特定的陣列型別;
建立和操作紋理。
目前,主流瀏覽器的較新版本大都已經支援標籤。同樣地,這些版本的瀏覽器基本上也都支援2D上下文。
但對於WebGL而言,目前還只有Firefox4+和Chrome支援它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Canvas繪圖</title>
<style>
canvas{
border: 1 px solid dodgerblue;
}
</style>
</head>
<body>
<canvas id="drawing1" width="200" height="200">您的瀏覽器不支援canvas。</canvas>
<canvas id="drawing2" width="200" height="200">您的瀏覽器不支援canvas。</canvas>
<canvas id="drawing3" width="200" height="200">您的瀏覽器不支援canvas。</canvas >
<canvas id="drawing4" width="200" height="200">您的瀏覽器不支援canvas。</canvas>
<canvas id="drawing5" width="200" height="200">您的瀏覽器不支援canvas。</canvas>
<canvas id="drawing6" width="600" height="200">您的瀏覽器不支援canvas。</canvas>
<img src="result.png" id="result" hidden/>
<script src="l15.js"></script>
</body>
</html>
/**
* 使用Canvas繪圖
*/
/**
* 15.1 基本用法
*/
//繪製圖形
var drawing1=document.getElementById("drawing1");
//確定瀏覽器支援<canvas>元素
if(drawing1.getContext){
var context1=drawing1.getContext("2d");
var imageElem=document.getElementById("result");
context1.drawImage(imageElem,10,10,180,180);
}
/**
*15.2 2D上下文
*/
//15.2.1 填充和描邊
//15.2.2 繪製矩形
var drawing2=document.getElementById("drawing2");
if(drawing2.getContext){
var context2=drawing2.getContext("2d");
//繪製矩形
context2.fillStyle="#ff0000";
context2.fillRect(10,10,50,50);
//繪製半透明的藍色矩形
context2.fillStyle="rgba(0,0,255,0.5)";
context2.fillRect(50,50,50,50);
//繪製紅色描邊矩形
context2.strokeStyle="#ff0000";
context2.strokeRect(130,10,50,50);
//繪製半透明的藍色描邊矩形
context2.strokeStyle="rgba(0,0,255,0.5)";
context2.strokeRect(130,70,50,50);
//描邊線條的屬性有lineWidth、lineCap、lineJoin
context2.lineWidth=2;
//在兩個矩形重疊的地方清除一個小矩形
context2.clearRect(50,50,10,10);
}
//15.2.3 繪製路徑
//15.2.4 繪製文字
//15.2.5 變換
//繪製一個時鐘錶盤:
var drawing3=document.getElementById("drawing3");
if(drawing3.getContext){
var context3=drawing3.getContext("2d");
//開始路徑
context3.beginPath();
//繪製外圓
context3.arc(100,100,99,0,2*Math.PI,false);
//繪製內圓
context3.moveTo(194,100);
context3.arc(100,100,94,0,2*Math.PI,false);
//繪製文字
context3.font="bold 14px Arial";
context3.textAlign="center";
context3.textBaseline="middle";
context3.fillText("12",100,20);
context3.fillText("3",180,100);
context3.fillText("6",100,180);
context3.fillText("9",20,100);
//變換原點
context3.translate(100,100);
//旋轉錶針
context3.rotate(1);
//繪製分針
context3.moveTo(0,0);
context3.lineTo(0,-85);
//繪製時針
context3.moveTo(0,0);
context3.lineTo(-65,0);
//描邊路徑
context3.stroke();
}
//15.2.6 繪製圖像
//15.2.7 陰影
var context4=document.getElementById("drawing4").getContext("2d");
//設定陰影
context4.shadowOffsetX=5;
context4.shadowOffsetY=5;
context4.shadowBlur=4;
context4.shadowColor="rgba(0,0,0,0.5)";
//繪製紅色矩形
context4.fillStyle="#ff0000";
context4.fillRect(10,10,50,50);
//繪製藍色矩形
context4.fillStyle="rgba(0,0,255,1)";
context4.fillRect(30,30,50,50);
//15.2.8 漸變
var context5=document.getElementById("drawing5").getContext("2d");
var gradient=context5.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//繪製紅色矩形
context5.fillStyle="#ff0000";
context5.fillRect(10,10,50,50);
//繪製漸變矩形
context5.fillStyle=gradient;
context5.fillRect(30,30,50,50);
//15.2.9 模式
var context6=document.getElementById("drawing6").getContext("2d");
var imageEle=document.getElementById("result");
var pattern=context6.createPattern(imageEle,"repeat");
//繪製矩形
context6.fillStyle=pattern;
context6.fillRect(0,0,560,150);
//15.2.10 使用影象資料
//getImageData()、putImageData()
//15.2.11 合成
//globalAlpha、globalCompositionOperation
/**
* 15.3 WebGL
*/
//目前只適合實驗性地學習,不適合真正開發和應用。
感謝原作者的辛苦總結!
原文地址: