当我使用 Raphael 将鼠标拖动到像 Photoshop 这样的 div 上时，如何绘制简单的图形

Question

这是我的代码：

<div id="handle" style="background:#5f3">

</div>

脚本是：

var set = Raphael(["handle", 400, 400, {
    type: "rect",
    x: 300,
    y: 10,
    width: 25,
    height: 25,
    stroke: "blue"
}, {
    type: "text",
    x: 30,
    y: 40,
    text: "Dump"
}]);

演示在这里：http://jsfiddle.net/ATZNW/

那么如何像 Photoshop 一样绘制简单的图形（例如：矩形），

谢谢

Answer 1

Raphael 是一个矢量图形库，你想要做的是光栅图形。

HTML 元素正是您在这种情况下所需要的。

<canvas id="bg" width="640" height="480"></canvas>

一些基本的 JavaScript：

var bg = document.getElementById('bg').getContext('2d'); // retrieve the 2d context to draw on
bg.fillStyle = '#ff0000'; // set the fill color to red

// draw a filled rectangle at 20/20 thats 200x100 pixel in size
bg.fillRect(20, 20, 200, 100); 

有关该主题的更多信息，请查看 Mozilla 的 Canvas 教程。