javascript - 创建多个独立的画布绘图板

Question

如果我想在一个页面中创建多个画布绘图板，然后独立工作。

我尝试的方法如下： http ://dev.opera.com/articles/view/html5-canvas-painting/

我所做的就像添加这些：

canvas = document.getElementById('imageView');
context = canvas.getContext('2d');
canvas2 = document.getElementById('imageView2');
context2 = canvas2.getContext('2d');**

tool = new tool_pencil();

canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup',   ev_canvas, false);
canvas2.addEventListener('mousedown', ev_canvas, false);
canvas2.addEventListener('mousemove', ev_canvas, false);
canvas2.addEventListener('mouseup',   ev_canvas, false);

并且绘图都来到了第一个画布上。谁能给我一个完整的代码来实现这个目标？

此外，如果我想存储每个白板的信息怎么办？就像记住白板的所有绘图（不要将其保存为 .jpg）。谢谢！

Answer 1

看起来该函数在第一个画布上绘制，无论是什么事件触发它。你可以这样做：

...
function ev_mousemove (ev) {
 var x, y;
 var context = ev.target.getContext('2d');
...

这应该将以下功能重新路由到正确的画布。