0

オーバーラップしないパスを持つ長方形を作成する必要があります（一部のエッジを別の色にしたいため、たとえば、別の線種を点線などにします..）。アルファを0.5に設定すると、一部のエッジは暗くなりませんオーバーラップのため）canvas 2dと。

lineCapでやろうとしましたが、アルファで重なっています...

私がやったことを確認してください。http://jsfiddle.net/kLZfc/6/

3px でのみ動作し、1px では動作しません...

var ctx = document.querySelector('canvas').getContext('2d');
var offset;

offset = 10.5;
ctx.lineWidth = 3;
ctx.globalAlpha = 0.5
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineTo(offset, offset);
ctx.lineTo(offset + 10, offset);
ctx.lineTo(offset + 10, offset + 10);
ctx.lineTo(offset, offset + 10);
ctx.lineTo(offset, offset);
ctx.stroke();



offset = 25.5;
ctx.lineWidth = 3;
ctx.globalAlpha = 0.5
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineTo(offset, offset);
ctx.lineTo(offset + 10, offset);
ctx.lineTo(offset + 10, offset + 10);
ctx.lineTo(offset, offset + 10);
ctx.lineTo(offset, offset);
ctx.closePath();
ctx.stroke();



offset = 40.5;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineTo(offset, offset);
ctx.lineTo(offset + 10, offset);
ctx.lineTo(offset + 10, offset + 10);
ctx.lineTo(offset, offset + 10);
ctx.lineTo(offset, offset);
ctx.closePath();
ctx.stroke();



offset = 55.5;
ctx.lineWidth = 1;
ctx.globalAlpha = 0.5
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineTo(offset, offset);
ctx.lineTo(offset + 10, offset);
ctx.lineTo(offset + 10, offset + 10);
ctx.lineTo(offset, offset + 10);
ctx.lineTo(offset, offset);
ctx.stroke();



offset = 70.5;
ctx.lineWidth = 1;
ctx.lineCap = "square";
ctx.globalAlpha = 0.5
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineTo(offset, offset);
ctx.lineTo(offset + 10, offset);
ctx.lineTo(offset + 10, offset + 10);
ctx.lineTo(offset, offset + 10);
ctx.lineTo(offset, offset);
ctx.stroke();
4

1 に答える 1

0

わかりました、ここに内側のストロークを持つピクセルパーフェクトな長方形があります: http://jsfiddle.net/kLZfc/9/

var ctx = document.querySelector('canvas').getContext('2d');
var offset;
ctx.strokeStyle = "black"
ctx.lineJoin = "miter";




var cSq = function(x, y, width, height, stroke){
    x = x + stroke / 2;
    y = y + stroke / 2;
    ctx.lineWidth = stroke;
    ctx.lineCap = "square";
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.lineTo(x, y);
    if(stroke === 1){
        ctx.lineTo(x + width, y);
    }else{
        ctx.lineTo(x + width - stroke, y);
    }
    ctx.moveTo(x + width - stroke, y);
    ctx.lineTo(x + width - stroke, y + height - stroke);
    ctx.lineTo(x, y + height - stroke);
    ctx.moveTo(x, y + height - stroke * 2);
    ctx.lineTo(x, y);
    ctx.globalAlpha = 0.5
    ctx.stroke()
    ctx.globalAlpha = 0.7
    ctx.fillRect(x + stroke / 2, y + stroke / 2, width - stroke*2, height - stroke*2)
}
cSq(10, 11, 10, 15, 1); cSq(15, 22, 25, 44, 5);
于 2013-01-19T15:54:54.647 に答える