ホームページ > 記事 > ウェブフロントエンド > ActionScript のような構文を使用して html5 を記述する - パート 5、グラフィック描画
キャンバス自体はグラフィックスであり、直接描画できます。
アクションスクリプトでは、各スプライトにはシェイプはありません。
HTML5 では、すべての描画が同じキャンバス上に描画されます。
1. 各スプライトのグラフィックスを異なる時間に同じ場所に描画する方法
2. ページを常に更新しているため、グラフィックス描画を使用する場合は、それも考慮する必要があります。常に更新する必要があります
そして、スプライトに保存されている各グラフィックスはいくつかの描画コマンドのみを保存し、これらの描画コマンドが描画されるとき、それらはすべてキャンバス上に描画されると仮定します
次に、配列またはこれらの描画コマンドを保存するためのクラス
今度は描画命令と show メソッドを含む LGraphics クラスを構築します
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 にメソッドを追加する方法については、後ほど説明します。円
保存したコマンドは関数なので
それで、描画するときにメソッドを直接呼び出すことができます
それで、showメソッドを少し修正してください
描画クラスが完成しました、完全なクラスはしばらくして完成します。ソースコードを見てください
次に、LSpriteのコンストラクターにself.graphics = new 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}); }
show:function (){ var self = this; if(self.setList.length == 0)return; var key; for(key in self.setList){ self.setList[key](); } }
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]);ActionScript のような構文を使用して html5 を記述することです - パート 5、グラフィックス描画コンテンツ。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。