我想在单击时使用 canvas 在图像上绘制图案

Question

我想在图像上绘制图案 canvas 单击您可以通过提供的图像了解更多信息这是我想要的最终结果 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

我想在单击时使用 canvas 在图像上绘制图案

I want to draw pattern on an image with canvas on click

javascript

canvas

stroke