Question

您好我使用随机功能刷粗略。有了它我绘制了两层第一层原始大小和第二层2x更大。在这两个层中我都画了相同的图纸。乍一看，你看不出有任何区别，但是我点击按钮＆＃34;清除并在第一个方块中插入备份＆＃34; 这个按钮只需从第二层复制到第一层规模和你可以看到此刻如何改变图纸。因为第一层不等于第二层。

＆＃13;

/* Layer 1 */
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

/* Layer 2 */
var canvas2 = document.getElementById('canvas2');
var ctxBigger = canvas2.getContext('2d');

var coords = {};
var pencil = {};
var isDrawing = false;
var TwoTimesBigger = 2;



function getMousePosInCanvas(canvas, e) {
    var rect = canvas.getBoundingClientRect();
    
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    };
}

$('#canvas').on('mousedown', function(e) {
  coords = getMousePosInCanvas(canvas, e);  
  isDrawing = true; 
  pencil.setPreviousCoords(coords.x, coords.y);
});

$('#canvas').on('mousemove', function(e) {
  if(isDrawing) {
    coords = getMousePosInCanvas(canvas, e); 
    pencil.stroke(coords.x, coords.y, TwoTimesBigger);
  }  
});

$('#canvas').on('mouseup', function() {
  isDrawing = false;  
});

$('#canvas').on('mouseleave', function() {
  isDrawing = false;  
});

$('#pencil-simple').on('click', function() {
  pencil = new SimplePencil(ctx, ctxBigger); 
});

$('#pencil-sketchy').on('click', function() {
  pencil = new SketchyPencil(ctx, ctxBigger);
});

$('#clear-insert-backup').on('click', function() {
  var tempGlobalAlpha = ctx.globalAlpha;
  ctx.globalAlpha = 1; //For redrawing 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(canvas2, 0, 0, canvas.width, canvas.height);
  ctx.globalAlpha = tempGlobalAlpha;
});

/* PENCILS */
function SimplePencil(ctx, ctxBigger) {
    this.init(ctx, ctxBigger);
}

SimplePencil.prototype = {
    ctx: null, ctxBigger: null,
    previousX: null, previousY: null,
    
    init: function(ctx, ctxBigger) {
        this.ctx = ctx;
        this.ctxBigger = ctxBigger;
    },
    stroke: function(x, y, TwoTimesBigger) {
      
        this.ctxBigger.strokeStyle = this.ctx.strokeStyle = "#000000";

        /* Layer 1 */
        this.ctx.beginPath();
        this.ctx.lineWidth = 1;
        this.ctx.moveTo(this.previousX, this.previousY);
        this.ctx.lineTo(x, y);
        this.ctx.closePath();
        this.ctx.stroke();

        /* Layer 2 */
        this.ctxBigger.beginPath();
        this.ctxBigger.lineWidth = this.ctx.lineWidth * TwoTimesBigger;
        this.ctxBigger.moveTo( this.previousX * TwoTimesBigger, this.previousY * TwoTimesBigger );
        this.ctxBigger.lineTo( x * TwoTimesBigger, y * TwoTimesBigger);
        this.ctxBigger.closePath();
        this.ctxBigger.stroke();
        
      
        this.setPreviousCoords(x, y);
    },
    setPreviousCoords: function(x, y) {
        this.previousX = x;
        this.previousY = y;
    },
}

function SketchyPencil(ctx, ctxBigger) {
    this.init(ctx, ctxBigger);
}

SketchyPencil.prototype = {
    ctx: null, ctxBigger: null,
    previousX: null, previousY: null,

    init: function(ctx, ctxBigger) {
        this.ctx = ctx;
        this.ctxBigger = ctxBigger;

        this.points = new Array();
        this.count = 0;
    },
    stroke: function(x, y, TwoTimesBigger) {
        var i, dx, dy, d;
        
        this.ctxBigger.strokeStyle = this.ctx.strokeStyle = "#000000";
        this.ctxBigger.globalAlpha = this.ctx.globalAlpha = 0.05;

        this.points.push([x, y]);
        this.ctx.lineWidth = 0.5;
        this.ctxBigger.lineWidth = this.ctx.lineWidth * TwoTimesBigger;

        for (i = 0; i < this.points.length; i++) {
            dx = this.points[i][0] - this.points[this.count][0];
            dy = this.points[i][1] - this.points[this.count][1];
            d = dx * dx + dy * dy;

            if (d < 8000 && Math.random() > d / 4000) {
                this.ctx.beginPath();
                this.ctx.moveTo(this.points[this.count][0] + (dx * 0.3), this.points[this.count][1] + (dy * 0.3));
                this.ctx.lineTo(this.points[i][0] - (dx * 0.3), this.points[i][1] - (dy * 0.3));
                this.ctx.stroke();
            }
        }

        
        for (i = 0; i < this.points.length; i++) {
            dx = this.points[i][0] - this.points[this.count][0];
            dy = this.points[i][1] - this.points[this.count][1];
            d = dx * dx + dy * dy;

            if (d < 8000 && Math.random() > d / 4000) {
                this.ctxBigger.beginPath();

                this.ctxBigger.moveTo( this.points[this.count][0] * TwoTimesBigger + (dx * (0.3 * TwoTimesBigger)), this.points[this.count][1] * TwoTimesBigger + (dy * (0.3 * TwoTimesBigger)) );
                this.ctxBigger.lineTo( this.points[i][0] * TwoTimesBigger - (dx * (0.3 * TwoTimesBigger)), this.points[i][1] * TwoTimesBigger - (dy * (0.3 * TwoTimesBigger )) );
                this.ctxBigger.stroke();
            } 
        }
    
        this.setPreviousCoords(x, y);
        this.count++;
    },
    setPreviousCoords: function(x, y) {
        this.previousX = x;
        this.previousY = y;
    },


}

＆＃13;

#canvas, #canvas2 {
  border: 1px #000 solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="pencil-simple" value="Pencil simple">
<input type="button" id="pencil-sketchy" value="Pencil sketchy">
<input type="button" id="clear-insert-backup" value="Clear and insert backup in first square">    
<br>
    <p>Press <b>Pencil simple</b> or <b>Pencil sketchy</b> and start drawing in first square, second square only for backup 2x bigger than first, <i>After drawings with sketchy press <b>Clear and insert backup in first square</b> and you can see how first square not equal second.</i></p>
<canvas id="canvas" width="300" height="300"></canvas>
<canvas id="canvas2" width="600" height="600"></canvas>

＆＃13;

HTML5画布javascript画笔在其他音阶中不相等

0 个答案: