キャンバス上

Question

を描くだから私は、私はあなたに私のJavascriptコードを表示して起こっていただきました！私が説明しましょうしましょう、私が作成したこのキャンバスに描くことができるようにしたい：

私は2つのキャンバスの、広場を持っているものを持っています50X50は常にマウスの後ろに、もう1つは私が描画に使用したいものです。これまでのところ動作しますが、描画するたびにマウスをクリックするのではなく、マウスをドラッグして描画を続けたいと思っています。

function start(){ 
var canvas_hover_tmp = document.getElementById('canvas_hover'); 
canvas_hover = canvas_hover_tmp.getContext('2d'); 
var canvas_click_tmp = document.getElementById('canvas_draw'); 
canvas_click = canvas_click_tmp.getContext('2d'); 

window.addEventListener('mousemove', moved, false); //move square with mouse on mouse move 
window.addEventListener('mousedown', draw, false); //draw square to canvas at specific location from where mouse is 
} 

この関数は、ちょうど私が使用したいキャンバスのを取得し、それらを設定し、私は、1つのマウスダウンをクリックする1とドラッグを追跡し、

function moved(pos){ 
canvas_hover.clearRect(0,0,1000,600); 
var x = pos.clientX; 
var y = pos.clientY; 
canvas_hover.fillRect(x-25, y-25,50,50);  
} 

これを描画するために、イベントリスナーを呼び出します関数はこれはマウスがどこにあるかに応じて、特定の場所でキャンバスに描く機能です

function draw(draw_pos){ 
var x = draw_pos.clientX; 
var y = draw_pos.clientY; 
canvas_click.fillRect(x-25,y-25,50,50); 
} 

マウスを置いた、私は箱をホバーすることができます、私はクリックすることができ、それが意志四角形を描画しますが、クリックしてドラッグして図面を続行することはできません。どうやってやるの？

window.addEventListener('load', drawRect, false); //call first function start 

私はdraw = 1という変数を設定しようとしていると、それは描画のとき0の停止を継続する意味1に等しいとき。しかし、私はそれをwhileループに入れ、起こるのはすべてページクラッシュです。

私は、これらの2つのキャンバスをCSS3で設定してお互いにオーバーレイさせています。

申し訳ありませんが、これは混乱している場合、私はすべてのヘルプは素晴らしいだろうどのように単語この

確認されませんでした、

感謝:)

Answer 1

あなたの「設定変数」のアプローチは正しいです。 （「第二の層の上に描く」ために言うdrawOnSecond）あなたがいる限り、マウスボタンが保持されるよう描画したいので、あなたはmousedown、mousemoveとmouseupに耳を傾け、いくつかのグローバル変数を導入する必要があります。

//move square with mouse on mouse move 
window.addEventListener('mousemove', moved, false); 

//draw square to canvas at specific location from where mouse is 
//you shouldn't drop this listener, as this would prevent drawing via clicking 
window.addEventListener('mousedown', draw, false); 

// enable/disable drawing while moving the mouse 
window.addEventListener('mousedown', enableDraw, false); 
window.addEventListener('mouseup', disableDraw, false); // disable 

それからあなたのmoved機能を少し調整し、enableDraw/disableDrawを実装する必要があります。今、魔法のように

function moved(pos){  
    canvas_hover.clearRect(0,0,1000,600); 
    var x = pos.clientX; 
    var y = pos.clientY; 
    canvas_hover.fillRect(x-25, y-25,50,50); 
    if(drawOnSecond) // <<---- global variable, default false 
     draw(pos); 
} 

function enableDraw(){ 
    drawOnSecond = true; 
} 

function disableDraw(){ 
    drawOnSecond = false; 
} 

JSFiddle