1

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

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

在此处输入图像描述

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

4

2 回答 2

1

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

我的项目在 http://canvimation.github.com/

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

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

构建形状 建成

构建形状和完成的形状

导出的代码

<!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>
于 2013-03-26T17:34:16.000 回答
0

是否有任何 HTML5 Canvas 库可以像这样在鼠标悬停时绘制图像？

尝试以下两种中的任何一种：

http://processingjs.org/

http://paperjs.org/

于 2013-03-26T16:43:10.920 回答