前言
寫了好多canvas的例子了，動畫也寫了很多，cnavas一直是我感興趣的動畫，剛好年末有時間，抽空更新下canvas.
1. canvas 簡介
1.1是HTML5中重要的元素,和audio、video元素類似完全不需要任何外部插件就能夠運行.
Canvas中文翻譯就是”畫布”.它提供了強大的圖形的處理功能(繪製,變換,像素處理…)。
但是需要注意，canvas 元素本身並不繪製圖形，它只是相當於一張空畫布。
如果開發者需要向 canvas 上繪製圖形，則必須使用 JavaScript 腳本進行繪製。
1.2 canvas 能夠做什麼？
基礎圖形的繪製
文字的繪製
圖形的變形和圖片的合成
圖片和視頻的處理
動畫的實現
小遊戲的製作
1.3 支持的瀏覽器
大多數現代瀏覽器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.
IE8及以下不支持HTML5,但是我們可以進行提示用戶更新到最新的版本
2.canvas 實戰
2.1 查看當前瀏覽器對 canvas 的支持情況
2.1.1這時候我們可以直接在 canvas 標籤之間去書寫內容，這麼做的好處是當你的瀏覽器不支持 canvas 的時候，我們可以去展示標籤之間的內容
2.1.2 當然也可以通過js去判斷，瀏覽器支不支持
2.2 修改 Canvas 的畫布
按照我們正常的思路來說，我們會直接去使用 canvas_1.style.width = “500px”; 來去修改我們的 canvas 的寬度，但是這樣真的對麼？
答案當然是否定的，canvas 相當於是一張圖片，如果我們設置 .
這樣寫相當於圖片的實際大小是 500 * 500.
但是，假如我們這樣去書寫。
這樣實際是把 canvas 默認的 300 * 150 的圖片強行拉伸爲 500px * 500px 了，所以這樣會導致我們的內容被強行縮放，從而導致問題
2.3 獲取繪製環境
我們在上面已經設置了我們的畫布的大小，但是存在一個問題。
我們還沒有找到我們的畫布呀！~
要是我們連具體的畫布都沒有，我們又該向哪裏去繪畫呢？
實際上我們可以通過 var ctx = canvas_1.getContext(“2d”); 來去獲取到我們的繪製環境。
2.4 繪製的座標軸
注意下，橫軸向右是正，縱軸向下是正。
2.5 繪製直線
我們既然要畫一條直線，我們是不是至少應該有這麼幾個條件呢？
線的起點
線的終點
線的顏色
線的寬度
所以我們接下來，就需要開始我們的代碼書寫了
我們需要一些工具，需要具體的方法。
| 方法 | 說明 |
|---|---|
| beginPath() | 開始定義路徑 |
| closePath() | 關閉前面定義的路徑 |
| moveTo(float x,float y) | 把 canvas 的當前路徑的結束點移動到 x, y 對應的點 |
| lineTo(float x,float y) | 把 canvas 的當前路徑從當前結束點連接到 x , y 對應的點 |
需要注意，moveTo 可以簡單理解爲，把當前繪製圖像的起點設置爲某一特定座標，而 lineTo 則是將當前的起點和你想要設置的那個點之間連接起來。
而 beginPath 是表示開始定義路徑，不會產生特殊的效果。而 closePath 除了表示關閉當前定義的路徑之外，還會有一個特殊的作用，就是可以將當前繪製圖形的最後一個點和我們繪製圖形開始的點進行連接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
當前瀏覽器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 獲取 canvas 元素對應的 DOM 對象
var canvas_1 = document.getElementById("canvas_1");
// 獲取在 canvas 上繪圖的 canvasRenderingContent2D 對象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能夠顯示具體環境
console.log(ctx);
// 開始繪製
ctx.beginPath();
//設置繪製起點
ctx.moveTo(0,0);
//設置繪製下一個點
ctx.lineTo(700,400);
//結束繪製
ctx.closePath();
</script>
</html>
沒有對吧，所以咯，我們還需要有其他的方法去進行配合
| - | - |
|---|---|
| fill() | 填充 canvas 當前路徑 |
| stroke() | 填充 canvas 當前路徑繪製邊框 |
可是這條線一直是灰色的呀，好醜，我們想要自己去修改我們的線，該怎麼做呢？
| - | - |
|---|---|
| fillStyle() | 設置填充 canvas 路徑所使用的填充風格 |
| strokeStyle() | 設置繪製 canvas 路徑的填充風格 |
他們兩個都支持三個屬性值。
1.符合顏色格式的字符串值，表示使用純色填充
2.CanvasGradient，表明使用漸變填充
3.CanvasPattern，表明使用位圖填充
除此之外，我們還可以設置一下線的寬度。lineWidth()
2.6 繪製三角形
我們已經創建了這一條線段，那麼我們平常開發中不會僅僅讓你去繪製一條線吧，最起碼我們需要會繪製出一個小的三角形吧。
這時候我們就需要再去繪製兩條線了。
怎麼去添加線呢？lineTo對吧
//設置繪製起點
ctx.moveTo(100,100);
//設置繪製下一個點
ctx.lineTo(700,400);
//設置繪製下一個點
ctx.lineTo(400,100);
這時候神奇的事情發生了，我們的三角形直接就出現了，可是我們僅僅繪製了兩條線呀
還記得上面對 closePath 的描述麼？
這時因爲當我們結束繪製的，電腦會自動將你設置的線段自動連接起來。
當然這裏也是可以設置填充方法的
這裏貼下代碼吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
當前瀏覽器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 獲取 canvas 元素對應的 DOM 對象
var canvas_1 = document.getElementById("canvas_1");
// 獲取在 canvas 上繪圖的 canvasRenderingContent2D 對象
var ctx = canvas_1.getContext("2d");
// 打印一下，查看是否能夠顯示具體環境
console.log(ctx);
// 開始繪製
ctx.beginPath();
//設置繪製起點
ctx.moveTo(100,100);
//設置繪製下一個點
ctx.lineTo(700,400);
//設置繪製下一個點
ctx.lineTo(400,100);
//設置繪製下一個點
ctx.lineTo(600,500);
//結束繪製
ctx.closePath();
//設置線的寬度
ctx.lineWidth = 10;
//設置繪製的樣式
ctx.strokeStyle = "red";
//繪製點之間的線路
ctx.stroke();
// 設置填充樣式
ctx.fillStyle = "green";
// 填充當前視圖
ctx.fill();
// 注意：所有的繪製相應屬性全部應該放在 closePath 之前
</script>
</html>
這裏附帶講講其它屬性吧
lineJoin: 設置返回所創建邊角的類型，當兩條線交匯時。
bevel: 創建斜角
round:創建圓角
miter:創建尖角
2.7 繪製矩形
strokeRect(float x,float y,float width,float height): 繪製一個矩形邊框
fillRect(float x,float y,float width,float height) :填充一個邊框
不多說，上代碼，其它屬性和畫三角形的差不多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<h2>繪製矩形</h2>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
當前瀏覽器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 獲取 canvas 元素對應的 DOM 對象
var canvas_1 = document.getElementById("canvas_1");
// 獲取在 canvas 上繪圖的 canvasRenderingContent2D 對象
var ctx = canvas_1.getContext("2d");
// 設置填充顏色
ctx.fillStyle = '#f00';
// 填充一個矩形
ctx.fillRect(30,20,120,60);
// 設置填充顏色
ctx.fillStyle = '#ff0';
// 填充一個矩形
ctx.fillRect(80,60,120,60);
// 設置填充顏色
ctx.strokeStyle = '#00f';
// 填充一個矩形
ctx.strokeRect(30,130,120,60);
// 設置線條寬度
ctx.lineWidth = 20;
// 設置線條寬度
ctx.lineJoin = "round";
// 設置填充顏色
ctx.strokeStyle = '#0ff';
// 填充一個矩形
ctx.strokeRect(80,160,120,60);
// 設置線條寬度
ctx.lineJoin = "bevel";
// 設置填充顏色
ctx.strokeStyle = '#f0f';
// 填充一個矩形
ctx.strokeRect(130,190,120,60);
ctx.storke();
</script>
</html>
2.8 繪製字符串
fillText(String Text, float x, float y, [float maxWidth])：填充字符串;
strokeText(String Text, float x, float y, [float maxWidth]): 繪製字符串邊框;
textAlign:設置繪製字符串的水平對齊方式(start、end、left、right、center等)
textBaseAlign:設置繪製字符串的垂直對齊方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<h2>繪製文字</h2>
<canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
當前瀏覽器不支持 canvas
</canvas>
</div>
</body>
<script type="text/javascript">
// 獲取 canvas 元素對應的 DOM 對象
var canvas_1 = document.getElementById("canvas_1");
// 獲取在 canvas 上繪圖的 canvasRenderingContent2D 對象
var ctx = canvas_1.getContext("2d");
ctx.fillStyle = '#00f';
ctx.font = 'italic 50px 隸書';
ctx.textBaseline = 'top';
//填充字符串
ctx.fillText('李先生真是帥',0,0);
ctx.strokeStyle = 'f0f';
ctx.font = 'bold 45px 宋體';
// 繪製字符串的邊框
ctx.strokeText('李鵬李鵬我愛你',0,50,200);
</script>
</html>
2.9 設置陰影
廢話不多說，分爲盒陰影和文字陰影
shadowBlur 設置陰影的模糊程度。該值是一個浮點數，該數值越大，陰影的模糊程度也就越大。
shadowColor 設置陰影的顏色。
shadowOffsetX 設置陰影在 X 方向的偏移
shadowOffsetY 設置陰影在 Y 方向的偏移
最後點個讚唄