HTML5的canvas寫會走動的鐘
目錄
第四章 HTML5中的canvas
一) canvas基礎
canvas是HTML5中新增的一個元素，專門用來繪製圖形。在頁面放置一個canvas元素，就相當於放置了一個畫布，可以在其中進行圖形的繪製。
但繪製圖形，並不是指使用滑鼠作畫，而是需要javascript進行配合。建立canvas的時候，他預設的寬高為300px*150px。
| <canvas id="canvas">我是一個畫布</canvas> |
二) 繪製矩形
我們在HTML頁面中直接插入canvas標籤，也可以對它設定寬度和高度，切記設定canvas的時候不可以利用css樣式進行設定。
| <canvas id="canvas" width="400" height="300">我是一個畫布</canvas> |
那麼，我們想在canvas上面畫出矩形，我們就需要認識以下幾種api
| 方法 |
描述 |
| getContext() |
獲取繪圖環境，可選引數"2d" |
| fillRect(x,y,width,height) |
繪製一個填充的矩形 |
| strokeRect(x,y,width,height) |
繪製一個矩形的邊框 |
| clearRect(x,y,width,height) |
清除指定矩形區域。 |
| <script> var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.fillRect(50,50,100,100)//繪製填充的"黑色"的矩形 </script> |
| <script> var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.strokeRect(50,50,100,100)//繪製填充的"黑色"的矩形 </script> |
| <script> var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.fillRect(50,50,100,100)//繪製填充的"黑色"的矩形 ctx.clearRect(50,50,10,10)//清除"x=50,y=50,寬度為10,高度為10的區域" </script> |
但有些時候，我們希望能夠修改矩形的樣式，又不可以直接通過修改css方式來修改。那麼在canvas中也提供了api為我們來修改樣式。
| 方法 |
描述 |
| fillStyle |
填充背景顏色 |
| strokeStyle |
設定邊框顏色 |
| lineWidth |
設定邊框的寬度 |
| var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.fillStyle = "red"//繪製填充的"紅色"的矩形 ctx.fillRect(50,50,100,100) |
| var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.strokeStyle = "red"//繪製邊框的"紅色"的矩形 ctx.lineWidth = "10"//設定邊框寬度 ctx.strokeRect(50,50,100,100) |
注意:在繪製矩形的過程中，必須是繪製樣式在繪製圖形之前。
三) canvas繪製圓形
我們來看下如何在canvas中繪製一個圓形，繪製圓形分為4個步驟。
1) 開始繪製路徑(beginPath)
2) 建立影象路徑
3) 路徑建立完成後，關閉路徑
4) 設定繪製樣式，呼叫繪製方法，繪製路徑(closePtah)
繪製圓形,canvas也為我們提供了arc這個方法,
| ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise) |
該方法有6個引數，x為繪製圓形的起點橫座標，y表示繪製圓形的起點的縱座標,radius表示圓的半徑，startAngle為開始角度，endAngle為結束的角度, anticlockwise是否按照順時針方向進行繪製。false表示順時針。（預設為順時針）。
| var canvas = document.getElementById("canvas") var ctx = canvas.getContext("2d")//獲取繪製圖片的"2d"環境 ctx.beginPath() ctx.arc(100,100,50,0,90*Math.PI/180,false) ctx.stroke() ctx.closePath() |
其中有個弧度轉換的公式：degreens*Math.PI/180，繪製圓形預設按照以下的位置進行切換。
四) 使用moveTo()和lineTo()繪製路徑
我們可以使用moveTo()和lineTo()繪製直線，或者是自己想要的圖形，不侷限於矩形。
| 方法 |
描述 |
| moveTo(x,y) |
不繪製，只是將當前位置移動到新的目標點 |
| lineTo(x,y) |
不僅將當前位置移動到新的目標點(x,y)，而且在兩個座標之間畫一條直線。 |
| linejoin |
設定兩線段連線處所顯示的樣子。round,bevel,miter |
| lineCap |
線段端點顯示的樣式 |
| save |
儲存繪畫路徑 |
| restore |
銷燬路徑 |
注意:我們使用兩個方法的時候，要注意使用closePath()閉合。因為它會通知canvas當前繪製的圖形已經閉合或者形成了完全封閉。(linejoin)
6.繪製變形圖形
html程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>走動的表</title>
<style>
body{
background: black;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
不支援
</canvas>
</body>
</html>
js指令碼程式碼
<script>
var oC = document.getElementById("canvas")
var oGC = oC.getContext("2d")
function draw(){
var oDate = new Date()
var oHours = oDate.getHours()
var oMin = oDate.getMinutes()
var oSec = oDate.getSeconds()
var oHoursValue = (-90+oHours*30+oMin/2)*Math.PI/180
var oMinValue = (-90+oMin*6)*Math.PI/180
var oSecValue = (-90+oSec*6)*Math.PI/180
//60個小刻度
var x = 200
var y = 200
var r = 150
oGC.save()//儲存繪畫路徑
oGC.beginPath()//開始繪畫
for (var i=0;i<60;i++) {
oGC.moveTo(x,y)
oGC.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180)
}
oGC.closePath()//結束繪畫
oGC.stroke()
oGC.restore()//銷燬路徑
//第一個大圓
oGC.save()
oGC.beginPath()
oGC.fillStyle = "white"//填充背景顏色
oGC.moveTo(x,y)//不繪製，只是將當前位置移動到新的目標點
oGC.arc(x,y,r*19/20,0,360*Math.PI/180)
oGC.closePath()
oGC.fill()//填充當前的影象（路徑）。預設顏色是黑色。
oGC.restore()
//12個大刻度
oGC.save()
oGC.beginPath()
oGC.lineWidth = 3
for (var i=0;i<12;i++) {
oGC.moveTo(x,y)
oGC.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180)
}
oGC.closePath()
oGC.stroke()
oGC.restore()
//第二個圓
oGC.save()
oGC.beginPath()
oGC.fillStyle = "white"//
oGC.moveTo(x,y)
oGC.arc(x,y,r*18/20,0,360*Math.PI/180)
oGC.closePath()
oGC.fill()
oGC.restore()
//時針
oGC.save()
oGC.beginPath()
oGC.moveTo(x,y)
oGC.strokeStyle = "blue"//設定邊框顏色
oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue)
oGC.closePath()
oGC.stroke()//繪製當前路徑的邊框
oGC.restore()
//分針
oGC.save()
oGC.beginPath()
oGC.moveTo(x,y)
oGC.strokeStyle = "green"//設定邊框顏色
oGC.arc(x,y,r*12/20,oMinValue,oMinValue)
oGC.closePath()
oGC.stroke()
oGC.restore()
//秒針
oGC.save()
oGC.beginPath()
oGC.moveTo(x,y)
oGC.strokeStyle = "red"
oGC.arc(x,y,r*16/20,oSecValue,oSecValue)
oGC.closePath()
oGC.stroke()
oGC.restore()
}
setInterval(function(){
draw()
},1000)
draw()
</script>