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 /**
* 使用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
*/
//目前只適合實驗性地學習，不適合真正開發和應用。 感謝原作者的辛苦總結！
原文地址：