HTML5 canvas哆啦A夢(mèng)機(jī)器貓圖形代碼是利用HTML5 canvas技術(shù)繪制的機(jī)器貓。
canvas畫圖的基本知識(shí)
context:一直覺(jué)得這個(gè)翻譯成“上下文”真夠蛋疼的,context是一個(gè)封裝了很多繪圖功能的對(duì)象,獲取這個(gè)對(duì)象的方法是
var context =canvas.getContext("2d");
也許這個(gè)2d勾起了大家的無(wú)限遐想,但是很遺憾的告訴你html5還只是個(gè)少女,不提供3d服務(wù)。
canvas元素繪制圖像的時(shí)候有兩種方法,分別是
context.fill()//填充
context.stroke()//繪制邊框
style:在進(jìn)行圖形繪制前,要設(shè)置好繪圖的樣式
context.fillStyle//填充的樣式
context.strokeStyle//邊框樣式
context.lineWidth//圖形邊框?qū)挾?/p>
顏色的表示方式
直接用顏色名稱:"red" "green" "blue"
十六進(jìn)制顏色值: "#EEEEFF"
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
和GDI是如此的相像,所以用過(guò)GDI的朋友應(yīng)該很快就能上手
繪制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
x:矩形起點(diǎn)橫坐標(biāo)(坐標(biāo)原點(diǎn)為canvas的左上角,當(dāng)然確切的來(lái)說(shuō)是原始原點(diǎn),后面寫到變形的時(shí)候你就懂了,現(xiàn)在暫時(shí)不用關(guān)系)
y:矩形起點(diǎn)縱坐標(biāo)
width:矩形長(zhǎng)度
height:矩形高度
機(jī)器貓介紹
3億年前,大雄將野狗野貓和小狗阿一通過(guò)時(shí)光機(jī)放到這個(gè)時(shí)代自己生活,并用進(jìn)化光線進(jìn)化。2千萬(wàn)年前,阿一制造出時(shí)光機(jī)器欲見(jiàn)大雄,結(jié)果碰到時(shí)光亂流年齡倒退,時(shí)間機(jī)器墜毀。貓杰拉一行發(fā)現(xiàn)時(shí)光機(jī)殘骸。
2千萬(wàn)年前,彗星群將撞擊地球。哆啦A夢(mèng)本應(yīng)回3億年前結(jié)果碰到時(shí)光亂流來(lái)到這個(gè)時(shí)代并損壞了時(shí)光機(jī)器。野比碰到了返老還童、失憶的阿一和尋找父母并想揭發(fā)貓杰拉樂(lè)園陰謀的朋友們。貓杰拉制造時(shí)光機(jī)欲去到人類的時(shí)代想支配人類,后陰謀被野比一行粉碎,最后貓狗王國(guó)成功離開(kāi)地球,哆啦A夢(mèng)一行也成功回到了自己的時(shí)代。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版