Question

我正在尝试在我的Web应用程序中创建一个Paint编辑器。为此，我正在研究wPaint（https://github.com/websanova/wPaint），这是一个jQuery插件。有了这个，我可以在鼠标悬停上绘制形状，创建矩形，线条和圆圈。

虽然这是一个很棒的插件，但我无法绘制这样的混合矩形和圆形：

enter image description here

是否有任何jQuery插件或HTML5 Canvas库可以在鼠标悬停上绘制图像，就像这样？

Answer 1

我正在开发一个项目，您可以使用鼠标绘制您给出的形状（以及任何其他形状）。然后，您可以使用HTML5和Canvas将结果导出为Javascript代码。

我的项目位于http://canvimation.github.com/

我的项目的源代码位于https://github.com/canvimation/canvimation.github.com

使用网格获得所需的直角。

Building the shape Built

构建形状和完成形状

导出代码

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #canvasarea
         {
            border:black 1px solid;
         }
      </style>
      <!--[IF LT IE 9]><script type="text/javascript" src = "excanvas.js" ></script><![endif]-->
      <script type="text/javascript">
         function setcanvas()
         {
            var canvas = document.getElementById("canvasarea");
            if (canvas.getContext)
            {
               var ctx = canvas.getContext("2d");
               drawcanvas(ctx);
            }
            else
            {
               alert("Canvas NOT supported");
            }
         }

         function drawcanvas(ctx)
         {

               //Shape0;
               ctx.shadowColor ="rgba(0,0,0,0)";
               ctx.strokeStyle ="rgba(0,0,0,1)";
               ctx.lineWidth = 1;
               ctx.lineCap = "butt";
               ctx.lineJoin = "miter";
               ctx.beginPath();
               ctx.moveTo(177,118);
               ctx.bezierCurveTo(237,176,296,177,357,118);
               ctx.bezierCurveTo(357,148,357,208,357,238);
               ctx.bezierCurveTo(312,238,222,238,177,238);
               ctx.bezierCurveTo(177,208,177,148,177,118);
               ctx.closePath();
               ctx.stroke();
               ctx.shadowOffsetX = 15;
               ctx.shadowOffsetY = 15;
               ctx.shadowBlur = 0;
               ctx.shadowColor = "rgba(0,0,0,0)";
               ctx.fillStyle = "rgba(255,255,255,0)";
               ctx.fill();
         }
      </script>
   </head>
   <body onload="setcanvas()">
      <canvas id="canvasarea" width="1000" height="500"></canvas>
   </body>
</html>

Answer 2

是否有任何HTML5 Canvas库可以在...上绘制图像 mouseover，像这样？

尝试以下任何一种：

http://processingjs.org/

http://paperjs.org/

如何使用html5或jQuery在鼠标悬停上绘制混合矩形和圆形

2 个答案: