canvas学习日记一
? ? 由于工作的需求，促進我學習html5 canvas技術，canvas是html5最強大的元素之一。使用它可以在瀏覽器中做一番奇妙的事情。大家或多或少都聽過canvas的強大用處，我這里就不再贅述了。
? ??canvas的強大功能是通過canvas的context對象表現出來的，該環境變量是可以從canvas元素身上獲取。
? ??下面先看一個canvas的例子方便講解；在canvas上顯示一個字符串，該字符串大致與canvas水平垂直居中。代碼如下：
<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title> canvas </title><style type="text/css">body {background:#DDD;}#canvas {margin:10px; padding:10px;background:#FFF;border:thin inset #AAA;}</style> </head> <body><canvas id="canvas" width="600" height="300">canvas not supported</canvas> </body> </html>? ??在上述的html代碼中還使用了css對canvas來設置相應的背景色等其他css屬性。所以canvas跟其它的div，h1等元素一樣可以設置css樣式。canvas有趣的不是在于其可以設置才算是樣式，而是在于javascript代碼，下面我上述的html中的canvas寫程序了。代碼如下：
? ??
<script type="text/javascript">var canvas = document.getElementById('canvas'),context = canvas.getContext('2d');context.font = '38pt Arial';context.fillStyle = 'cornflowerblue';context.strokeStyle = 'blue';context.fillText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15);context.strokeText('Hello Canvas', canvas.width / 2 - 150, canvas.height / 2 + 15); </script>??上面的javascript代碼主要有三步：
1.使用document.getElementById方法獲取canvas元素。
2.在canvas對象上調用getContext('2d')方法，獲取繪圖環境變量
3.使用繪圖環境對象在canvas元素上進行繪制。
fillStyle與strokeStyle是指定圖形填充，路徑描邊時所使用的顏色，漸變或圖案。
fillText()和strokeStyle都需要3個參數：要繪制的文本內容，以及在canvas中顯示文本的橫縱坐標。
ps：在是設置canvas的寬度和高度的時，不能使用px后綴，雖然很多瀏覽器支持使用px后綴，但是從技術上來說不被canvas規范接受，而且這些取值只能是非負數。
在給canvas設置寬高的時候，有兩種方法：一是直接給canvas的width和height指定屬性值；二是在css中設置width和height。但是，這種設置會產生意外的效果。這里就引出了，canvas元素的大小與繪圖表面的大小。如圖：
蒙了吧，兩個元素大小一樣，繪制的圖卻不同。其實主要是修改width和height屬性來設置canvas元素的大小，這樣的話，元素自身與繪畫表面的大小都會被設置成屬性值。而通過css來設置的width和height值只是修改了元素的大小并沒有修改繪畫表面的大小，因此，瀏覽器會將繪畫表面從默認值（300*150）拉伸到修改后的值（600*300）。
canvas是個很強大的元素，我現在所知道的只是認識canvas這個元素，需要學習的還很長，day day up吧。
?
轉載于:https://www.cnblogs.com/qiheng/p/3903957.html
總結
以上是生活随笔為你收集整理的canvas学习日记一的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 对小程序的见解
- 下一篇： 学习日记day16 ps