沿路径绘制画布

Question

我想在HTML5画布/或SVG上执行以下操作：

1. 有一个背景路径，将光标移过去并绘制（填充）背景路径
2. 用户完成绘图后有回调函数

我的问题是，我不知道如何检查抽屉线是否遵循路径。

有人能给我解释一下如何做到这一点，或者给我一些建议吗？

http://jsbin.com/reguyuxawo/edit?html，js，控制台，输出

function drawBgPath() {
  context.beginPath();
  context.moveTo(100, 20);

  context.lineTo(200, 160);
  context.quadraticCurveTo(230, 200, 250, 120);
  context.bezierCurveTo(290, -40, 300, 200, 400, 150);
  context.lineTo(500, 90);
  context.lineWidth = 5;
  context.strokeStyle = 'rgba(0,0,0,.2)';
  context.stroke();
}

Answer 1

>

创建一个隐藏的画布，将源路径存储为问题画布，例如#q。

将问题画在c上。

当用户即将绘制时，从问题中获取像素值，以查看其是否在一条线上。

根据以上信息确定绘图颜色。

var mousePressed = false;
var lastX, lastY;
var ctx;

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var canvasq = document.getElementById('q');
var contextq = canvasq.getContext('2d');

canvas.width = 500;
canvas.height = 500;
canvasq.width = 500;
canvasq.height = 500;

   $('#c').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#c').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#c').mouseup(function (e) {
        mousePressed = false;
    });
	    $('#c').mouseleave(function (e) {
        mousePressed = false;
    });

function drawBgPath() {
  contextq.beginPath();
  contextq.moveTo(100, 20);

  contextq.lineTo(200, 160);
  contextq.quadraticCurveTo(230, 200, 250, 120);
  contextq.bezierCurveTo(290, -40, 300, 200, 400, 150);
  contextq.lineTo(500, 90);
  contextq.lineWidth = 5;
  contextq.strokeStyle = 'rgba(0,0,0,.2)';
  contextq.stroke();
  context.drawImage(canvasq, 0, 0);
}

function Draw(x, y, isDown) {
    // If not integer, getImageData will get a 2x2 region.
    x = Math.round(x);
    y = Math.round(y);
    if (isDown) {
        var pixel = contextq.getImageData(x, y, 1, 1);
        // If the canvas is not draw by line, the opacity value will be 0.
        var color = (pixel.data[3] === 0) ? 'red' : 'purple';
        context.beginPath();
        context.strokeStyle = color;
        context.lineWidth = 5;
        context.lineJoin = "round";
        context.moveTo(lastX, lastY);
        context.lineTo(x, y);
        context.closePath();
        context.stroke();
    }
    lastX = x; lastY = y;
}

drawBgPath();
Draw();

css prettyprint-override">#q {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<canvas id="c"></canvas>
<canvas id="q"></canvas>