画在画布上 [英] Drawing on a canvas

问题描述

所以我想能够绘制到我创建的这个画布上，让我告诉你我的Javascript代码，我会解释发生了什么：

我有两个画布，一个有一个正方形50X50总是跟随鼠标，另一个，我想用来画。到目前为止这是可行的，但我想能够拖动鼠标并继续绘制，而不是每次我想绘制的时候点击鼠标。

  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）; //用鼠标移动方形鼠标移动
 window.addEventListener（'mousedown'，draw，false）; // draw square to canvas at specific location from where mouse is 
} 
  

获取画布的我想使用并设置它们，然后调用事件监听器，一个跟随鼠标，一个点击并拖动和绘制

  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）; 
} 
  

此功能允许我悬停一个框， p>

 函数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）; //调用第一个函数start 
  

我尝试设置一个变量 draw = 1 ，当它等于1时表示继续绘制，当0停止时。但我把它放在一个while循环，所有这一切发生的页面崩溃。

我在CSS3中设置了这两个canvas，以便彼此重叠。

感谢：）

任何帮助都是真棒， p>

解决方案

您的设置变量方法是正确的。你想要绘制只要鼠标按钮保持，所以你必须在 mousedown ， mousemove 和 mouseup 并引入一些全局变量（例如 drawOnSecond 用于在第二层上绘制）：

  //用鼠标移动鼠标移动方块
 window.addEventListener（'mousemove'，moved，false）; 
 
 //在鼠标为
的特定位置绘制方形到画布你不应该删除此侦听器，因为这将阻止通过单击
绘制window.addEventListener 'mousedown'，draw，false）; 
 
 //移动鼠标时启用/禁用绘图
 window.addEventListener（'mousedown'，enableDraw，false）; 
 window.addEventListener（'mouseup'，disableDraw，false）; // disable 
  

然后您必须调整移动函数有点并实现enableDraw / disableDraw：

 函数move（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）//<< ----全局变量，默认false 
 draw（pos）; 
} 
 
 function enableDraw（）{
 drawOnSecond = true; 
} 
 
 function disableDraw（）{
 drawOnSecond = false; 
} 
  

JSFiddle

So I want to be able to draw onto this canvas I created, let me show you my Javascript code and i'll explain whats happening:

I have two canvas's, one that has a square 50X50 always following the mouse, and another that i want to use to draw on. So far this works, but i want to be able to drag the mouse and continue to draw, instead of clicking the mouse every time i want to draw.

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
}  

This function just gets the canvas's i want to use and sets them up, i then call event listeners, one to follow the mouse and one to click down and drag and draw

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);    
}

This function allows me to hover a box, it hovers with the mouse

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

This is the function that draws onto the canvas at a specific location according to where the mouse is, I can click and it will draw a square but i can't click down and drag and continue the drawing, as i would like. How can i do that?

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

I have tried setting a variable called draw = 1 and when it equals one that means continue drawing and when 0 stop. But i put it in a while loop and all that happens is the page crashes.

I have these two canvas's set up in CSS3 to overlay each other.

Sorry if this is confusing, i wasn't sure how to word this

Any help would be awesome,

Thanks :)

解决方案

Your "setting variable" approach is right. You want to draw as long as the mouse button is hold, so you have to listen on mousedown, mousemove and mouseup and introduce some global variable (say drawOnSecond for "draw on second layer"):

//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

Then you have to adjust your moved function a little bit and implement 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

这篇关于画在画布上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！