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

时间2024-01-26 11:14:03发布访客分类HTML浏览915

导读：收集整理的这篇文章主要介绍了html5教程-用仿ActionScript的语法来编写html5――第五篇，Graphics绘图，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光...

收集整理的这篇文章主要介绍了html5教程-用仿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添加一个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

点击上面的矩形和圆，看看鼠标事件准不准确

摘自 lufy小屋

用仿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]);

其实，也简单，给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

点击上面的矩形和圆，看看鼠标事件准不准确

摘自 lufy小屋

觉得可用，就经常来吧！欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

Array div HTML html5 Map post-format-gallery this 数组

若转载请注明出处：用仿ActionScript的语法来编写html5――第五篇，Graphics绘图
本文地址： https://pptw.com/jishu/586686.html

用仿ActionScript的语法来编写html5――第四篇，继承与简单的rpg 用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画