지역 사회 배우다 도구 라이브러리 여가

한국어

집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5 Canvas API_html5 튜토리얼 팁을 사용하여 직사각형을 그리는 최고의 전략

HTML5 Canvas API_html5 튜토리얼 팁을 사용하여 직사각형을 그리는 최고의 전략

WBOY

풀어 주다： 2016-05-16 15:45:35

원래의

1921명이 탐색했습니다.

closePath()를 사용하여 모양을 닫습니다.
먼저 가장 일반적인 방법을 사용하여 직사각형을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사

"ko">
<머리>
"UTF-8">
<제목>
<본문>
"zh">
<머리>
"UTF-8">
<제목>绘제조형
<본문>
"캔버스 워프">
"canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">
이런 것은 캔버스?！赶快换一个吧！！

<스크립트>

window.onload = 함수(){

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

canvas.width = 800;

canvas.height = 600;

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

context.beginPath();

context.moveTo(150,50);

context.lineTo(650,50);

context.lineTo(650,550);

context.lineTo(150,550);

context.lineTo(150,50); //绘system最后一笔使图이미지闭합

context.lineWidth = 5;

context.StrokeStyle = "검은색";

context.Stroke();

}

실행 결과:
2016321105129852.jpg (850×500)

얼핏 보면 아무 문제가 없지만, 시력이 좋은 어린이 신발은 마지막 스트로크를 닫을 때 문제가 발생하여 왼쪽 상단 모서리에 틈이 생기는 것을 발견했습니다. 이 상황은 lineWidth 설정으로 인해 발생합니다. 기본값이 1스트로크이면 문제가 없습니다. 그러나 획이 클수록, 선이 넓어질수록 이 간격은 더욱 분명해집니다. 그렇다면 이런 상황을 피하려면 어떻게 해야 할까요?
제목이 이미 손상되었습니다. 천 경로()를 사용하여 모양을 닫습니다.

JavaScript 코드클립보드에 콘텐츠 복사

"zh">

"UTF-8"

> 사각형 그리기

<본문>

"캔버스 워프">

"border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"

> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !

<스크립트>
window.onload =
(){
var canvas = document.getElementById(
); canvas.width = 800 캔버스.높이 = 600
var
"2d"
context.beginPath()
//마지막 획을 그릴 필요는 없습니다
//closePath()를 사용하여 그래픽 닫기
context.lineWidth = 5
"검정색"
실행 결과:

이 예에서는 이전 강의의 설명과 결합하여 경로를 그릴 때 계획된 경로를 BeginPath() 및 closePath()로 래핑해야 한다는 것을 알고 있습니다. 물론 마지막 획을 그릴 필요는 없으며 closePath()를 직접 사용하면 자동으로 닫힙니다. (따라서 닫힌 모양을 그리고 싶지 않다면 closePath()를 사용할 수 없습니다)

사각형 색칠하기
여기서는 스트로크()와 마찬가지로 중요한 fill() 메서드를 소개합니다. 원래 획과 마찬가지로 채우기 전에 먼저 fillStyle 속성을 사용하여 채울 색상을 선택해야 합니다.
예를 들어 노란색 위의 직사각형을 색칠하고 싶다면 이렇게 쓰면 됩니다.
JavaScript 코드클립보드에 콘텐츠 복사
2. "zh">
4. "UTF-8">
5. 绘制矩形
8. "canvas-warp">
10. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
<스크립트>
window.onload = 함수(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150,50);
context.lineTo(650,50);
context.lineTo(650,550);
context.lineTo(150,550);
context.lineTo(150,50); //最后一笔可以不画
context.closePath(); //使용closePath()闭합형형
context.fillStyle = "노란색"; //选择油漆桶的颜color
context.lineWidth = 5;
context.StrokeStyle = "검은색";
context.fill(); //确정당充
context.Stroke();
}

실행 결과:
2016321105516457.jpg (850×500)

여기서 주목해야 할 것은 올바른 코딩 습관입니다. 앞서 언급한 바와 같이 Canvas는 상태 기반 그리기이고, 스트로크()와 fill()이 호출될 때만 그리기가 결정되기 때문입니다. 따라서 우리는 무승부를 결정하는 코드와 상태 설정을 분리하기 위해 이 두 줄의 코드를 끝에 배치하고 나머지 상태 설정 코드를 그 앞에 배치할 것입니다. 코드 가독성을 향상시킵니다.

캡슐화된 그리기 방법
사각형을 그리는 데 실제로 이와 같은 네 가지 스트로크가 필요하다는 것을 발견하셨을 것입니다. 이 어리석은 방법을 사용하여 사각형을 그릴 때마다 다음을 그려야 합니다. 4개의 스트로크를 사용하면 얼마나 많은 문제가 발생합니까? 100? 1,000? 이렇게 작성하면 코드가 너무 커지고 재사용성이 매우 낮아집니다. 여기서는 JavaScript를 사용하여 이러한 메서드를 캡슐화할 수 있습니다. 우리는 직사각형이 왼쪽 상단 모서리의 좌표와 길이 및 너비에 의해 고유하게 결정될 수 있다는 것을 알고 있습니다.
자바스크립트 함수
자바스크립트 함수를 소개합니다. 기본 지식이 있는 경우 이 섹션을 건너뛰고 다음 섹션으로 바로 이동할 수 있습니다.
JavaScript 및 ActionScript 언어 함수 선언 호출은 프로그래밍 언어 중에서 가장 간단합니다.
함수의 역할
함수의 역할은 한 번 코드를 작성하고 이 코드를 반복해서 재사용하는 것입니다. 예를 들어, 여러 합계 집합의 기능을 완성하려고 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

var 합계
합 = 3
경고(합)
합계=7 8
경고(합)
.... //두 줄의 코드 반복

8개 숫자 그룹의 합을 구현하려면 16줄의 코드가 필요합니다. 더 많이 구현할수록 더 많은 코드 줄이 필요합니다. 따라서 특정 기능을 수행하는 코드 블록을 함수에 넣어서 이 함수를 직접 호출할 수 있어, 많은 양의 코드를 반복적으로 입력하는 수고를 덜 수 있습니다.
기능을 사용하여 완료:

JavaScript 코드클립보드에 콘텐츠 복사

함수 add2(a,b){
합계 = a b
알림(합)
} // 한 번만 작성하시면 됩니다.
add2(3,2)
add2(7,8)
.... //함수 호출하기

함수 정의
함수를 어떻게 정의하나요? 아래 형식을 살펴보세요.

JavaScript 코드클립보드에 콘텐츠 복사

함수 함수명( )
{
함수 본체
}

function은 함수를 정의하는 키워드이고, "함수 이름"은 함수에 부여하는 이름이고, "함수 본문"은 특정 함수를 완성하는 코드로 대체됩니다.
함수 호출
함수를 정의한 후에는 자동으로 실행할 수 없으며, 함수를 호출하고 필요한 위치에 직접 함수 이름을 적어주어야 합니다. 일반적으로 두 가지 방법이 있습니다:

사례 1: <script> 태그 내에서 호출됩니다. <div class="codeText"> <div class="codeHead"> JavaScript 코드클립보드에 콘텐츠 복사 </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><스크립트> </li> <li> 함수 tcon() </li> <li class="alt">{ </li> <li> Alert("함수 호출 학습을 축하합니다!"); </li>} <li class="alt"> </li>tcon(); <li> //함수를 호출하고 함수 이름을 직접 작성합니다. </li></script>

두 번째 경우: 버튼을 클릭한 후 정의된 함수를 호출하는 등 HTML 파일에서 호출됩니다.

이 상황은 나중에 사용됩니다.

매개변수가 있는 함수

의 형식은 다음과 같습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

함수 함수명(매개변수 1, 매개변수 2)

참고: 여러 매개변수가 있을 수 있으며 필요에 따라 매개변수 수를 늘리거나 줄일 수 있습니다. 매개변수는 (쉼표,)로 구분됩니다.

이 형식에 따라 두 숫자의 합을 구현하는 함수는 다음과 같이 작성되어야 합니다.

JavaScript 코드

클립보드에 콘텐츠 복사

함수 add2(x,y)

x와 y는 함수의 두 매개변수입니다. 함수를 호출할 때 이 두 매개변수를 통해 두 개의 실제 가수를 함수에 전달할 수 있습니다.

예를 들어, add2(3,4)는 3 4의 합을 구하고, add2(60,20)은 60과 20의 합을 구합니다.

값 반환 함수

JavaScript 코드

클립보드에 콘텐츠 복사

함수 add2(x,y)
return sum; //반환 함수 값, return 이후의 값을 반환 값이라고 합니다.

여기서 return은 다른 언어와 동일하지만, JS나 AS와 같은 Weakly Typed 언어에서는 함수 선언부에 반환 값 유형을 작성할 필요가 없습니다.

이번에는 자바스크립트 함수에 대해서도 체계적으로 이야기해봤습니다. 다시 본론으로 돌아가죠~

직사각형을 캡슐화할 수도 있습니다. 코드는 다음과 같습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

"zh">
"UTF-8">
封装绘制矩形方法
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<스크립트>

window.onload = 함수(){

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

canvas.width = 800;

canvas.height = 600;

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

drawRect(context, 150, 50, 50, 50, "빨간색", 5, "파란색");

drawRect(context, 250, 50, 50, 50, "녹색", 5, "빨간색");

drawRect(context, 350, 50, 50, 50, "노란색", 5, "검은색");

}

함수 drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){

cxt.beginPath();

cxt.moveTo(x, y);

cxt.lineTo(x 너비, y);

cxt.lineTo(x 너비, y 높이);

cxt.lineTo(x, y height);

cxt.lineTo(x, y);

cxt.closePath();

cxt.lineWidth = borderWidth;

cxt.StrokeStyle = borderColor;

cxt.fillStyle = fillColor;

cxt.fill();

cxt.Stroke();

}

运行结果：

Rect() 방법을 사용하는 방법
Canvas API에서 사용하는 방법은 ect()입니다.这个method接收4个参数x, y, 너비, 높이，实际调用时也就是

JavaScript 코드复复内容到剪贴板

context.ect(x,y,너비,높이)

이를 바탕으로 지금 당장 캡슐화 방식을 최적화해 보겠습니다.

JavaScript 코드클립보드에 콘텐츠 복사

함수 drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath()
cxt.direct(x, y, 너비, 높이)
//cxt.closePath(); closePath()가 필요하지 않습니다.
cxt.lineWidth = borderWidth
cxt.StrokeStyle = borderColor
cxt.fillStyle = fillColor
cxt.fill()
cxt.Stroke()
}

캡슐화법을 불러 마법같은 이미지를 그려보세요
마법같은 이미지를 만들어보세요~
2016321105759647.jpg (500×375)

자, 방금 포장한 방식으로 수술을 하고, 손을 연습하고, 근육과 뼈를 움직이는 데 사용해 보겠습니다.

JavaScript 코드클립보드에 콘텐츠 복사

"zh">
"UTF-8">
绘制魔性图形
"canvas-warp">
你的浏览器居然不支持Canvas？！赶快换一个吧！！

<스크립트>

window.onload = 함수(){

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

canvas.width = 800;

canvas.height = 600;

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

context.beginPath();

context.ect(0, 0, 800, 600);

context.fillStyle = "#AA9033";

context.fill();

context.beginPath();

(var i=0; i<=20; i ){

drawWhiteRect(context, 200 10 * i, 100 10 * i, 400 - 20 * i, 400 - 20 * i);

drawBlackRect(context, 205 10 * i, 105 10 * i, 390 - 20 * i, 390 - 20 * i);

}

context.beginPath();

context.lect(395, 295, 5, 5);

context.fillStyle = "검은색";

context.lineWidth = 5;

context.fill();

context.Stroke();

}

함수 drawBlackRect(cxt, x, y, 너비, 높이){

cxt.beginPath();

cxt.lect(x, y, 너비, 높이);

cxt.lineWidth = 5;

cxt.StrokeStyle = "검은색";

cxt.Stroke();

}

함수 drawWhiteRect(cxt, x, y, 너비, 높이){

cxt.beginPath()

cxt.direct(x, y, 너비, 높이)

cxt.lineWidth = 5

cxt.StrokeStyle = "흰색";

cxt.Stroke()

}

실행 결과:

2016321105841741.jpg (850×500) 정말 마법같지 않나요? 정말 멋지지 않나요? 이 코드를 설명하는 데 시간을 할애하지 않겠습니다. 수업 후에 생각해 보거나, 배운 지식을 활용하여 멋진 이미지를 그려보세요. 실제로 이 강의에는 closePath(), fillStyle, fill(), ect() 및 확장된 JavaScript 함수 설명의 네 가지 속성과 메서드만 소개됩니다.

캔버스는 그림의 둥근 모서리 효과를 구현합니다

이 규칙은 다양한 캔버스로 그린 일반 또는 불규칙 그래픽에 적용됩니다.
Canvas에서 둥근 모서리를 만드는 핵심은 "텍스처 채우기"를 사용하는 것입니다.

캔버스에는 알려진 크기의 그림 요소를 채우기 위한 텍스처 개체로 변환할 수 있는 createPattern이라는 메서드가 있습니다.

예를 들어 100px * 100px 크기의 test.jpg라는 사진의 원형 효과를 구현한다면 주요 JS 코드는 다음과 같습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

// 캔버스 요소, 그림 요소
var canvas = document.querySelector("#canvas"), image = new 이미지()
var context = canvas.getContext("2d")
함수() {
// 이미지 텍스처 생성
var 패턴 = context.createPattern(image, "반복 없음");
//원 그리기
// 그려진 원 채우기
"test.jpg"

Canvas 컨텍스트의 fillStyle 속성 값을 이 텍스처 개체와 동일하게 만드세요.

Canvas와 함께 제공되는 직사각형 그리기 API에는 둥근 모서리 속성이 없으므로 데모의 둥근 직사각형은 사용자 정의 방법을 사용합니다. 잠깐 살펴보니 수직과 수평 방향으로 서로 다른 필렛 크기를 구현하는 것이 약간 까다롭다는 것을 알았습니다. 시연을 위해 많은 노력을 기울이지 않았기 때문에 데모의 필렛은 대칭이었습니다.
2016321105911393.png (319×314)