一、<canvas>元素
1、<canvas>寫法：
<canvas id="mycanvas" width="500" height="500">您的瀏覽器不支持canvas</canvas>
2燎窘、<canvas>寬高設置
在使用<canvas>元素時必須設置寬度和高度浑厚，指定可以繪畫的區(qū)域大小股耽，但是寬高設置有一個注意的問題
樣例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:5px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeRect(0, 0, 100, 100);
context.fillRect(101, 0, 100, 100);
context.stroke();
context.fill();
</script>
</html>
在這里我們直接在<canvas>標簽內設置了繪畫區(qū)域的大小根盒，在瀏覽器中顯示的效果是這樣的
如果我們用常規(guī)CSS設置寬高的話
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
width:500px;
height:500px;
border:5px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeRect(0, 0, 100, 100);
context.fillRect(101, 0, 100, 100);
context.stroke();
context.fill();
</script>
</html>
這時瀏覽器中顯示的效果就是這樣
明明是寬高一樣的矩形，為什么會出現(xiàn)拉長的效果呢物蝙？
其實<canvas>有自己默認的寬高300px*150px,而且在<canvas>行間樣式定義width炎滞、height跟在style中定義width、height是有所區(qū)別的：<canvas>標簽的width和height是<canvas>在瀏覽器中被渲染的高度和寬度诬乞。如果<canvas>的width和height沒指定或者值不正確册赛，就被設置成默認值{width:300px;height:150px}；
這就解釋了為什么第二種寫法導致圖形被拉伸震嫉，原因是繪畫區(qū)域的大小沒有在<canvas>行間樣式中定義森瘪，所以被默認為寬高的默認值，而<style>中設置為{width:500px;height:500px;}將繪畫區(qū)域的高度拉伸了票堵。
3扼睬、<canvas>的瀏覽器支持
<canvas id="mycanvas" width="500" height="500">您的瀏覽器不支持canvas</canvas>
某些較老的瀏覽器（尤其是IE9之前的IE瀏覽器）不支持<canvas>元素，在這些瀏覽器上悴势，就會顯示我們的提示“您的瀏覽器不支持canvas”窗宇，因為我們在<canvas>標簽中提供了替換內容。支持<canvas>的瀏覽器將會忽略標簽中的提示內容特纤，并且正常的渲染canvas
二军俊、渲染上下文
<canvas>元素創(chuàng)造了一個固定大小的畫布，它公開了一個或多個喧嚷上下文叫潦，其可以用來繪制和處理要展示的內容蝇完，這里我們將2d渲染上下文。
canvas起初是空白的矗蕊，默認背景色是透明的短蜕。我們在繪制之前，首先腳本需要找到渲染上下文傻咖，<canvas>元素有一個叫做getContext()的方法來獲得渲染上下文和它的繪畫功能朋魔，getContext()只有一個參數(shù)，上下文的格式卿操，這里對于2d圖像而言警检，可以在<script>中使用
//獲取canvas的DOM對象
var canvas =document.getElementById("mycanvas");
//獲得渲染上下文
var context = canvas.getContext("2d");
