htmlキャンバスのパスへの参照を保存する

私はキャンバスに描画しているいくつかのコードに取り組んでいます。コードの一部がキャンバスに線を描きます。これらの行の位置と色は変更されませんが、他のコードが影響を受けている可能性があるため、再描画する必要があります（例：上に描画）。htmlキャンバスのパスへの参照を保存する

描画する線数は数百になることがあります。この場合、プロファイリングでは描画に約200msかかることがわかります。これを多少最適化することを検討しています。

キャンバスに描画するときは、基本的にパスにポイントを追加してから、準備ができたらそのパスを塗りつぶしたり、ストロークすることができます。キャンバス上のピクセルは古くなっていますが、パスへの参照を保持できれば、以前に構築されたパスを再描画するだけで簡単に更新できます。

私の質問は、あなたはどのようにPathオブジェクトを取得しますか？

塗りと線方法はaccept a path objectに見える、とだけおさらいに、だから... ...

をスペックはmethods for Path定義していますが、私はどこにも実際のPathクラスを見つけることができないよう：

私はこのようなものを持っている：

012：私が好きな何

function update() { 
    context.beginPath(); 
    // lots of lines added to the default path... 
    context.moveTo(x1, y1); context.lineTo(somewhere, else); 
    context.moveTo(x2, y2); context.lineTo(somewhere, else); 

    context.stroke(); 
}

はこのようなものです

出典

2014-01-12 nickf

canvas仕様では、ブラウザにまだ実装されていないPathオブジェクトが必要です。

BTWを実装すると、pathオブジェクトはcontext.isPointInPath（myPath）と組み合わせるとヒットテストに役立ちます。

パスのストロークが描画されるキャンバスが含まれているJSオブジェクトを作成します。いつか...ここ

は、ブラウザが追いつくまで、あなたがあなた自身のPathオブジェクトを作成することができます方法です。
myPath.stroke（）を実行する場合は、myVisibleContext.drawImage（myPath.context、0,0）を使用してパスのキャンバスを描画キャンバスに「blit」します。

デモ：http://jsfiddle.net/m1erickson/QLJv8/

コード：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    function Path(maxWidth,maxHeight,color,linewidth,drawingContext){ 
     this.width=maxWidth; 
     this.height=maxHeight; 
     this.drawingCtx=drawingContext; 
     this.points=[] 
     this.canvas=document.createElement("canvas"); 
     this.canvas.width=maxWidth; 
     this.canvas.height=maxHeight; 
     this.ctx=this.canvas.getContext("2d"); 
     this.ctx.strokeStyle=color; 
     this.ctx.lineWidth=linewidth; 
     this.lastX; 
     this.lastY; 
    } 
    Path.prototype.moveTo=function(x,y){ 
     this.lastX=x; 
     this.lastY=y; 

    } 
    Path.prototype.lineTo=function(x,y){ 
     this.ctx.moveTo(this.lastX,this.lastY); 
     this.ctx.lineTo(x,y); 
     this.ctx.stroke(); 
     this.lastX=x; 
     this.lastY=y; 
    } 
    Path.prototype.stroke=function(){ 
     this.drawingCtx.drawImage(this.canvas,0,0); 
    } 

    // create a new path object 

    var p=new Path(300,300,"blue",2,ctx); 

    // set the Path's drawing commands 

    p.moveTo(69,91); 
    p.lineTo(250,150); 
    p.moveTo(69,208); 
    p.lineTo(180,54); 
    p.lineTo(180,245); 
    p.lineTo(69,91); 
    p.moveTo(69,208); 
    p.lineTo(250,150); 

    // draw the Path.canvas to the drawing canvas 
    p.stroke(); 

    // tests... 

    $("#stroke").click(function(){ 
     p.stroke(); 
    }); 
    $("#erase").click(function(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
    }); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <button id="stroke">Path.stroke</button><br> 
    <button id="erase">Erase main canvas</button><br> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

出典

2014-01-12 18:26:12 markE

PathオブジェクトはChrome Canaryで使用できるようになりました。すぐに通常のChromeで。 – K3N

@Kenパスオブジェクトがクロスブラウザーで利用できるという考えで、私は私の顔に大きな笑みを浮かべています！ – markE

が判明、それは何のブラウザはまだそれをサポートしていないことばかりですが、このブログ（2013年1月24日付け）http://www.rgraph.net/blog/2013/january/html5-canvas-path-objects.html

出典

2014-01-12 16:17:53 nickf

クロムカナリアは今のパスをサポートしており、すぐに通常のクロームになります（彼らは彼らの心を変更しない限り）。 – K3N

によると彼らのキャンバスには、パスのサポートはありませんが、なぜSVGラインを使用し、その設定しないでくださいzIndexが他人の上にあること。

出典

2014-01-12 16:20:37 Anas

キャンバス描画APIのいずれも、オブジェクトへの参照を保持できません。キャンバスではビットマップにピクセルを描画でき、SVGのようにオブジェクトを作成したり操作したりすることはできません。

パフォーマンスを最適化して同じパスを何度も再利用したい場合は、別のキャンバスオブジェクトに一度描画してからdrawImageを使用してそのキャンバスを他のキャンバスに描画することができますキャンバスを引数として取ることができます）。

出典

2014-01-12 17:44:10 user2755763

さて、キャンバス描画の仕様は、実際にはベクトルオブジェクト（http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#path-objects）への参照を与えていますが、これを公開しているブラウザはありません明らかに。 – nickf

htmlキャンバスのパスへの参照を保存する

答えて

関連する問題