用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5——第五篇，Graphics绘图
用仿ActionScript的语法来编写html5——第一篇，
用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画
用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动
用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg
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]);&nb
补充：web前端 , HTML 5 ,
