jcanvasが進行中のキャンバスで基本的な描画を行いました:
this.div.bind("mousedown", function(ev) {
ev.preventDefault();
ev.stopPropagation();
var point= [];
var pX, pY;
point[0]= (ev.pageX- this.offsetLeft);
point[1]= (ev.pageY- this.offsetTop);
that.div.bind("mousemove", function(ev) {
ev.preventDefault();
ev.stopPropagation();
pX= (ev.pageX- this.offsetLeft);
pY= (ev.pageY- this.offsetTop);
that.canvas.drawLine({
strokeStyle: "#000",
strokeWidth: 10,
rounded: true,
x1: point[0], y1: point[1],
x2: pX, y2: pY,
});
point[0]= pX;
point[1]= pY;
});
that.div.bind("mouseup", function(ev) {
ev.preventDefault();
ev.stopPropagation();
that.div
.unbind('mousemove')
.unbind('mouseup');
});
});
mousedown イベントで pX と pY を宣言し、mouseover イベントにバインドされた内部関数へのクロージャーとしてアクセスできるようにしていることに気付きました。マウスオーバーイベント内で宣言するか、現在のように宣言する方が速いのではないかと思っていました。
一方では、これらの 2 つの変数を外部で宣言するということは、マウスオーバー イベントが呼び出されたときに割り当てられる変数が少なくなることを意味します (これは多くの場合です)。一方、実際にそれらの変数にアクセスするということは、それらを見つけるために 2 つの異なるスコープを調べる必要があることを意味します。 .
Javascriptでどちらの操作が遅いのか気になりました。私の直感では、Javascript エンジンがローカル変数にスタックベースの割り当てを使用すると仮定すると、割り当てはかなり遅くなるはずですが、確信が持てません。