學習筆記 HTML5之canvas

虐了一下午的canvas

先擼了乙個七巧板

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>無標題文件
title
>
head
>
<
body
>
<
canvas 
id="canvas"
style
="border:1px solid #ccc; display:block; margin:50px auto;"
>
canvas
>
<
script
>
vartangram=[
,,],color:
'#caff67'},
,,,],color:
'#67becf'},
,,,],color:
'#ef3d61'},
,,],color:
'#f9f51a'},
,,,],color:
'#a594c0'},
,,],color:
'#fa8ecc'},
,,],color:
'#f6ca29'},
]window.onload
=function
()     
function
draw(piece,cxt)
script
>
body
>
html
>

繪圖分兩個步驟，首先描繪路徑軌跡，然後渲染填充。

在頁面中存在繪製多個圖形的情況下，避免各個路徑之間互相干擾，要把每段完整的路徑用beginpath()和closepath()包圍起來保證**的完整性。

值得一提的是在路徑末端加了closepath()後，繪製的路徑會自動收尾封閉，即如果繪製了三角形的兩條邊，那麼closepath()會自動補全第三條邊使圖形成為封閉的三角形。

其中繪製圓形路徑用arc(x,y,r,0,2*math.pi，true),其中xy為圓心座標，r為半徑，0為起點，2*math.pi為終點，true為逆時針方向繪製該圓

圓形解剖：

將路徑變成線條使用stroke()，用linewidth屬性設定線條的粗細，用strokestyle設定顏色；

填充路徑用fill()，用fillstyle設定填充色。

吃飯，未完待續。。。

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後，web 世界已經經歷了巨變。html5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...