HTML5 Canvas 練習及知識點分享之基本操做

2016-11-05

在MOOC上 學習了關於 Canvas 的教程 受益不淺  

先上練習的demo

本人用的是 Chorme  

暫時沒有考慮兼容性問題

 時鐘  https://fanyear.github.io/Canvas/Clock/index.html

 （放大鏡）鼠標左鍵   https://fanyear.github.io/Canvas/Magnifier/index.html

 縮放圖像  https://fanyear.github.io/Canvas/ScaleImage/index.html

星星動畫閃爍  https://fanyear.github.io/Canvas/StarTwinkling/index.html  

炫酷計時動畫效果 https://fanyear.github.io/Canvas/Timer/index.html

 

推薦MOOC 教程   http://www.imooc.com/u/108955/courses?sort=publish  （一系列教程 講得很好 有條理）

http://www.imooc.com/learn/338 （星星閃爍教程）

 

如下是個人學習筆記，不算是教程，講得不全面，是一些注意事項，更可能是爲了本身忘了的時候能夠回來看看，但願說得很差或有錯的，還望各位指教：

 

一、HTML部分

　　如下是HTML部分，當瀏覽器不支持canvas的時候，第二行（文字部分）纔會顯示。能夠在canvas 標籤裏添加 width 和height 的屬性，設定canvas的寬高，但建議在js中設置。

　　

1 <canvas id="canvas"> 2  Your browser doesn't support Canvas　　　　// 當瀏覽器不支持Canvas 的時候 纔會顯示 3 </canvas>

 

 

二、JavaScript部分

　　2.1得到繪圖環境

　　一開始能夠設置全局變量，canvas的寬高，方便修改。而後用getElementById的方法找到 html中的對應的canvas。而後用getContext() 方法返回一個用於在畫布上繪圖的環境（我傳入的參數是 2d ，指定爲二維繪圖）。

1 var CANVASWIDHT = 800; 2 var CANVASHEIGHT = 600; 3 4 var canvas = document.getElementById("canvas"); 5 var context = canvas.getContext("2d");

 

 　　2.2基本操做

　　　　ontext.moveTo(x,y) 就像是畫畫將筆放在畫布上對應的x,y座標上。

　　　　context.lineTo(x,y)建立從上一點到點（x,y）的線條。

　　　　注意：若使用lineTo()，尚未上一點的時候，這個lineto() 充當moveTo()的做用。 

　　　　context.lineWidth  設置路徑線條寬度

　　　　context.strokeStyle  設置路徑樣式

　　　　context.fillStyle  設置路徑填充樣式

　　　　canvas 編程是基於狀態的 ， 上面提到的都是 設置繪圖的狀態，而最終是由 context.stoke() , context.fill() 繪製完成。

　　　　stroke() 是 繪製路徑

　　　　fill() 是填充路徑（會默認調用closePath() (將路徑閉合)）

 context.moveTo(100,100) // 起點 context.lineTo(200,200) //可直接使用 若沒有moveTo  context.lineWidth = 6 context.strokeStyle = "red" context.fillStyle = "blue"

 context.fill() //繪製 context.stroke() 

/ * 有多種顏色表示方法 #bbb #123456 rgb(1,2,3) rgba(1,2,3,0.6) hsl(20,50%,28%) hsla(40,80%,20%,0.5) */

　2.2線條屬性

　　lineCap 屬性設置或返回線條末端線帽的樣式 

　　　　　　butt(默認) 向線條的每一個末端添加平直的邊緣。
　　　　　　round 向線條的每一個末端添加圓形線帽。
　　　　　　aquare 向線條的每一個末端添加正方形線帽。 

　　lineJoin   屬性設置或返回所建立邊角的類型，當兩條線交匯時。

　　　　　　miter  (默認)建立尖角 
　　　　　　bevel  建立斜角
　　　　　　round 建立圓角
 　　
　　miterLimit    有個默認值 可修改

W3C 這樣解釋的：

提示：只有當 lineJoin 屬性爲 "miter" 時，miterLimit 纔有效。

邊角的角度越小，斜接長度就會越大。

爲了不斜接長度過長，咱們可使用 miterLimit 屬性。

若是斜接長度超過 miterLimit 的值，邊角會以 lineJoin 的 "bevel" 類型來顯示

 　

 

　2.3當須要畫多條路徑的時候，就要用到beginPath() closePath()

　　　beginPath() 開始畫新的路徑

　　　　closePath()  結束，同時若路徑沒閉合會自動閉合路徑

 

　2.4畫矩形

　　context.rect(x,y,width,height)　　//路徑

　　context.fillRect(x,y,width,height)  //直接繪製

　　 context.strokeRect(x,y,width,height) //直接繪製

　　

 

context.moveTo(100,200) context.lineTo(300,200) context.strokeStyle = "red" context.stroke() context.moveTo(400,500) context.lineTo(500,500) context.strokeStyle = "blue" context.stroke()

 //結果都爲藍色 由於第二個context.stroke() 把第一個context.stroke() 覆蓋了 應在兩段代碼之間加上 context.beginPath()

2.5圖形變換

 translate(x,y) 位移 效果會疊加 （因此要用到 save() restore()） rotate(deg) 旋轉 scale(x,y) 會改變其餘屬性

save()　　 保存當前狀態
restore() 　　取出保存狀態

這裏save();和restore();是兩個相互匹配出現的，做用是用來保存畫布的狀態和取出保存的狀態的。這裏稍微解釋一下:

  　　當咱們對畫布進行旋轉，縮放，平移等操做的時候其實咱們是想對特定的元素進行操做，好比圖片，一個矩形等，可是當你用canvas的方法來進行這些操做的時候，實際上是對整個畫布進行了操做，那麼以後在畫布上的元素都會受到影響，因此咱們在操做以前調用canvas.save()來保存畫布當前的狀態，當操做以後取出以前保存過的狀態，這樣就不會對其餘的元素進行影響。

還有 變換矩陣 :

　　其中transform()   級連

　　而setTransform() 不級連，將以前狀態變爲默認狀態，再進行設置。

 

2.6填充樣式

　　2.6.1漸變

　　　　

　　　　step 3

　　　　　　context.fillStyle = grd;

　　　　　注意：記得加路徑

　　

2.6.2模式