Я работаю над проектом, в котором вы можете нарисовать форму вы дали (и любую другую форму), используя мышь. Затем вы можете экспортировать результаты в виде кода JavaScript, используя HTML5 и Canvas.
Мой проект находится на 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>
Спасибо за подсказку, хороший инструмент! Но то, что я ищу, - это то, что можно добавить в мое веб-приложение. Я хотел бы создавать фигуры в своем приложении, понять, что я имею в виду? Я понял, что в этом случае я бы использовал сторонний инструмент (ваш), чтобы создать форму, а затем импортировать ее в мое веб-приложение –