1

Web アプリケーションで一種のペイント エディタを作成しようとしています。そのために、jQuery プラグインであるwPaint ( https://github.com/websanova/wPaint ) を勉強していました。これにより、マウスオーバーで図形を描画し、長方形、線、円を作成できます。

これは素晴らしいプラグインですが、次のような四角形と円が混在する形状を描画することはできません。

ここに画像の説明を入力

このように、マウスオーバーで画像を描画できる 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 ライブラリはありますか?

次の 2 つのいずれかを試してください。

http://processingjs.org/

http://paperjs.org/

于 2013-03-26T16:43:10.920 に答える