HTML5 canvas哆啦A夢機(jī)器貓圖形代碼是利用HTML5 canvas技術(shù)繪制的機(jī)器貓。
canvas畫圖的基本知識
context:一直覺得這個翻譯成“上下文”真夠蛋疼的,context是一個封裝了很多繪圖功能的對象,獲取這個對象的方法是
var context =canvas.getContext("2d");
也許這個2d勾起了大家的無限遐想,但是很遺憾的告訴你html5還只是個少女,不提供3d服務(wù)。
canvas元素繪制圖像的時候有兩種方法,分別是
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是如此的相像,所以用過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)然確切的來說是原始原點(diǎn),后面寫到變形的時候你就懂了,現(xiàn)在暫時不用關(guān)系)
y:矩形起點(diǎn)縱坐標(biāo)
width:矩形長度
height:矩形高度
機(jī)器貓介紹
3億年前,大雄將野狗野貓和小狗阿一通過時光機(jī)放到這個時代自己生活,并用進(jìn)化光線進(jìn)化。2千萬年前,阿一制造出時光機(jī)器欲見大雄,結(jié)果碰到時光亂流年齡倒退,時間機(jī)器墜毀。貓杰拉一行發(fā)現(xiàn)時光機(jī)殘骸。
2千萬年前,彗星群將撞擊地球。哆啦A夢本應(yīng)回3億年前結(jié)果碰到時光亂流來到這個時代并損壞了時光機(jī)器。野比碰到了返老還童、失憶的阿一和尋找父母并想揭發(fā)貓杰拉樂園陰謀的朋友們。貓杰拉制造時光機(jī)欲去到人類的時代想支配人類,后陰謀被野比一行粉碎,最后貓狗王國成功離開地球,哆啦A夢一行也成功回到了自己的時代。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版