캔버스 구문의 한계를 극복하고 체인 구문을 지원하게 하세요_html5 튜토리얼 기술

먼저 일반 캔버스 그리기 구문을 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

ctx.arc(centerX,centerY,radius,0,PI*2,true);
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = "10" ;
ctx.fill();
ctx.beginPath();
ctx.shadowColor = 'rgba(0,0,0,0)';
ctx.moveTo( centerX-radius, centerY);
ctx.lineTo(centerX-radius,centerY - 50);
ctx.lineTo(centerX radius,centerY - 50);
ctx.lineTo(centerX radius,centerY) ;
// ctx.lineTo(centerX-radius,centerY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0 ,1)' ;
ctx.arc(centerX,centerY-50,radius,0,PI*2,true);
ctx.fill();

저는 아닙니다 기본 캔버스 구문에 만족합니다. 두 가지 점이 있습니다. 1. 각 문장 앞에는 ctx(즉, 캔버스의 context2d 개체)가 붙습니다. 2. 각 함수나 속성은 한 줄을 차지하므로 공간 낭비입니다.

다음과 같은 jQuery의 체인 구문이 정말 마음에 듭니다.

코드 복사

코드는 다음과 같습니다. :

$('#div1').show(300).html(p).delay(3000).slideUp(300).remove();

따라서 캔버스 그리기에도 이 구문을 사용하고 싶습니다.

코드 복사

코드는 다음과 같습니다.

ctx.moveTo(500,0).lineTo(500,500).StrokeStyle('#f00').Stroke();

한 가지 방법은 context2d 객체, this 객체는 모든 기본 context2d 메서드를 지원하지만 연결도 지원합니다.

그러나 코드가 너무 많아서는 안 됩니다. 그렇지 않으면 아무도 사용하고 싶어하지 않을 것입니다.

다음은 이 "클래스"를 XtendCanvas로 명명한 전체 코드 조각입니다(다시 X로 시작함).

코드를 복사합니다.

코드는 다음과 같습니다:

// 캔버스가 Ten Years Light의 체인 구문을 지원하도록 합니다
~function () {var pro = ['save ','restore', 'scale', 'rotate', 'translate', 'transform', 'createLinearGradient', 'createRadialGradient', 'getLineDash', 'clearRect', 'fillRect', 'beginPath', 'closePath', 'moveTo', 'lineTo', 'quadraticCurveTo', 'bezierCurveTo', 'arcTo', 'Rect', 'arc', 'fill', 'Stroke', 'clip', 'isPointInPath', 'measureText', 'clearShadow ', 'fillText', '스트로크텍스트', '스트로크Rect', 'drawImage', 'drawImageFromRect', 'putImageData', 'createPattern', 'createImageData', 'getImageData', 'lineWidth','스트로크스타일','globalAlpha', 'fillStyle','font','shadowOffsetX','shadowOffsetY','shadowBlur','shadowColor','lineCap','lineJoin','miterLimit'];
function XtendCanvas(캔버스) {

var ctx = canvas.getContext('2d'),
fn = function(){},
fnP = fn.prototype;
for(var j = 0,p=pro[0] ;p;p=pro[j ]) {
fn.prototype[p] = function (p) {
return function () {
var args = Array.prototype.slice.call(arguments) ;
// console.log(args);
if(typeof ctx[p] == 'function') {
ctx[p].apply(ctx,args);
} else {
ctx[p] = args '';
}
return fnP;
};
}(p);
}
return new fn;
};
일반 context2d처럼 사용할 수 있지만 차이점은 체인 구문을 지원한다는 것입니다:

코드 복사

코드는 다음과 같습니다:var cvs = document.getElementById('cvs');

var ctx = XtendCanvas(cvs);

ctx.moveTo(500,0 ).lineTo(500,500) .스트로크스타일('#f00').스트로크();

이렇게 하면 모든 작업을 한 문장에 넣을 수 있고 언제든지 중단하고 다른 작업을 한 다음 계속할 수도 있습니다.

이 코드는 캔버스를 개선한 것이 아니라 단순히 체인 구문을 지원하도록 허용하는 것입니다. 하지만 장점은 코드가 적고 모든 JS 라이브러리에 포함될 수 있다는 것입니다. 여기에서 여러분의 "추천"을 받고 싶습니다.

코드에는 개선할 가치가 있는 부분이 있어야 하며 누구나 개선할 수 있습니다. 스스로. 하지만 - 물을 마실 때 우물 파는 사람을 잊지 마세요. 가장 중요한 것은 아이디어죠. 아이디어는 다음과 같습니다.
보시다시피 코드에서 가장 긴 부분은 메서드 이름을 저장하는 배열 pro인 반면 핵심 코드는 매우 짧습니다. 왜 그러한 배열을 만들어야 합니까?

원래는 모든 기본 메소드를 CanvasRenderingContext2D에서 직접 상속하고 싶었지만 각 브라우저에서 이 CanvasRenderingContext2D를 순회할 때 결과가 일관되지 않았습니다. 직접 상속받은 경우 Chrome에서 해당 메서드를 사용하여 Firefox에서 실행하려고 하면 오류가 보고됩니다.

그래서 저는 CanvasRenderingContext2D에서 일반적이고 문제가 없는 메서드와 속성 이름을 추출했습니다. 고정된 배열을 만드는 것 외에 다른 방법은 없습니다. 자신의 재량에 따라 메서드를 추가할 수 있습니다.

메서드와 속성이 추출된 다음 기본 메서드가 새 개체에 추가됩니다. 내 메서드를 배치하기 위해 fn이라는 빈 함수를 만들었습니다.

배열의 이러한 요소에는 함수와 속성이 모두 있으므로 루프에서 함수인지 여부를 판단합니다. 함수이면 매개변수로 실행됩니다. 속성이어야 합니다. 이 속성에 매개변수를 할당하세요.

이렇게 하면 캔버스 속성을 설정할 때 체인을 중단할 필요 없이 속성 값을 매개변수로 직접 전달할 수 있습니다. 예:

코드 복사

코드는 다음과 같습니다.

ctx.strokStyle('#f00')

마지막으로 fn을 반환하는 키입니다. 이 트릭은 jQuery에서 배웠으며 체인 구문을 지원하는 핵심입니다.

이전 기사에서 언급한 익명 함수, 클로저, 프로토타입 및 이상한 for 루프가 이 단락에 사용되었습니다.

말하자면 꽤 간단한 것 같지만, 정말 오랫동안 고민한 내용이 모두에게 도움이 되었으면 좋겠습니다.

코드를 작성하는 과정에서 Chrome에는 setStrokeColor, setLineCap 및 기타 함수와 같이 set으로 시작하는 일련의 함수가 있다는 것을 알았습니다. 해당 스트로크 스타일과 라인캡을 교체합니다. 즉, 그의 캔버스는 기능으로 가득 차 있고 속성이 없는 경우에는 함수인지 속성인지 판단할 필요가 없습니다. 하지만 파이어폭스에는 그런 것이 없기 때문에 이전 아이디어만 사용할 수 있습니다.

설정 기능도 풀어드릴게요:

코드 복사

코드는 다음과 같습니다:

var bak = ['setTransform','setAlpha', 'setCompositeOperation', 'setLineWidth', 'setLineCap', 'setLineJoin', 'setMiterLimit', 'setLineDash ', 'setShadow','setStrokeColor','setFillColor'];

그 사용법은 한눈에 이해하기 쉽습니다. 이전 코드의 pro 배열에 추가할 일부를 선택할 수도 있습니다.

마지막으로 내 코드가 강조표시되지 않는 이유가 궁금합니다. . . 끝까지 시청하셨다면 추천이라도 해주시면 저도 허탈할 것 같습니다.