HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。

canvas画图的基本知识

context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的方法是

var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想,但是很遗憾的告诉你html5还只是个少女,不提供3d服务。

canvas元素绘制图像的时候有两种方法,分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前,要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像,所以用过GDI的朋友应该很快就能上手

绘制矩形 context.fillRect(x,y,width,height) strokeRect(x,y,width,height)

x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)

y:矩形起点纵坐标

width:矩形长度

height:矩形高度

机器猫介绍

3亿年前,大雄将野狗野猫和小狗阿一通过时光机放到这个时代自己生活,并用进化光线进化。2千万年前,阿一制造出时光机器欲见大雄,结果碰到时光乱流年龄倒退,时间机器坠毁。猫杰拉一行发现时光机残骸。

2千万年前,彗星群将撞击地球。哆啦A梦本应回3亿年前结果碰到时光乱流来到这个时代并损坏了时光机器。野比碰到了返老还童、失忆的阿一和寻找父母并想揭发猫杰拉乐园阴谋的朋友们。猫杰拉制造时光机欲去到人类的时代想支配人类,后阴谋被野比一行粉碎,最后猫狗王国成功离开地球,哆啦A梦一行也成功回到了自己的时代。