canvas（01基礎用法）
阿新 • • 發佈：2020-09-02
1.canvas大小的初始化
<canvas id="tutorial" width="150" height="150"></canvas>片
canvas 標籤只有兩個屬性—— width和height。這些都是可選的，並且同樣利用 DOM properties 來設定。
當沒有設定寬度和高度的時候，canvas會初始化寬度為300畫素和高度為150畫素。該元素可以使用CSS來定義大小，但在繪製時影象會伸縮以適應它的框架尺寸：如果CSS的尺寸與初始畫布的比例不一致，它會出現扭曲。
2.替換內容
canvas 相比於img標籤很容易展示替代的內容，以為canvas的不同瀏覽器支援率不是很高。利用下面的方法，不支援canvas的瀏覽器將會忽略容器，渲染其中的內容。而支援的瀏覽器將會直接渲染標籤而忽略其中的文字。
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
3.標籤不可省略
canvas標籤需要閉合。如果標籤不結束下文的內容將會被認為是替代的內容從而不進行渲染。
4. 渲染上下文（The rendering context）
canvas起初是空白的。為了展示，首先指令碼需要找到渲染上下文，然後在它的上面繪製。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
程式碼的第一行通過使用 document.getElementById() 方法來為
5.檢查支援性
檢查canvas DOM元素是否有獲取上下文這個api來檢測瀏覽器是否支援canvas
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
6.一個簡單例子
一開始，讓我們來看個簡單的例子，我們繪製了兩個有趣的長方形，其中的一個有著alpha透明度。我們將在接下來的例子裡深入探索一下這是如何工作的。
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>