html5 캔버스 사용자 정의 둥근 사각형 및 점선 샘플 코드

저자：Eve Cole 업데이트 시간：2025-04-16 17:00:04

주석 : HTML5 캔버스 드로잉 객체에 제공된 기본 기능은 둥근 사각형과 점선을 그리는 기능을 인식하지 못합니다. 객체를 통해 JavaScript의 프로토 타입을 통해이 두 기능을 객체 CanvasRenderingContext2d에 추가 할 수 있습니다. 특정 구현은 다음과 같습니다. 관심있는 친구들이 그것을 언급 할 수 있습니다.

html5 캔버스 사용자 정의 라운드 사각형 및 대시 라인 (RoundedRectangle 및 Dash Line)

HTML Canvas 2D 컨텍스트 드로잉 객체에 사용자 정의 기능 기능을 추가하는 데모를 구현하고 점선을 그리고 점선의 크기를 제어하는 방법, 둥근 사각형을 그리는 기술을 배우는 방법을 구현합니다.

HTML5 캔버스 드로잉 객체에 제공된 기본 기능은 둥근 사각형과 점선을 그리는 기능을 인식하지 못하지만 JavaScript Language.Prototype을 사용 하여이 두 기능을 객체 CanvasRenderingContext2d에 추가 할 수 있습니다. 코드 데모 효과는 다음과 같습니다.

구성 요소 FishComponent.js 코드는 다음과 같습니다.

CanvasRenderingContext2d.prototype.roundRect =

함수 (x, y, 너비, 높이, 반경, 충전, 스트로크) {

if (typeof stroke == "undefined") {

뇌졸중 = 참;

}

if (radius typeof === "undefined") {

반경 = 5;

}

this.beginpath ();

this.moveto (x + radius, y);

this.lineto (x + 너비 - 반경, y);

this.quadraticcurveto (x + 너비, y, x + 너비, y + 반경);

this.lineto (x + 너비, y + 높이 -RADIUS);

this.quadraticcurveto (x + 너비, y + 높이, x + 너비 - 반경, y + 높이);

this.lineto (x + 반경, y + 높이);

this.quadraticcurveto (x, y + 높이, x, y + 높이 -RADIUS);

this.lineto (x, y + radius);

this.quadraticcurveto (x, y, x + radius, y);

this.closepath ();

if (스트로크) {

this.stroke ();

}

if (fill) {

this.fill ();

}

};

CanvasRenderingContext2d.prototype.dashedLineto = function (Fromx, Fromy, Tox, Toy, Pattern) {

// 기본 간격 거리 -> 5px

if (typeof pattern === "undefined") {

패턴 = 5;

}

// 델타 X와 델타 y를 계산합니다

var dx = (tox -fromx);

var dy = (장난감 -Fromy);

var 거리 = Math.floor (Math.sqrt (dx*dx + dy*dy));

var dashlineInteveral = (Pattern <= 0)? 거리 : (거리/패턴);

var deltay = (dy/distone) * 패턴;

var deltax = (dx/distance) * 패턴;

// 대시 선을 그립니다

this.beginpath ();

for (var dl = 0; dl <dashlineInteveral; dl ++) {

if (dl%2) {

this.lineto (fromx + dl*deltax, fromy + dl*deltay);

} 또 다른 {

this.moveto (fromx + dl*deltax, fromy + dl*deltay);

}

this.stroke ();

};

HTML의 통화 데모 :

<! doctype html>

<html>

<헤드>

<cript>

var ctx = null; // 글로벌 변수 2D 컨텍스트

var imagetexture = null;

Window.onload = function () {

var canvas = document.getElementById ( "text_canvas");

console.log (canvas.parentNode.clientWidth);

canvas.width = canvas.parentNode.clientWidth;

canvas.height = canvas.parentnode.clientHeight;

if (! canvas.getContext) {

Console.log ( "캔버스가 지원되지 않습니다. HTML5 호환 브라우저를 설치하십시오.");

반품;

}

var context = canvas.getContext ( '2d');

context.strokestyle = "빨간색";

Context.FillStyle = "RGBA (100,255,100, 0.5)";

Context.RoundRect (50, 50, 150, 150, 5, True);

context.strokestyle = "blue";

for (var i = 0; i <10; i ++) {

var delta = i*20;

var pattern = i*2+1;

context.dashedlineto (250, 50+델타, 550, 50+델타, 패턴);

}

</스크립트>

</head>

<body>

<div>

</div>

</body>

</html>