HTML5技术

仿AS语法来写HTML5—第5章，Graphics绘图

字号+ 作者：lufy 来源： 2014-11-16 21:26 我要评论( )

canvas本身就是一个Graphics，可以直接进行绘图 在actionscript里面，每个Sprite都有一个Graphics，Shape我先不考虑了，它更容易实现些， 在 Html5 中，绘图都是绘在同一个 canvas 上面的，所以我

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

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

JavaScript Code复制内容到剪贴板
  1. function LGraphics(){  
  2.         var self = this;  
  3.         self.type = "LGraphics";  
  4.         self.color = "#000000";  
  5.         self.i = 0;  
  6.         self.alpha = 1;  
  7.         self.setList = new Array();  
  8.         self.showList = new Array();  
  9. }  
  10. LGraphics.prototype = {  
  11.         show:function (){  
  12.                 var self = this;  
  13.                 if(self.setList.length == 0)return;  
  14.                 //绘图  
  15.         }  
  16. }  
 

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

JavaScript Code复制内容到剪贴板
  1. drawLine:function (thickness,lineColor,pointArray){  
  2.                 var self = this;  
  3.                 self.setList.push(function(){  
  4.                         LGlobal.canvas.beginPath();  
  5.                         LGlobal.canvas.moveTo(pointArray[0],pointArray[1]);  
  6.                         LGlobal.canvas.lineTo(pointArray[2],pointArray[3]);  
  7.                         LGlobal.canvas.lineWidth = thickness;  
  8.                         LGlobal.canvas.strokeStyle = lineColor;  
  9.                         LGlobal.canvas.closePath();  
  10.                         LGlobal.canvas.stroke();  
  11.                 });  
  12.         },  
  13.         drawRect:function (thickness,lineColor,pointArray,isfill,color){  
  14.                 var self = this;  
  15.                 self.setList.push(function(){  
  16.                         LGlobal.canvas.beginPath();  
  17.                         LGlobal.canvas.rect(pointArray[0],pointArray[1],pointArray[2],pointArray[3]);  
  18.                         if(isfill){  
  19.                                 LGlobal.canvas.fillStyle = color;  
  20.                                 LGlobal.canvas.fill();  
  21.                         }  
  22.                         LGlobal.canvas.lineWidth = thickness;  
  23.                         LGlobal.canvas.strokeStyle = lineColor;  
  24.                         LGlobal.canvas.stroke();  
  25.                 });  
  26.                 self.showList.push({type:"rect",value:pointArray});  
  27.         },  
  28.         drawArc:function(thickness,lineColor,pointArray,isfill,color){  
  29.                 var self = this;  
  30.                 self.setList.push(function(){  
  31.                         LGlobal.canvas.beginPath();  
  32.                         LGlobal.canvas.arc(pointArray[0],pointArray[1],pointArray[2],pointArray[3],pointArray[4],pointArray[5]);  
  33.                         if(isfill){  
  34.                                 LGlobal.canvas.fillStyle = color;  
  35.                                 LGlobal.canvas.fill();  
  36.                         }  
  37.                         LGlobal.canvas.lineWidth = thickness;  
  38.                         LGlobal.canvas.strokeStyle = lineColor;  
  39.                         LGlobal.canvas.stroke();  
  40.                 });  
  41.                 self.showList.push({type:"arc",value:pointArray});  
  42.         }  

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

JavaScript Code复制内容到剪贴板
  1. show:function (){  
  2.                 var self = this;  
  3.                 if(self.setList.length == 0)return;  
  4.                 var key;  
  5.                 for(key in self.setList){  
  6.                         self.setList[key]();  
  7.                 }  
  8.         }  
这样绘图类就完成了，完整类一会儿请看源代码
接着，在LSprite的构造器里面加上self.graphics = new LGraphics();就可以随时进行绘图了
代码如下
JavaScript Code复制内容到剪贴板
  1. backLayer = new LSprite();  
  2.         addChild(backLayer);  
  3.         //画一圆  
  4.         backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
  5.         //画一个矩形  
  6.             backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
  7.         //画一条线  
  8.         backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);  

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

JavaScript Code复制内容到剪贴板
  1. ismouseon:function(event,cood){  
  2.                 var self = this;  
  3.                 var key;  
  4.                 for(key in self.showList){  
  5.                         if(self.showList[key].type == "rect"){  
  6.                                 if(event.offsetX >= self.showList[key].value[0] + cood.x && event.offsetX <= self.showList[key].value[0] + cood.x + self.showList[key].value[2] &&   
  7.                                         event.offsetY >= self.showList[key].value[1] + cood.y && event.offsetY <= self.showList[key].value[1] + cood.y + self.showList[key].value[3]){  
  8.                                         return true;  
  9.                                 }  
  10.                         }else if(self.showList[key].type == "arc"){  
  11.                                 var xl = self.showList[key].value[0] + cood.x - event.offsetX;  
  12.                                 var yl = self.showList[key].value[1] + cood.y - event.offsetY;  
  13.                                 return xl*xl+yl*yl <= self.showList[key].value[2]*self.showList[key].value[2];  
  14.                         }  
  15.                 }  
  16.                   
  17.                 return false;  
  18.         }  

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

JavaScript Code复制内容到剪贴板
  1. init(80,"mylegend",800,480,main);  
  2.   
  3. var backLayer;  
  4. function main(){  
  5.         legendLoadOver();  
  6.           
  7.         backLayer = new LSprite();  
  8.         addChild(backLayer);  
  9.           
  10.         //画一圆  
  11.         backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");  
  12.         //画一个矩形  
  13.             backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");  
  14.         //画一条线  
  15.         backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);  
  16.         //鼠标点击判断  
  17.         backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown);  
  18. }  
  19.   
  20. function onmousedown(event){  
  21.         alert("isclick");  
  22. }  
看一下成果吧

http://fsanguo.comoj.com/html5/jstoas04/index.html
点击上面的矩形和圆，看看鼠标事件准不准确

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5-终篇LegendForHtml5Programming

    仿AS语法来写HTML5-终篇LegendForHtml5Programming

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章，URLLoader读取文件

    仿AS语法来写HTML5—第9章，URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章，图片处理+粒子

    仿AS语法来写HTML5—第8章，图片处理+粒子

    2014-11-16 21:26

网友点评
精彩导读
Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

HTML5优势 - 计划

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习