Canvas基礎教程(章節1)-有解無憂

? 這是我的第一篇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/qianduan/154976.html

標籤：其他

上一篇：Python打字小游戲《Alphabet Zoo》

下一篇：vagrant安裝centos 7系統及其相關鏡像的配置