canvas의 도형에 원하는 이미지들을 넣고 싶습니다.
354
작성한 질문수 6
const COLORS = [
"#394fb8",
"#554fb8",
"#605ac7",
"#2a91a8",
"#2e9ab2",
"#32a5bf",
"#81b144",
"#85b944",
"#8fc549",
"#e0af27",
"#eeba2a",
"#fec72e",
"#bf342d",
"#ca3931",
"#d7423a",
];
export class Polygon {
constructor(x, y, radius, sides) {
this.x = x;
this.y = y;
this.radius = radius;
this.sides = sides;
this.rotate = 0;
}
animate(ctx, moveX) {
ctx.save();
const angle = PI2 / this.sides;
const angle2 = PI2 / 4;
ctx.translate(this.x, this.y);
this.rotate += moveX * 0.008;
ctx.rotate(this.rotate);
for (let i = 0; i < this.sides; i++) {
const x = this.radius * Math.cos(angle * i);
const y = this.radius * Math.sin(angle * i);
i == 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
ctx.save();
ctx.fillStyle=COLORS[i]
ctx.translate(x, y);
ctx.rotate((((360 / this.sides) * i + 45) * Math.PI) / 180);
ctx.beginPath();
for (let j = 0; j < 4; j++) {
const x2 = 160 * Math.cos(angle2 * j);
const y2 = 160 * Math.sin(angle2 * j);
j == 0 ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2);
}
ctx.fill();
ctx.closePath();
ctx.restore();
}
ctx.restore();
}
}지금은 COLORS 배열을 이용해 fillstyle의 색을 넣었는데, 색상 대신 특정 이미지들을 넣고싶습니다.
ctx.fillstyle = colors[i] 를 어떤 식으로 바꿔야할까요..?
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
질문해주신 canvas에서 도형에 원하는 이미지를 채우는 방법에 대해 설명드리겠습니다.
먼저, 이미지를 도형에 채우기 위해서는 CanvasRenderingContext2D 인터페이스의 createPattern() 메서드를 사용해서 패턴을 생성해야 합니다. 이 메서드는 이미지, 캔버스, 또는 비디오를 이용해 패턴 객체를 생성하고, 이 패턴을 fillStyle 프로퍼티에 할당하는 방식으로 작동합니다.
다음은 createPattern() 메서드를 사용해서 도형에 이미지를 채우는 방법을 보여주는 간단한 예시 코드입니다.
// 이미지 로딩 함수
function loadImage(url) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = reject;
image.src = url;
});
}
// 이미지 패턴 적용 함수
async function drawPattern(ctx) {
const image = await loadImage('이미지URL'); // 여기에 원하는 이미지 URL을 넣으세요
const pattern = ctx.createPattern(image, 'repeat'); // repeat, repeat-x, repeat-y, no-repeat 중 선택
ctx.fillStyle = pattern;
// 이 부분에 도형 그리는 코드를 넣으세요. 예: ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Canvas에 그리기 예시
const canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
const ctx = canvas.getContext('2d');
drawPattern(ctx);
}
위 코드에서 loadImage 함수는 Promise를 이용해 이미지가 로드될 때까지 대기한 후, 이미지 객체를 반환합니다. 그 다음 drawPattern 함수에서 loadImage를 호출하여 이미지를 로드하고, 이 이미지를 createPattern 메서드를 통해 패턴으로 생성합니다. 마지막으로 이 패턴을 fillStyle에 할당하고, 캔버스에 도형을 그리는 코드를 사용하여 이미지 패턴으로 채워진 도형을 그립니다.
ctx.fillStyle = COLORS[i] 부분을 위의 코드 예시에 따라 수정하면, 색상 대신 특정 이미지들로 도형을 채울 수 있습니다. 이미지 패턴을 여러 개 사용하려면, 이미지 URL 배열을 가지고 반복문을 돌면서 패턴을 생성하고 적용하는 방법을 활용하면 됩니다.
Part2 수강 방법
0
19
1
20강 4분 30초 코드와 6분 30초 코드 관련 질문
0
17
0
영상에서 소개되는 코드와 강의 노트 코드가 달라요
0
27
1
오디오 문제
0
49
2
TTL 산정 기준
0
43
1
10월 15일 삭제예정 강의 문의
0
58
1
강의제목에 10/15일 삭제라고 나와있는데,
0
63
1
스크립트 영상 미일치
0
101
3
감정일기장 다이어리 필터 적용할때 컨텍스트를 Home에서 가져오는 특별한 이유가 궁금합니다.
0
68
2
강의 설명 중에 헷갈리는 것이 있네요
0
79
2
수업자료 관련 문의
0
88
3
1강 동영상 재생 오류
1
78
2
Composition단계에서 `Layer`는 누가 만드는지
0
54
1
Strict Mode 예시 질문!
0
71
2
수업이 안보여요
0
72
1
저자 블로그에 있는 강의는 어떤 강의인가요?
1
73
1
[해결됨]윈도우즈 환경에서 타입 스크립트 파일이 실행이 안됩니다.
1
97
5
4강 카드뉴스 자동화 자료가 안보입니다!!
0
120
2
윈도우즈 환경에서 진행중입니다.
0
74
2
4강 카드뉴스 자동화 자료
6
134
1
라이브 강의 영상 녹화본이 있을까요?
0
109
1
인증이 늦었습니다ㅜㅜ 확인부탁드립니다
0
100
1
스웨거 접속이 안되는데 확인 부탁드립니다.
0
68
1
설명이 잘못된거같습니다.
1
85
2