? 發現一個好玩小技巧，如果瀏覽器不支持 Canvas 畫布怎么辦？
別這樣寫，太 low 了
試試這個 👇
哇哦，我學會了，來吧！開始今天的學習內容
渲染背景關系
? < canvas>會創建一個固定大小的畫布，會公開一個或多個 渲染背景關系(畫筆)，使用 渲染背景關系來繪制和處理要展示的內容，
? 我們重點研究 2D渲染背景關系，其他的背景關系我們暫不研究，比如， WebGL使用了基于OpenGL ES的3D背景關系 (“experimental-webgl”) ，
//獲得 2d 背景關系物件
var ctx = canvas.getContext (‘2d’);
檢測支持性
if(canvas.getContext){
? var ctx = canvas.getContext(‘2d’);
? // drawing code here
}
else{
? // canvas-unsupported code here
}
基本格式：
<html>
<head>
<title>Canvas 基礎</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
function draw(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
}
draw();
</script>
</html>
先來復習一下上一章的內容：
? 如下圖所示，canvas元素默認被網格所覆寫，通常來說網格中的一個單元相當于canvas 元素中的一像素，柵格的起點為左上角（坐標為（0,0）），所有元素的位置都相對于原點來定位，
? 所以圖中藍色方形左上角的坐標為距離左邊（X軸）x像素距離上邊（Y軸）y像素（坐標為（x,y）），后面我們會涉及到坐標原點的平 移、網格的旋轉以及縮放等，
繪制一個簡單的矩形，
canvast 提供了三種方法繪制矩形：
1.fillRect(x, y, width, height):繪制一個填充的矩形2.strokeRect(x, y, width, height):繪制一個矩形的邊框
3.clearRect(x, y, widh, height):清除指定的矩形區域，然后這塊區域會變的完全透明，
這3個方法具有相同的引數，
x, y：指的是矩形的左上角的坐標，(相對于canvas的坐標原點)
width, height：指的是繪制的矩形的寬和高，
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.fillRect(10,10,100,50);
//繪制矩形,填充的默認顏色為黑色
ctx.strokeRect(10,70,100,50);
//繪制矩形邊框
}()
</script>
</html>
再添加上這一句：ctx.clearRect(15,15,50,25);
接下來繪制路徑
? 圖形的基本元素是路徑，路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合，每一個路徑，甚至一個子路徑，都是閉合的，
? 1.創建路徑起始點
? 2.呼叫繪制方法去繪制出路徑
? 3.把路徑封閉
? 4.一旦路徑生成，通過描邊或填充路徑區域來渲染圖形，
會用到以下方法：
1.beginPath()
新建一條路徑，路徑一旦創建成功，圖形繪制命令被指向到路徑上生成路徑，
2.moveTo(x, y)
把畫筆移動到指定的坐標(x, y)，相當于設定路徑的起始點坐標，
3.closePath()
閉合路徑之后，圖形繪制命令又重新指向到背景關系中
4.stroke()
通過線條來繪制圖形輪廓
5.fill()
通過填充路徑的內容區域生成實心的圖形
繪制線段：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();//新建一條path
ctx.moveTo(50,50);//把畫筆移動到指定的坐標
ctx.lineTo(200,50);//繪制一條從當前位置到指定坐標(200, 50)的直線.
//閉合路徑，會拉一條從當前點到path起始點的直線，如果當前點與起始點重合，則什么都不做
ctx.closePath();
ctx.stroke();//繪制路徑，
}()
</script>
</html>
繪制三角形邊框：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.closePath();
//雖然我們只繪制了兩條線段，但是closePath會closePath，仍然是一個3角形
ctx.stroke();//描邊，stroke不會自動closePath()
}()
</script>
</html>
填充三角形：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.fill();
//填充閉合區域，如果path沒有閉合，則fill()會自動閉合路徑，
}()
</script>
</html>
? 臥槽！我電腦一直漏電，我不知道什么原因導致的，我現在手臂麻麻的，我再寫兩句，如果還是麻麻的我就先不寫了，我挺怕死的，
繪制圓弧
目前有兩種方法可以繪制圓弧：
1.arc(x, y, r, startAngle, endAngle, anticlockwise)
以(x, y)為圓心，以r為半徑，從 startAngle弧度開始到
endAngle弧度結束，anticlosewise是布林值，true表示逆時針，false表示順時針，(默認是順時針)
注意：
這里的度數都是弧度，
0弧度是指的x軸正方形
radians=(Math.PI/180)*degrees //角度轉換成弧度· 1
2.arcTo(x1, y1, x2, y2, radius)
根據給定的控制點和半徑畫一段圓弧，最后再以直線連接兩個控制點，
圓弧案例：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();
ctx.arc(50,50,40,0, Math.PI/2,false);
ctx.stroke();
}()
</script>
</html>
再多畫幾個
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();
ctx.arc(50,50,40,0, Math.PI/2,false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150,50,40,0,-Math.PI/2,true);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(50,150,40,-Math.PI/2, Math.PI/2,false);
ctx.fill();
ctx.beginPath();
ctx.arc(150,150,40,0, Math.PI,false);
ctx.fill();
}()
</script>
</html>
再來一個：
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<script>
!function(){
var canvas = document.getElementById('canvas');
if(!canvas.getContext) return;
var ctx =canvas.getContext("2d");
//開始代碼draw();
ctx.beginPath();
ctx.moveTo(50,50);
//引數1、2：控制點1坐標 引數3、4：控制點2坐標引數5：圓弧半徑
ctx.arcTo(200,50,200,200,100);
ctx.lineTo(200,200);
ctx.stroke();
ctx.beginPath();
ctx.rect(50,50,10,10);
ctx.rect(200,50,10,10);
ctx.rect(200,200,10,10);
ctx.fill();
}()
</script>
</html>
arcTo方法的說明：
? 這個方法可以這樣理解，繪制的弧形是由兩條切線所決定，
? 第 1 條切線：起始點和控制點1決定的直線，
? 第 2 條切線：控制點1 和控制點2決定的直線，
? 其實繪制的圓弧就是與這兩條直線相切的圓弧，
糟了！手臂麻了，下節講繪制貝賽爾曲線，讀完下一章，你就能繪制下面這幅圖：👇
? 本期的 Canvas 教程到這里就告一段落了，這門技術在以后的開發及裝 X 中都將大放異彩，勤學苦練使我們熟能生巧，關注一波吧老鐵
最后送大家三個高級又簡單的Canvas 影片，既能練習又能裝 X，我是 “ 我不是費圓 ”，一個每天忙到深夜碼字的人，我從不輕言放棄，從不吝嗇自己的贊美之詞，如果你在 canvas 上有著更高的造詣，我希望能得到你的指教，反之，希望你能與我攜手并進，
推薦閱讀：
線條影片
線潭訓環
怦然心動
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/155119.html
標籤：其他
上一篇：場景化分析rem布局原理
下一篇：正則運算式技術