? 這是我的第一篇Canvas 基礎教程，我先簡述一下什么是Canvas ，
? H5 新增內容，允許腳本語言動態渲染影像，是由 HTML 代碼配合高度和寬度屬性而定義出的可繪制區域，JavaScript 代碼可以訪問該區域，類似于其他通用的二維 API，通過一套完整的繪圖函式來動態生成圖形，一些可能的用途，包括使用 Canvas 構造圖形，影片，游戲和圖片，
Canvas 物件的屬性
height 屬性:
? 畫布的高度，和一幅影像一樣，這個屬性可以指定為一個整數像素值或者是視窗高度的百分比，當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉，默認值是 150，
width 屬性:
? 畫布的寬度，和一幅影像一樣，這個屬性可以指定為一個整數像素值或者是視窗寬度的百分比，當這個值改變的時候，在該畫布上已經完成的任何繪圖都會擦除掉，默認值是 300，
那Canvas 繪制的圖形或影片有哪些優點呢？
比如下面這張圖：
? 先不考慮視頻，即便是 gif 動圖，這樣一張未壓縮的圖片，大小至少有 4MB ，瀏覽器渲染這張圖片的時候，相當于下載了一首 “流暢” 品質的歌曲，如果你希望這張圖片作為背景圖，那它會變得十分模糊，
? 那假設是一幅 Canvas 畫布呢？它的大小只有 2KB ，即便你是 2G 網路，它也能夠迅速的加載完畢，并且經得住無限放大，唯一的缺點是：圖片你只需要往上一拉，而 Canvas 要寫100行代碼，
Canvas 影片的制作原理
? 1、更新繪制的物件（比如位置的移動）
? 2、清除畫布
? 3、在畫布上重新繪制物件
? 簡單一句話概括：不斷的繪制與清除，
教程開始：
? 在HTML中添加Canvas非常簡單，只需要在 < body> 里，添加上 < canvas> 標簽就可以了！標簽通常需要指定一個id屬性 (腳本中經常參考)，width 和 height 屬性定義的畫布的大小，可以參考下面的代碼，
<body>
<canvas id="canvas" width="200" height="100">一張Canvas 畫布</canvas>
</body>
獲取畫布
var c=document.getElementById(“canvas”);
var ctx=c.getContext(“2d”);
? 這兩段代碼必填，這是一個模板，從前期來講無論你畫什么它都不會改變，這里就不細講了，不容易理解，
Canvas - 文本
font - 定義字體
fillText(text,x,y) - 在 canvas 上繪制實心的文本
strokeText(text,x,y) - 在 canvas 上繪制空心的文本
Canvas - 影像
drawImage(image,x,y)
Canvas顏色
ctx.fillStyle = " "
Canvas 坐標
canvas 是一個二維網格，
canvas 的左上角坐標為 (0,0)，
X 坐標向右增加，
Y 坐標向著畫布底部增加，
Canvas - 路徑
moveTo(x,y) 定義線條開始坐標
lineTo(x,y) 定義線條結束坐標
如果在canvas中繪制圓形，可以使用 arc(x,y,r,start,stop)
Canvas - 漸變
createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變
畫布的使用
ctx.font=“bold 20px Arial”;
ctx.textAlign=“Hello W3Cschool”;
ctx.fillText(“Hello W3Cschool”, 20, 40);
在canvas 中，transform 屬性依然生效，不過被簡寫為：ctx.translate(x,y)、ctx.rotate(x) 等
需要注意的是：rotate 中不能再填寫角度了，應改為：
ctx.rotate((Math.PI / 180) * 25)
意為：順時針旋轉 25 deg
我們來寫一個簡單的小案例，看一下效果如何：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.translate(100, 150);
ctx.fillText("after translate", 20, 40);
ctx.fillStyle = "gray";
ctx.fillRect(10,10, 100, 100);
ctx.rotate( (Math.PI / 180) * 25);
ctx.fillStyle = "orange";
ctx.fillRect(10,10, 100, 100);
</script>
</body>
</html>
? Canvas 最神奇的地方在于不斷添加，當你繪制好一個不錯的圖形時，讓它頻繁的克隆自身，這樣你就得到了 N 個繪制好的圖形，這也是開頭影片的原理，如：
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
ctx.scale(2,2);
ctx.strokeRect(10,10,30,20);
</script>
效果圖：
那我們用剛剛學到的內容做一個小練習：
<body>
<canvas id="canvas" width="500" height="500">
<script>
var testCanvas = document.getElementById("canvas");
// 獲取getContext()物件
var context = testCanvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 100, 100);
// 保存狀態（紅色）
context.save();
context.fillStyle="blue";
context.fillRect(60, 60, 100, 100);
// 保存狀態（藍色）
context.save();
// 恢復狀態（紅色）
context.restore();
context.fillRect(120, 120, 100, 100);
// 恢復狀態（藍色）
context.restore();
context.fillRect(180, 180, 100, 100);
context.beginPath();
</script>
</body>
? 看看你得到的圖案是不是下面這樣：
? 讀到這里，你是不是想問，那些移動的 canvas 影片是如何制作的？
<style>
.onfo {
width: 600px;
height: 400px;
}
.onfo canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<div class="onfo">
<canvas id="canvas" width="500" height="500">
</div>
<script>
var testCanvas = document.getElementById("canvas");
var context = testCanvas.getContext("2d");
var x = 0;
var y = 0;
var timer = null;
//清除畫布 再次繪制（回圈操作）
function draw(){
// 不斷改變繪制物件的水平位置
x++;
// 清除畫布
context.clearRect(0, 0, 600, 400);
context.beginPath();
context.fillStyle = "skyblue";
context.arc(x, 200, 80, 0, 2 * Math.PI, true);
context.closePath();
// 繪制輪廓
context.stroke();
// 填充顏色
context.fill();
}
// 設定計時器
setInterval(draw, 20);
</script>
</body>
? 來看下效果圖，是不是和我的一樣
? 本期的 Canvas 教程到這里就告一段落了，這門技術在以后的開發及裝 X 中都將大放異彩，勤學苦練使我們熟能生巧，關注一波吧老鐵
最后送大家三個高級又簡單的Canvas 影片，既能練習又能裝 X，我是 “ 我不是費圓 ”，一個每天忙到深夜碼字的人，我從不輕言放棄，從不吝嗇自己的贊美之詞，如果你在 canvas 上有著更高的造詣，我希望能得到你的指教，反之，希望你能與我攜手并進，
推薦閱讀：
線條影片
線潭訓環
怦然心動
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/154403.html
標籤：其他