다음과 같이 캔버스 모양과 선을 그리는 함수를 만들었습니다.
function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
ctx.beginPath();
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.moveTo(lineLeft, lineTop);
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
}
function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
ctx.beginPath();
ctx.setLineDash(lineDash);
ctx.lineCap = 'round';
ctx.moveTo(lineLeft, lineTop);
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
}
내가 호출 할 때 그러나 drawBaseline후 drawDashedLine, 너무 점선 도면이다.
drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');
컨텍스트 재설정을 재설정하여 새 개체를 그리는 방법은 무엇입니까?
느리지 만 게으른 방법 ctx.save()은 경로 스타일을 설정하기 전에 호출 한 다음 ctx.restore()완료했을 때 호출 하는 것입니다.
하지만이 저장됩니다 모든 사용자의 컨텍스트의 속성을, 그리고 아마 당신이 접촉하지 않은 많은 ( fillStyle, strokeStyle, 변형 매트릭스, 클리핑 영역 globalAlpha, GCO, dashOffset, lineCap, 글꼴, 텍스트 정렬 ... : 그들 모두 ) .
또한 어떤 이유로 든을 호출 restore()하는 것을 잊은 save()경우 저장된 상태가 메모리에 누적되므로 좋지 않습니다.
function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
ctx.save();
ctx.beginPath();
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.moveTo(lineLeft, lineTop);
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
// now restore all properties
ctx.restore();
}
function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
ctx.save();
ctx.beginPath();
ctx.setLineDash(lineDash);
ctx.lineCap = 'round';
ctx.moveTo(lineLeft, lineTop);
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
// now restore all properties
ctx.restore();
}
var ctx = canvas.getContext('2d');
var lineTop = 100;
drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');<canvas id="canvas"></canvas>그런 다음 수정 한 모든 속성을 기본값으로 다시 설정 하는 것이 좋습니다 .
(귀하의 경우 ctx.strokeStyle ="#000"; ctx.lineWidth=1; ctx.setLineDash([]);)
function drawBaseline(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor) {
ctx.beginPath();
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.moveTo(lineLeft, lineTop);
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
// now reset all set properties to their defaults
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
}
function drawDashedLine(ctx, lineLeft, lineTop, lineEndLeft, strockWidth, strockColor, lineDash) {
ctx.beginPath();
ctx.setLineDash(lineDash);
ctx.lineCap = 'round';
ctx.moveTo(lineLeft, lineTop);
ctx.lineWidth = strockWidth;
ctx.strokeStyle = strockColor;
ctx.lineTo(lineEndLeft, lineTop);
ctx.stroke();
// now reset all set properties to their defaults
ctx.lineWidth = 1;
ctx.strokeStyle = '#000';
ctx.setLineDash([]);
}
var ctx = canvas.getContext('2d');
var lineTop = 100;
drawDashedLine(ctx, 0, lineTop, 300, 5, 'red', [5, 20]);
drawBaseline(ctx, 0, lineTop, canvas.width, 1, 'black');<canvas id="canvas"></canvas>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다