canvas用于繪制圖像（通過(guò)javascript)
html5中canvas元素僅僅是圖像的容器角塑，要通過(guò)getContext()方法來(lái)創(chuàng)建一個(gè)繪畫(huà)的環(huán)境姥饰，以及其他命令來(lái)進(jìn)行繪畫(huà)壁晒。
-
html Dom中的getContext()方法
- 定義與用法
用于返回一個(gè)用于在畫(huà)布上繪畫(huà)的環(huán)境 - 參數(shù)
getContext('2d')
因?yàn)楫?dāng)前只有2d是合法的，此方法會(huì)返回一個(gè)環(huán)境對(duì)象，此對(duì)象會(huì)接入一個(gè)二維繪畫(huà)的API价淌。如果以后支持3D繪畫(huà)，3d這個(gè)參數(shù)才可以使用瞒津。
-
beginPath()
- 定義與用法
定義起始路徑或重置當(dāng)前路徑蝉衣。
一般作為定義起始點(diǎn)之前的一個(gè)方法。要和closePath()相對(duì)應(yīng)巷蚪。
-
moveTo()
- 定義與用法
將路徑移動(dòng)到指定點(diǎn)病毡。也就是在beginPath()之后，調(diào)用moveTo(0钓辆，0)剪验，也就是將起始點(diǎn)移動(dòng)到畫(huà)布上的二維坐標(biāo)(0,0)肴焊。
-
lineTo()
- 定義與用法
添加一個(gè)新點(diǎn)，在畫(huà)布中創(chuàng)建從起始點(diǎn)到此新點(diǎn)的一條直線功戚。
例如:
moveTo(0,0);lineTo(100,100)
其作用也就是在(0,0)和(100,100)連成一條直線娶眷。
-
stroke()
- 定義與用法
繪制定義路徑。
例如:
moveTo(0,0);lineTo(100,100)
其作用也就是在(0,0)和(100,100)連成一條直線啸臀。但是如果沒(méi)有stroke()方法的話届宠，這條直線我們是看不到的。
-
fill()
- 定義與用法
填充內(nèi)容乘粒。
stroke()是描邊豌注，fill()是填充。
使用chrome時(shí)灯萍，應(yīng)該將繪制畫(huà)布的<script>方法放在<body>標(biāo)簽中的<canvas></canvas>的下面轧铁。因?yàn)閏hrome需要文檔載入完成之后才可以獲得canvas對(duì)象。
onclick=fun(e)
- 點(diǎn)擊事件里面有一個(gè)參數(shù)e旦棉，e也就代表了這個(gè)點(diǎn)擊事件齿风。
e對(duì)象中有很多變量，其中有一個(gè)offsetX,offsetY.
offsetX：鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo)绑洛。
offsetY：鼠標(biāo)指針位置相對(duì)于觸發(fā)事件的對(duì)象的X坐標(biāo)救斑。
使用box-shadow時(shí)踩了一個(gè)坑！希望以后可以多多注意一下真屯。主要是不要亂弄逗號(hào)脸候。
- 定義與用法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow：水平陰影位置（必需）
v-shadow：垂直陰影位置 （必需）
spread:陰影尺寸
blur：模糊距離
inset：將默認(rèn)外部陰影(outset)改為內(nèi)部陰影 - 實(shí)例
div{box-shadow: 10px 10px 5px #888888;}
div{box-shadow: 10px 10px 5px #888888，10px 10px 5px #888888}
1.png
