Javascript 在画布上画一个区域_Javascript_Jquery_Html_Canvas_Html5 Canvas

Javascript 在画布上画一个区域

javascript jquery html canvas html5-canvas

Javascript 在画布上画一个区域,javascript,jquery,html,canvas,html5-canvas,Javascript,Jquery,Html,Canvas,Html5 Canvas,我需要在绘图时用光标挂起绘图线。我尝试了mousemove事件，但没有成功。下面是我目前正在吃的东西 var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； canvasMouseX变种； var canvasMouseY； var canvasOffset=$（“#画布”）.offset（）； var offsetX=canvasOffset.left； var offsetY=canvas

我需要在绘图时用光标挂起绘图线。我尝试了mousemove事件，但没有成功。下面是我目前正在吃的东西

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
canvasMouseX变种；
var canvasMouseY；
var canvasOffset=$（“#画布”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var storedLines=[]；
ctx.strokeStyle=“橙色”；
ctx.font='12px Arial'；
$（“#画布”）.mousedown（函数（e）{
把手向下（e）；
});
功能手柄向下（e）{
canvasMouseX=parseInt（e.clientX-offsetX）；
canvasMouseY=parseInt（e.clientY-offsetY）；
//把你的鼠标下的东西放在这里
存储线路({
x:canvasMouseX，
y:拉瓦斯穆西
});
var count=storedLines.length；
var X=canvasMouseX-（计数<10？4:7）；
ctx.strokeStyle=“橙色”；
ctx.fillStyle=“黑色”；
ctx.lineWidth=1；
ctx.beginPath（）；
ctx.arc（canvasMouseX，canvasMouseY，8,0,2*Math.PI，false）；
ctx.fillText（storedLines.length，X，canvasMouseY+4）；
ctx.stroke（）；
}
$（“#绘制”）。单击（函数（）{
ctx.strokeStyle=“红色”；
ctx.fillStyle=“蓝色”；
ctx.lineWidth=3；
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
移动到（存储线[0].x，存储线[0].y）；
对于（变量i=0；i

通过查看JSFIDLE，在绘制新线时会出现偏移。这是因为css中的正文中有填充

只要替换这个：

body {
    background-color: ivory;
    padding:10px;
}

为此：

body {
    background-color: ivory;
}

使用画布时，您负责在每次需要时重新绘制整个内容。这意味着当鼠标光标移动时，需要清除画布，然后重新绘制所有当前线段。根据您的代码，我提供了以下示例，说明如何实现此功能：

<html>
<head>
    <title>Canvas</title>
</head>
<body>

<p>Click to draw lines</p>
<p>Click back in the green circle to close+fill</p>
<br/>
<canvas id="canvas" width=300 height=300></canvas>
<br/>
<button id="clear">Clear Canvas</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
            offset = $("#canvas").offset(),
            storedLines = [],
            polyLines = [],
            start = {x: 0, y: 0},
            radius = 7;

        function canvasPosition(e) {
            return {
                x: parseInt(e.clientX - offset.left),
                y: parseInt(e.clientY - offset.top)
            };
        }

        $("#canvas").mousedown(function (e) {
            var pos = canvasPosition(e);
            if (hitStartCircle(pos)) {
                polyLines.push(storedLines);
                storedLines = [];
                draw();
            }
            else
            {
                storedLines.push(pos);
                update(pos);
            }
        })
        .mousemove(function (e) {
            update(canvasPosition(e));
        });

        // Draw completed polylines
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            $.each(polyLines, function (idx, polyLine) {
                fillPolyline(polyLine);
            });
        }

        // Update shape currently being drawn
        function update(position) {
            var len = storedLines.length;
            if(len==0) return;

            draw();
            ctx.fillStyle = "green";
            ctx.beginPath();
            ctx.arc(storedLines[0].x, storedLines[0].y, radius, 0, 2 * Math.PI, false);
            ctx.fill();

            ctx.strokeStyle = "orange";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(storedLines[0].x, storedLines[0].y);
            for(var i=1; i<len; ++i) {
                ctx.lineTo(storedLines[i].x, storedLines[i].y)
            }
            ctx.lineTo(position.x, position.y);
            ctx.stroke();
        };

        function hitStartCircle(pos) {
            var start = storedLines[0] || {x:0, y:0},
                dx = pos.x - start.x,
                dy = pos.y - start.y;
            return (dx * dx + dy * dy < radius * radius)
        }

        function fillPolyline(lines) {
            ctx.strokeStyle = "red";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(lines[0].x, lines[0].y);
            for (var i = 0; i < lines.length; i++) {
                ctx.lineTo(lines[i].x, lines[i].y);
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        $("#clear").click(function () {
            polyLines = [];
            draw();
        });
});
</script>
</body>
</html>


帆布
单击以绘制线
在绿色圆圈中单击“上一步”以关闭+填充




透明帆布
$（函数（）{
var canvas=document.getElementById（“canvas”），
ctx=canvas.getContext（“2d”），
偏移量=$（“#画布”）.offset（），
storedLines=[]，
多段线=[]，
开始={x:0，y:0}，
半径=7；
功能拉票位置（e）{
返回{
x:parseInt（e.clientX-offset.left），
y:parseInt（e.clientY-offset.top）
};
}
$（“#画布”）.mousedown（函数（e）{
var pos=拉票位置（e）；
如果（hitStartCircle（pos））{
多段线。推送（存储线）；
存储线=[]；
draw（）；
}
其他的
{
存储线路。推送（pos）；
更新（pos）；
}
})
.mousemove（函数（e）{
更新（游说立场（e））；
});
//绘制完成的多段线
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
$.each（多段线，函数（idx，多段线）{
填充多段线（多段线）；
});
}
//更新当前正在绘制的形状
功能更新（职位）{
var len=存储线长度；
如果（len==0）返回；
draw（）；
ctx.fillStyle=“绿色”；
ctx.beginPath（）；
弧（存储线[0].x，存储线[0].y，半径，0,2*Math.PI，false）；
ctx.fill（）；
ctx.strokeStyle=“橙色”；
ctx.lineWidth=3；
ctx.beginPath（）；
移动到（存储线[0].x，存储线[0].y）；
对于（var i=1；ihi！感谢您提供的解决方案。在填充多边形完成后，我是否可以尝试记住它？@TAS：您的解决方案很棒！有一些最简单的方法可以编辑绘制的形状（移动一个坐标）？@kicaj不，您需要重新绘制整个画布。
<html>
<head>
    <title>Canvas</title>
</head>
<body>

<p>Click to draw lines</p>
<p>Click back in the green circle to close+fill</p>
<br/>
<canvas id="canvas" width=300 height=300></canvas>
<br/>
<button id="clear">Clear Canvas</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
            offset = $("#canvas").offset(),
            storedLines = [],
            polyLines = [],
            start = {x: 0, y: 0},
            radius = 7;

        function canvasPosition(e) {
            return {
                x: parseInt(e.clientX - offset.left),
                y: parseInt(e.clientY - offset.top)
            };
        }

        $("#canvas").mousedown(function (e) {
            var pos = canvasPosition(e);
            if (hitStartCircle(pos)) {
                polyLines.push(storedLines);
                storedLines = [];
                draw();
            }
            else
            {
                storedLines.push(pos);
                update(pos);
            }
        })
        .mousemove(function (e) {
            update(canvasPosition(e));
        });

        // Draw completed polylines
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            $.each(polyLines, function (idx, polyLine) {
                fillPolyline(polyLine);
            });
        }

        // Update shape currently being drawn
        function update(position) {
            var len = storedLines.length;
            if(len==0) return;

            draw();
            ctx.fillStyle = "green";
            ctx.beginPath();
            ctx.arc(storedLines[0].x, storedLines[0].y, radius, 0, 2 * Math.PI, false);
            ctx.fill();

            ctx.strokeStyle = "orange";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(storedLines[0].x, storedLines[0].y);
            for(var i=1; i<len; ++i) {
                ctx.lineTo(storedLines[i].x, storedLines[i].y)
            }
            ctx.lineTo(position.x, position.y);
            ctx.stroke();
        };

        function hitStartCircle(pos) {
            var start = storedLines[0] || {x:0, y:0},
                dx = pos.x - start.x,
                dy = pos.y - start.y;
            return (dx * dx + dy * dy < radius * radius)
        }

        function fillPolyline(lines) {
            ctx.strokeStyle = "red";
            ctx.fillStyle = "blue";
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(lines[0].x, lines[0].y);
            for (var i = 0; i < lines.length; i++) {
                ctx.lineTo(lines[i].x, lines[i].y);
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

        $("#clear").click(function () {
            polyLines = [];
            draw();
        });
});
</script>
</body>
</html>