用仿ActionScript的语法来编写html5—

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

用仿ActionScript的语法来编写html5——第一篇，显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6760812
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
http://blog.csdn.net/lufy_legend/article/details/6770713

用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

http://blog.csdn.net/lufy_legend/article/details/6771962

canvas本身就是一个Graphics，可以直接进行绘图
在actionscript里面，每个Sprite都有一个Graphics，Shape我先不考虑了，它更容易实现些，
在Html5中，绘图都是绘在同一个canvas上面的，所以我们现在需要考虑两个问题，
1，如何把每个Sprite里的Graphics在不同的时刻，画在同一个地方
2，因为我们现在在不停的刷新页面，所以如果我们用Graphics绘图，那么它也需要不断的刷新

那我现在依然先假设，每一个Sprite储存的Graphics，只保存一些绘图的命令，而这些绘图命令绘图的时候，全都绘在canvas上
那么按照假设，我需要一个保存这些绘图命令的数组或者类
我现在建一个LGraphics类,这个类里面应该包含绘图指令,和show方法

function LGraphics(){var self = this;self.type = "LGraphics";self.color = "#000000";self.i = 0;self.alpha = 1;self.setList = new Array();self.showList = new Array();
}
LGraphics.prototype = {show:function (){var self = this;if(self.setList.length == 0)return;//绘图}
}

我在绘图的时候，把绘图指令全部添加到setList里面，然后调用show方法，进行绘图
另外还有一个showList，用来保存绘图的区域，作用一会就知道了
下面来解决指令如何储存的问题
给LGraphics添加方法

drawLine:function (thickness,lineColor,pointArray){var self = this;self.setList.push(function(){LGlobal.canvas.beginPath();LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);LGlobal.canvas.lineWidth = thickness;LGlobal.canvas.strokeStyle = lineColor;LGlobal.canvas.closePath();LGlobal.canvas.stroke();});},drawRect:function (thickness,lineColor,pointArray,isfill,color){var self = this;self.setList.push(function(){LGlobal.canvas.beginPath();LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);if(isfill){LGlobal.canvas.fillStyle = color;LGlobal.canvas.fill();}LGlobal.canvas.lineWidth = thickness;LGlobal.canvas.strokeStyle = lineColor;LGlobal.canvas.stroke();});self.showList.push({type:"rect",value:pointArray});},drawArc:function(thickness,lineColor,pointArray,isfill,color){var self = this;self.setList.push(function(){LGlobal.canvas.beginPath();LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);if(isfill){LGlobal.canvas.fillStyle = color;LGlobal.canvas.fill();}LGlobal.canvas.lineWidth = thickness;LGlobal.canvas.strokeStyle = lineColor;LGlobal.canvas.stroke();});self.showList.push({type:"arc",value:pointArray});}

三个方法分别是画一条线，一个矩形，一个圆
因为我储存的指令是function
所以，我绘图的时候，可以直接调用方法
所以，将show方法稍作修改

 show:function (){var self = this;if(self.setList.length == 0)return;var key;for(key in self.setList){self.setList[key]();}}

这样绘图类就完成了，完整类一会儿请看源代码

接着，在LSprite的构造器里面加上self.graphics = new LGraphics();就可以随时进行绘图了
代码如下

backLayer = new LSprite();addChild(backLayer);//画一圆backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");//画一个矩形backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");//画一条线backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);

其实，还缺点东西，因为鼠标点击LSprite判断的时候，我只判断了LSprite里保存的bitmap等，如果LSprite里面绘了图，点击的时候，也应该响应鼠标事件的，所以需要判断点击的位置是否在绘制的区域
其实，也简单，给LGraphics添加一个ismouseon方法，来判断是否被点击就可以了

ismouseon:function(event,cood){var self = this;var key;for(key in self.showList){if(self.showList[key].type == "rect"){if(event.offsetX >= self.showList[key].value[0] + cood.x && event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] && event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){return true;}}else if(self.showList[key].type == "arc"){var xl = self.showList[key].value[0] + cood.x - event.offsetX;var yl = self.showList[key].value[1] + cood.y - event.offsetY;return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];}}return false;}

showList里面保存着绘图的区域大小，现在派上用场了

init(80,"mylegend",800,480,main);var backLayer;
function main(){legendLoadOver();backLayer = new LSprite();addChild(backLayer);//画一圆backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");//画一个矩形backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");//画一条线backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);//鼠标点击判断backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);
}function onmousedown(event){alert("isclick");
}

看一下成果吧,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas04/index.html
点击上面的矩形和圆，看看鼠标事件准不准确

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图相关推荐

用仿ActionScript的语法来编写html5——第六篇，TextField与输入框
用仿ActionScript的语法来编写html5--第六篇,TextField与输入框一,对比 1,html5中首先看看在html5的canvas中的文字显示 var canvas = docu ...
html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动...
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用. 这样的话,添加鼠标事件,其实只需要给ca ...
用仿ActionScript的语法来编写html5——第七篇，自定义按钮
第七篇,自定义按钮这次弄个简单点的,自定义按钮. 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了. 下面是添加按钮的代码, function gameInit(even ...
用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件
一,LegendForHtml5Programming1.0库件是什么? 它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称 ...
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示. 这次用Sprite来动态显示图片. 依然遵循上一篇对显示对象的处理的思路,添加LSprite类 ...
html5语法参考图片,仿AS语法来写HTML5—第1章，显示一张图片
最近开始学习html5,因为一直都是研究as,所以还是觉得as顺眼一点,但是html5也不能不学,于是就想出了,可以把html5用as的语法来写出来,做游戏应该来的比较顺手一些,下面开始第一篇第一篇 ...
html5常见使用的属性,HTML5常见五种常规全局属性
HTML5中有很多的属性,新增了一个HTML中没有的属性:全局属性. 接下来一起看HTML5常见五种常规全局属性. contentEditable属性 contentEditable是由微软开发.被其 ...
学好英语要从多方面入手，语法就是一个方面，本篇经验将从大的方面宏观地谈谈如何学好英语语法...
学好英语要从多方面入手,语法就是一个方面,本篇经验将从大的方面宏观地谈谈如何学好英语语法. 方法/步骤 1 对于一个初学者来说,刚开始不应过度在意语法. 这就好比小孩走路,没有必要掌握技巧,需要的只是 ...

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图相关推荐

最新文章

热门文章