用仿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]);
其实,还缺点东西,因为鼠标点击lsprite判断的时候,我只判断了lsprite里保存的bitmap等,如果lsprite里面绘了图,点击的时候,也应该响应鼠标事件的,所以需要判断点击的位置是否在绘制的区域
其实,也简单,给lgraphics添加一个ismoun方法,来判断是否被点击就可以了
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
点击上面的矩形和圆,看看鼠标事件准不准确
摘自 lufy小屋
上一篇: SQLSERVER-使用MERGE语句完成单向表同步
下一篇: 爆笑的套路和忽悠
推荐阅读
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
-
用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
-
用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
-
用仿ActionScript的语法来编写html5——第七篇,自定义按钮
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
-
用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
-
用仿ActionScript的语法来编写html5——第一篇,显示一张图片
-
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件