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