Question

我想在点击画布的图像上绘制图案，您可以使用提供的图像了解更多这是我想要的最终结果 http://i.imgur.com/wnH2Vxu.png 但我有这条模糊的线条 http://i.imgur.com/HXF1rTv.png

我正在使用以下代码

(
    function() {
        var canvas = document.querySelector('#canvas');
        var ctx = canvas.getContext('2d');

        var sketch = document.querySelector('#sketch');
        var sketch_style = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));

        var mouse = {x: 0, y: 0};
        var last_mouse = {x: 0, y: 0};

        /* Mouse Capturing Work */
        canvas.addEventListener('mousemove', function(e) {
            last_mouse.x = mouse.x;
            last_mouse.y = mouse.y;

            mouse.x = e.pageX - this.offsetLeft;
            mouse.y = e.pageY - this.offsetTop;
        }, false);


        var texture = document.getElementById("texture");

        pFill = ctx.createPattern(texture, "repeat");

        ctx.strokeStyle = pFill;

        /* Drawing on Paint App */
        ctx.lineWidth = 12;
        ctx.lineJoin = 'square';
        ctx.lineCap = 'square';
        canvas.addEventListener('mousedown', function(e) {
        canvas.addEventListener('mousemove', onPaint, false);
        }, false);

        canvas.addEventListener('mouseup', function() {
        canvas.removeEventListener('mousemove', onPaint, false);
        }, false);

        var onPaint = function() {
            ctx.beginPath();
            ctx.moveTo(last_mouse.x, last_mouse.y);
            ctx.lineTo(mouse.x, mouse.y);

            ctx.closePath();
            ctx.stroke();
        };
    }()
);

$( document ).ready(function() {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10);
});

Answer 1

中风模式的方法在这里不起作用。因为这个模式位置是固定的。因此，当你的线条不是完全水平或垂直时，你会有一个扭曲的图像，而不是一串精确的球。

我认为应该重新考虑整个方法。

用户应该在photoshop中创建一条路径，该路径作为临时线可见。首先，它很容易成为折线，其中顶点由点击指向。并且当确认路径时（例如通过双击），您应该移除临时线并沿给定步骤沿着路径放置球。在这种情况下，您可以处理所有转弯和规律性扭曲。

这是相当多的工作，但实际上这项工作比现在要复杂得多。

作为一种快速解决方法，您可以尝试一种简单的方法。每次与前一次跌落的距离超过球的半径（例如）时，都会丢球。

var lastBall = {x: null, y : null};
function drawBall(center){
      ctx.beginPath();
      ctx.arc(center.x, center.y, 10, 0, 2 * Math.PI, false);
      ctx.fillStyle = 'orange';
      ctx.fill();
}
function distance(a,  b){
    return Math.sqrt((a.x-b.x)*(a.x-b.x) + (a.y-b.y)*(a.y-b.y) );
}
var onPaint = function() {
    if(!lastBall.x || distance(lastBall, mouse) > 25 ){
        drawBall(mouse);
        lastBall.x = mouse.x;
        lastBall.y = mouse.y;
    }

代码很粗糙你应该为颜色和半径定义适当的变量，或者用你的模式替换它，但是你可以得到这个想法

Fiddle

我想在点击上用画布在图像上绘制图案

1 个答案: