原因：矩形cavnasを監視して、そのトラックのマウスの動きは、1つの矩形で1を残して描画するマウスを移動すると、
長方形の公式をクリアするには（ctx.clearRectを与える）が、これは空に全体のキャンバスですので、必要性は絶えずへ
問題は常にスプラッシュスクリーンがあるように新しい写真は、キャンバスを示しています。
それでは、どのようにそれを解決するには？
マイクロソフトが 提供してダブルバッファのグラフィックス 技術を、あなたは記事を見るにはここをクリックすることができます。
具体的には、図面を2層cavnas行われた場合に、仮表示層の一つの層、表示層処理上のマウス、モニタイベント、
すべての空の空の場合にのみ、一時的な層、あなたはスプラッシュスクリーンの問題を解決することができるようにします。
コードの一部を次のように
<！ -一時的な層- >
<キャンバスID = "customPositionImg2" REF = "表2"スタイル= "表示：なし;"> </キャンバス>
<！ -表示層がダウンしてマウスを増大させ、移動、リリースイベント- >
<キャンバスID = "customPositionImg" REF = "表" @ mouseDownイベント= "mouseDownイベント" @ mouseMoveイベント= "mouseMoveイベント" @のmouseUp = "のmouseUp"スタイル= ""> </キャンバス>
ディスプレイ表示画像層：
//必要性を直接コピーする場合には、フォトギャラリーダイアログオープンフックで書かれているので、このプロジェクトは、カスタムダイアログの描画ボードを表示することですので、
行のコード内vue.nextTickを
ショー（）{
vue.nextTick（_ => {
customCanvas =この$のrefs.tableを聞かせ; //キャンバス显示层
this.customstyle = '';
customCanvas.height = 740;
customCanvas.width = 1460;
this.customcxt = customCanvas.getContext（ ） "2D";
; IMG =新しいイメージが（）せ
img.src = this.imgSrc、
それを聞かせ=この;
img.onload =関数（）{
that.customRwidth = customCanvas.width / img.width; //原图与展示图片的宽高比
that.customRheight = customCanvas.height / img.height;
that.customcxt.drawImage（IMG、0、0、customCanvas.width、customCanvas.height）;
};
}）
}、
マウスイベント
//ダウンマウスときに実行
mouseDownイベント（E）{
this.isMouseDownInCanvas = trueに、
スタート同じマウスクリックが第二の位置と終了位置を形成する矩形パターンを描画する防ぐために描画した後、マウス//押下
this.endX = Eを。 offsetX;
this.endY = e.offsetY;
this.startX = e.offsetX;
this.startY = e.offsetY;
}
//マウスモバイル実行
mouseMoveイベント（E）{
//マウスの押圧操作を行うと（this.isMouseDownInCanvas）を{
にconsole.log（e.offsetX、e.offsetY）;
IF（（this.endX =を！ ！e.offsetX）||（this.endY = e.offsetY））{
this.endX = e.offsetX;
this.endY = e.offsetY;
せwWidth = this.endX - this.startX、
この= wheigthましょう。 ENDY - this.startY;
このtempCanvas = $ refs.table2せ; //キャンバスの一時的な層。
tempCtx = tempCanvas.getContext（ '2D'）しましょう。
tempCanvas.width = 1460; = 740 tempCanvas.height; //幅と高さを設定します
一時的な層の面積の指定//明確なすべての画素
tempCtx.clearRect（0、0、1460、740）;
//ショーの写真をもう一度
画像新しい新しいIMGはLET（）=;
img.src = this.imgSrcと、
LET =このこと;
img.onload =関数（）{
that.customcxt.drawImage（IMG、0、0,1460、740）;
};
この。 customcxt.strokeStyle = "＃1 00FF00"; //色矩形
this.customcxt.lineWidth = "2"; //矩形幅
this.customcxt.strokeRect（this.startX、this.startY、wwidth、 wheigth）; // 矩形描画
}他{
マウスダウン//固定矩形の表示サイズを。
wwidth2 = this.endX LET - this.startX;
せwheigth2 = this.endY - this.startY;
this.customcxt.strokeRect（this.startX、this.startY、wwidth2、wheigth2）
}
}
}、
場合マウス//放出演奏
のmouseUp（E）{
this.isMouseDownInCanvas = falseに;
//最終的な長方形の枠を描く
せwWidth = this.endX - this.startX;
wheigth = this.endYせ- this.startY、
これを.customcxt.strokeRect（this.startX、this.startY、wWidth、wheigthは）
}
上記のコードは、すべての例示されます。ようこそメッセージ。