|
|
在前一篇博客中，我們測試了 canvas 標簽的用法，并得到了 canvas 標簽的渲染上下文對象，但是并沒有用它繪制任何圖形。在這一篇中，我們先了解一下HTML5繪圖的一些基礎概念，然后再來畫幾個圖形玩玩。
一、坐標系
其實只要玩過一點點圖形編程的人都知道，電腦上的坐標系和數學上的坐標系稍微有點不同，坐標的原點在繪制區域（這里是Canvas）的左上角，X軸正向朝右，Y軸正向朝下，如下圖
二、Stroke 和 Fill
HTML5中將圖形分為兩大類：
第一類稱作 Stroke，我的理解就是輪廓、勾勒或者線條，總之，圖形是由線條組成的；
第二類稱作 Fill，就是填充區域。
上下文對象中有兩個繪制矩形的方法，可以讓我們很好的理解這兩大類圖形的區別：
一個是 strokeRect，還有一個是 fillRect 。
下面的代碼分別用這兩個方法來繪制矩形，你可以分別點擊兩個按鈕來看看有什么不同，從而理解 stroke 和 fill 的區別。
<canvas id="test1" width="200" height="200" style=" background-color: grey">你的瀏覽器不支持 <canvas>標簽，請使用 Chrome 瀏覽器 或者 FireFox 瀏覽器</canvas>
<input type="button" value="strokeRect" onclick="strokeRect();"/>
<input type="button" value="fillRect" onclick="fillRect();"/>
it知識庫：HTML5邊玩邊學（2）：基礎繪圖，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
