내 웹 응용 프로그램에서 Paint 편집기를 만들려고합니다. 이를 위해 jQuery 플러그인 인 wPaint (https://github.com/websanova/wPaint)를 연구했습니다. 이를 통해 마우스 오버시 모양을 그릴 수 있고 직사각형, 선 및 원을 만들 수 있습니다.html5 또는 jQuery를 사용하여 mouseover에서 혼합 된 사각형 및 원 모양을 그리는 방법
이 좋은 플러그인이 있지만, 나는 혼합 사각형과 원을 그릴 수는 다음과 같이 모양 :
가있는 마우스 오버에 이미지를 그릴 수있는 jQuery 플러그인 또는 HTML5 캔버스 라이브러리 , 이런?
mouseover에서 이미지를 그릴 수있는 HTML5 캔버스 라이브러리가 있습니까?
이 두 가지 중 하나를 시도해보십시오
을 나는 당신이 준 모양 (그리고 다른 모양)을 그릴 수있게된다 프로젝트에 일하고을 사용하여 쥐. 그런 다음 결과를 HTML5 및 Canvas를 사용하여 Javascript 코드로 내보낼 수 있습니다.
내 프로젝트 내 프로젝트의 소스 코드는 당신이 필요로하는 직각을 얻기 위해 그리드 https://github.com/canvimation/canvimation.github.com
사용에있다 http://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>
감사합니다, 좋은 도구를 구축! 하지만 내가 찾고있는 것은 내 웹 응용 프로그램에 추가 할 수있는 것입니다. 내 앱에서 도형을 만들고 싶습니다. 무슨 뜻인지 아시나요? 이 경우 제 3 자 도구 (귀하의 것)를 사용하여 도형을 만든 다음이를 웹 응용 프로그램으로 가져 오는 것으로 이해했습니다. –