ActionScript のような構文を使用して html5 を記述する - パート 5、グラフィック描画-H5 チュートリアル-php.cn

ActionScript のような構文を使用して html5 を記述する - パート 5、グラフィック描画

黄舟

リリース： 2017-01-17 16:44:30

オリジナル

1363 人が閲覧しました

キャンバス自体はグラフィックスであり、直接描画できます。
アクションスクリプトでは、各スプライトにはシェイプはありません。
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メソッドを少し修正してください

rreee

描画クラスが完成しました、完全なクラスはしばらくして完成します。ソースコードを見てください

次に、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});  
    }

ログイン後にコピー

実際には、何かが足りないため、 LSprite上のマウスクリックで判定します。この時はLSpriteに保存されているビットマップなどを判定するだけでしたが、LSpriteに絵が描かれている場合は、クリックされた時のマウスイベントにも反応するはずなので、クリックされたかどうかを判定する必要があります。実際、これも簡単です。LGraphics にクリックされたかどうかを判定する ismouseon メソッドを追加するだけです

show:function (){  
    var self = this;  
    if(self.setList.length == 0)return;  
    var key;  
    for(key in self.setList){  
        self.setList[key]();  
    }  
}

ログイン後にコピー

showList は描画領域のサイズを保存するので便利です

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 サイト (m.sbmmt.com) に注目してください。