知識說明：
HTML5新增的canvas標簽，通過創建畫布，在畫布上創建任何想要的形狀，下面將canvas的API以及屬性做一個整理，並且附上時鍾的示例，便於后期復習學習！Fighting！
一、標簽原型
<canvas width=”1000” height=”1000” id=”myCanvas”>
您的瀏覽器版本過低，不支持HTML5新增的canvas標簽。
</canvas>
使用js獲取該畫布，並指定對象
<script>
Var canvasID = document.getElementById(“myCanvas”);
Var canvas = canvasID.getContext(“2d”);
</script>
二、canvas標簽常見屬性
| 屬性 |
值 |
功能描述 |
| width |
pixels |
設置canvas的寬度 |
| height |
pixels |
設置canvas的高度 |
三、canvas標簽的API整合
| 屬性 |
值 |
功能描述 |
| save() |
Canvas.save(); |
保存當前畫布環境狀態 |
| Restore() |
Canvas.restore(); |
返回之前保存的畫布的路徑狀態，與save()成對用 |
| getContext() |
Canvas.getContext(); |
返回一個對象，指出訪問繪圖功能必要的API |
| toDataURL() |
Canvas.toDataURL(); |
返回canvas圖像的url |
四、canvas標簽API的主要屬性整合
a、 畫圓
| 屬性 |
值 |
功能描述 |
| fillStyle |
Canvas.fillStyle=”#f00” |
設置或返回用於填充繪畫的顏色、漸變或模式 |
| strokeStyle |
Canvas.strokeStyle=”#f0f”; |
設置或返回用於筆觸的顏色、漸變或模式 |
| beginPath() |
Canvas.beginPath(); |
開啟畫路徑 |
| closePath() |
Canvas.closePath(); |
關閉畫路徑 |
| Arc() |
Canvas.arc(0,0,10,0,360,false); 參數：原點X、原點Y、原點起始弧度，原點結束弧度、順時針/逆時針 |
畫圓 |
| Fill() |
Canvas.fill() |
填充 |
| Stroke() |
Canvas.stroke() |
畫邊框 |
畫圓代碼片段：
<script>
var canvasID = document.getElementById("myCanvas");
var canvas = canvasID.getContext("2d");
//畫圓方法
function drawArc(id)
{
canvas.beginPath();
canvas.lineWidth = 5;
canvas.fillStyle = "#00f";
canvas.strokeStyle = "#0f0";
canvas.arc(100, 100, 50, 0, 360, false);
canvas.fill();
canvas.stroke();
canvas.closePath();
}
drawArc("myCanvas");
</script>
b、 畫線
| 屬性 |
值 |
功能描述 |
| Translate |
Canvas.translate(200,200) |
重置坐標原點 |
| lineWidth |
Canvas. lineWidth=10; |
設置線的寬度 |
| moveTo () |
Canvas. moveTo (0,0); |
開始畫線的初始位置 |
| lineTo () |
Canvas. lineTo (100,0); |
畫線結束點位置 |
畫線代碼片段：
<script>
var canvasID = document.getElementById("myCanvas");
var canvas = canvasID.getContext("2d");
function drawLine(id)
{
canvas.save();
canvas.translate(150,100);
canvas.lineWidth= 10;
canvas.strokeStyle = "#999";
canvas.beginPath();
canvas.moveTo(0,0);
canvas.lineTo(100,0);
canvas.closePath();
canvas.stroke();
canvas.restore();
}
drawLine("myCanvas");
</script>
c、 畫多邊形
畫三角形代碼片段：
//畫多邊形，此處以三角形為例
<script>
var canvasID = document.getElementById("myCanvas");
var canvas = canvasID.getContext("2d");
function drawSanjiao(id)
{
canvas.save();
canvas.translate(250,40);
canvas.lineWidth = 3;
canvas.strokeStyle = "#0f0";
canvas.beginPath();
canvas.moveTo(0,0);
canvas.lineTo(0,120);
canvas.lineTo(100,60);
canvas.lineTo(0,0);
canvas.stroke();
canvas.closePath();
canvas.restore();
}
drawSanjiao("myCanvas");
</script>
d、 畫文字
畫文字代碼片段：
<script>
var canvasID = document.getElementById("myCanvas");
var canvas = canvasID.getContext("2d");
function drawText(id)
{
canvas.save();
canvas.translate(100,300);
canvas.strokeStyle="#09";
canvas.fillStyle = "#879";
canvas.font = "normal 90px 微軟雅黑";
canvas.strokeText("hello html5", 0, 0);
canvas.fillText("hello html5", 0, 0);
canvas.restore();
}
drawText("myCanvas");
</script>
以上a、b、c、d整合效果如下圖：
五、使用canvas標簽繪制時鍾
代碼片段：
<canvas width="1000" height="1000" id="clockCanvas">
您的瀏覽器版本太低，不支持顯示時鍾的canvas標簽
</canvas>
<script>
var clockID = document.getElementById("clockCanvas");
var clock = clockID.getContext("2d");
/*步驟：畫鍾表整體思路步驟分析
1、使用canvas創建畫布，並創建一個2d對象
2、使用function方法做計算
3、實例化Date()對象，通過該對象獲取系統當前的時、分、秒
4、通過計算將24小時制轉化為12小時制
5、畫表盤
6、畫刻度盤
7、畫指針
8、使用setInterval(fun, time);設置動態
*/
//畫時鍾的方法
function drawClock(id)
{
//每次清空畫布
clock.clearRect(0,0,1000,1000);
//獲取系統當前時間（時 、分 、秒）
var now = new Date(); //實例化一個當前時間的對象，通過該對象獲取系統當前時間
var sec = now.getSeconds(); //秒
var mins = now.getMinutes(); //分
var hours = now.getHours(); //時
//繪制文字，顯示系統當前時間：
clock.save();
clock.translate(0,500);
clock.fillStyle = "#ff0";
clock.strokeStyle = "#eee";
clock.font = "bold 50px 微軟雅黑";
clock.strokeText("系統當前時間為："+hours+"時"+mins+"分"+sec+"秒", 100, 100);
clock.fillText("系統當前時間為："+hours+"時"+mins+"分"+sec+"秒", 100, 100);
clock.restore();
//計算：滿60分加一小時
hours = hours + mins/60;
//計算：將24小時制轉化為12小時制
hours = hours>12?hours-12:hours;
//畫表盤
clock.beginPath();
clock.lineWidth = 10;
clock.strokeStyle = "#ff00ff";
clock.arc(300, 300, 200, 0, 360, false);
clock.stroke();
clock.closePath();
//畫刻度盤
//時刻度
for(var i = 0; i < 12; i++)
{
clock.save();
//將起始點定位到圓心
clock.translate(300,300);
//設置刻度的樣式
clock.lineWidth = 7;
clock.strokeStyle = "#999999";
//設置旋轉角度
clock.rotate(i*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0, -170);
clock.lineTo(0, -190);
/*clock.font = "normal 20px 宋體";
clock.textAlign = "left";
clock.textBaseLine = "top";
clock.strokeText(i, i*(-50)*Math.PI/180, -150);
clock.closePath();*/
//畫刻度線
clock.stroke();
clock.restore();
}
//分刻度
for(var j = 0; j<60; j++)
{
clock.save();
//設置起始點坐標
clock.translate(300,300);
clock.lineWidth = 5;
clock.strokeStyle = "#999999";
//設置旋轉角度
clock.rotate(j*6*Math.PI/180);
clock.beginPath();
clock.moveTo(0, -180);
clock.lineTo(0, -190);
clock.closePath();
clock.stroke();
clock.restore();
}
//時針
clock.save();
clock.translate(300,300);
clock.lineWidth = 7;
clock.strokeStyle = "#000000";
//設置小時的旋轉角度，沒轉一次走30°
clock.rotate(hours*30*Math.PI/180);
clock.beginPath();
clock.moveTo(0,15);
clock.lineTo(0,-120);
clock.stroke();
clock.closePath();
clock.restore();
//分針
clock.save();
clock.translate(300, 300);
clock.rotate(mins*6*Math.PI/180);
clock.lineWidth = 5;
clock.strokeStyle = "#000";
clock.beginPath();
clock.moveTo(0,20);
clock.lineTo(0,-160);
clock.stroke();
clock.closePath();
clock.restore();
//秒針
clock.save();
clock.translate(300,300);
clock.rotate(sec*6*Math.PI/180);
clock.lineWidth = 3;
clock.strokeStyle = "#f00";
clock.beginPath();
clock.moveTo(0, 25);
clock.lineTo(0,-165);
clock.stroke();
clock.closePath();
//秒針圓心處一個小圈
clock.fillStyle = "#999";
clock.strokeStyle = "#f00";
clock.beginPath();
clock.arc(0,0,6,0,360,false);
clock.fill();
clock.stroke();
clock.closePath();
//秒針頂部一個小圈
clock.beginPath();
clock.arc(0,-140,6,0,360,false);
clock.fill();
clock.stroke();
clock.closePath();
clock.restore();
}
drawClock();
setInterval(drawClock, 1000); //是表針根據系統當前時間轉動起來
</script>
繪制結果如下圖：
