HTML5 Canvas를 사용하여 색상과 질감으로 이미지를 채우는 방법에 대한 튜토리얼_html5 튜토리얼 팁

채우기 색상

오늘은 채움색을 소개하고 색의 매력을 경험해보겠습니다.
채우기 색상에는 두 가지 주요 유형이 있습니다.

1. 기본 컬러
2. 그라데이션 컬러(선형 그래디언트, 방사형 그래디언트로도 나누어짐)

하나씩 살펴보겠습니다.

기본 색상 채우기
Canvas fillStyle 속성은 캔버스에 도형의 기본 색상과 채우기를 설정하는 데 사용됩니다. fillStyle은 간단한 색상 이름을 사용합니다. 이는 매우 간단해 보입니다. 예를 들면 다음과 같습니다.

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

1. context.fillStyle = "빨간색"

다음은 HTML4 사양에서 사용 가능한 16개의 색상 문자열 값 목록입니다. HTML5에서는 전용 색상을 수정하지 않기 때문에 HTML4 색상이 HTML5에서 올바르게 표시될 수 있습니다.

이러한 색상 값은 모두 스트로크 스타일 및 채우기 스타일 속성에 적용할 수 있습니다.
기본 색상을 채우는 방법을 요약해보겠습니다. (StrokeStyle 속성에도 사용 가능)
(1) 색상 문자열 채우기를 사용합니다.

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

1. context.fillStyle = "빨간색"

(2) 16진수 문자열 패딩을 사용합니다.

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

1. context.fillStyle = "#FF0000"

(3) 16진수 문자열 약어로 채웁니다.

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

1. context.fillStyle = "#F00"

(4) rgb() 메소드를 사용하여 색상을 설정합니다.

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

1. context.fillStyle = "rgb(255,0,0)"

(5) rgba() 메소드를 사용하여 색상을 설정합니다.
JavaScript 코드클립보드에 콘텐츠 복사

1. context.fillStyle = "rgba(255,0,0,1)";

이 메소드의 마지막 매개변수는 알파 값이며 투명도 범위는 1(불투명) ~ 0(투명)입니다.
(6) hsl() 메소드를 사용하여 색상을 설정합니다.

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

1. context.fillStyle = "hsl(0,100%,50%)";

HSL은 색상(H), 채도(S), 명도(L)의 세 가지 채널의 색상을 나타냅니다.

(7) hsla() 메소드를 사용하여 색상을 설정합니다.

JavaScript 코드

클립보드에 콘텐츠 복사

context.fillStyle =
1. "hsla(0,100%,50%,1)";

   위 7개의 코드 문장은 모두 빨간색으로 "#FF0000"으로 채워져 있습니다.

   
   그라디언트 모양 채우기
   캔버스에 그라데이션 채우기를 만드는 데는 선형 또는 방사형의 두 가지 기본 옵션이 있습니다. 선형 그라데이션은 수평, 수직 또는 대각선 채우기 패턴을 만듭니다. 방사형 그래디언트는 중심점에서 방사형 채우기를 만듭니다. 그라디언트 모양을 채우는 세 가지 단계는 그라디언트 선 추가, 그라디언트 선에 키 색상 추가, 그라디언트 적용입니다. 다음은 그 중 몇 가지 예입니다.
   선형 그라데이션
   3단계 전략:
   그라디언트 선 추가:

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

   1. var grd = context.createLinearGradient(xstart,ystart,xend,yend)

   
   그라디언트 선에 주요 색상 추가(색상 중단점과 유사):
   

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

   1. grd.addColorStop(중지,색상)

   
   여기서 정지점은 0에서 1까지의 부동 소수점 숫자로, 중단점에서 (xstart, ystart)까지의 거리와 전체 그라데이션 길이의 비율을 나타냅니다.

   그라디언트 적용:

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

   1. context.fillStyle = grd
   2. context.StrokeStyle = grd

   
   코드를 작성하여 살펴보세요.

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

   2. "zh">
   "UTF-8">
   <본문>
   "캔버스 워프">
   "canvas" style=
   "border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"
   > 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
   7. <스크립트>
   8. window.onload =
   함수
   9. (){
   10. var canvas = document.getElementById(
   "캔버스"
   11. ); canvas.width = 800 캔버스.높이 = 600
   12. var
   context = canvas.getContext(
   13. "2d"
   )
   14. context.direct(200,100,400,400)
    
   16. //그라디언트 선 추가
   18. var grd = context.createLinearGradient(200,300,600,300)
   19.  //색상 중단점 추가
   grd.addColorStop(0,
   21. "검정색")
   grd.addColorStop(0.5,
   22. "흰색")
   grd.addColorStop(1,
   23. "검정색")
   24.  //그라디언트 적용
   context.fillStyle = grd
   context.fill()
   }

   33. 실행 결과:
       

       그라디언트를 모두가 한 번에 이해할 수 있도록 일러스트레이션을 만드는 것이 필요하다고 생각합니다.
       

       이해를 돕기 위해 그라데이션 선을 유향 선분으로 간주하는 것이 좋습니다. PS 등의 그리기 도구에 익숙하고 그라데이션 설정을 사용해 본 적이 있다면 잘 이해했을 것입니다.
       여기서 그라디언트 선의 시작점과 끝점이 이미지 내에 있을 필요는 없으며, 색상 중단점의 위치도 동일합니다. 그러나 이미지의 범위가 그라디언트 선보다 크면 그라디언트 선 범위를 벗어나면 끝점에 가장 가까운 중단점의 색상이 자동으로 채워집니다.
       다음은 두 가지 보조 기능이 있는 또 다른 예입니다.

       직사각형을 그리는 빠른 방법

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

       1. fillRect(x,y,width,height)、stroke(x,y,width,height)。这两个函数可以分别看做rect()与fill()以及rect()与stroke()的组合。因为rect()仅仅只是规划路径而已，而这两个方法确实实实在在的绘制。   
       2.   
       3. "zh">   
       4.   
       5.     "UTF-8">   
       6.        
       7.   
       8.   
       9. "canvas-warp">   
       10.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
       11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
       12.        
   35. <스크립트>
   36. window.onload = 함수(){
   37. var canvas = document.getElementById("캔버스");
   canvas.width = 800
   캔버스.높이 = 600
   40. var context = canvas.getContext("2d")
    
   42. //그라디언트 선 추가
   43. var grd = context.createLinearGradient(100,300,700,300)
    
   45. //색상 중단점 추가
   grd.addColorStop(0,
   46. "올리브")
   grd.addColorStop(0.25,
   47. "마룬")
   grd.addColorStop(0.5,
   48. "아쿠아")
   grd.addColorStop(0.75,
   49. "자홍색")
   grd.addColorStop(0.25,
   50. "청록색")
    
   52. //그라디언트 적용
   context.fillStyle = grd
   context.StrokeStyle = grd
   context.StrokeRect(200,50,300,50)
   context.StrokeRect(200,100,150,50)
   context.StrokeRect(200,150,450,50)
   context.fillRect(200,300,300,50)
   context.fillRect(200,350,150,50)
   context.fillRect(200,400,450,50)
   context.fillRect(0,550,800,25)
   }

   실행 결과:
   

   두 페이지 모두 수평 그라데이션이 있지만 선형 그라데이션이 반드시 수평일 필요는 없으며 방향은 그라데이션 선의 끝점을 통해 임의로 설정될 수 있습니다.

   방사형 그라데이션
   역시 3단계 전략이지만 첫 번째 단계에서 사용하는 방법이 변경되었습니다.
   그라디언트 원 추가:

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

   1. var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1)

   그라디언트 선에 주요 색상 추가(색상 중단점과 유사):
   

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

   1. grd.addColorStop(중지,색상)

   
   그라디언트 적용:
   

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

   1. context.fillStyle = grd
   2. context.StrokeStyle = grd

   
   선형 그래디언트는 두 개의 끝점을 기준으로 정의되지만 방사형 그래디언트는 두 개의 원을 기준으로 정의됩니다.
   예제 7-2를 다시 작성해 보겠습니다.
   

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

   2. "zh">
   "UTF-8">
   5. <본문>
   "캔버스 워프"
   7. > "canvas"
   style=
   8. "border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
<스크립트>
window.onload =
5. 함수
(){
6. var
canvas = document.getElementById(
7. "캔버스"); canvas.width = 800 캔버스.높이 = 600
var
9. context = canvas.getContext(
"2d"
10. )  
//그라디언트 선 추가
12. var grd = context.createRadialGradient(400,300,100,400,300,200)
13.  
//색상 중단점 추가
15. grd.addColorStop(0,"올리브")
16. grd.addColorStop(0.25,"마룬")
17. grd.addColorStop(0.5,"아쿠아")
18. grd.addColorStop(0.75,"자홍색")
19. grd.addColorStop(0.25,"청록색")
20.  
//그라디언트 적용
22. context.fillStyle = grd
23. context.fillRect(100,100,600,400)
26. }

30. 실행 결과:
    

    왜 이 색 조합이 이렇게 느껴지나요... 잊어버리세요. 이것을 예술이라고 합니다.
    createRadialGradient(x0,y0,r0,x1,y1,r1) 메소드는 방사형 그래디언트, 즉 두 원 사이의 그래디언트의 시작 및 끝 범위를 지정합니다.
    요약하자면, 이번 강의에서는 fillStyle, createLinearGradient(), createRadialGradient(), addColorStop(), fillRect(), 스트로크Rect() 및 기타 속성과 메서드에 대해 배웠고 기본 색상 채우기, 선형 채우기에 대해 자세히 소개했습니다. 그라디언트 및 방사형 그라디언트.
    자, 이제 색칠하는 방법을 배웠으니 마음껏 색상을 사용하여 나만의 작품을 그려봅시다!

    질감 채우기

    createPattern() 소개
    질감은 실제로 패턴의 반복이며 채우기 패턴은 createPattern() 함수를 통해 초기화됩니다. 두 개의 매개변수 createPattern(img,repeat-style)을 전달해야 합니다. 첫 번째 매개변수는 Image 객체 인스턴스이고 두 번째 매개변수는 문자열 유형으로 모양에 반복 패턴을 표시하는 방법을 나타냅니다. 이 기능을 사용하여 이미지 또는 전체 캔버스를 모양의 채우기 패턴으로 로드할 수 있습니다.
    다음과 같은 4가지 이미지 채우기 유형이 있습니다.

    1. 평면에서 반복:
    2. x축에서 반복: 반복-x
    4. 반복 사용 안 함: 아니요- 반복;
    

    실제로 createPattern()의 첫 번째 매개변수는 캔버스 개체나 비디오 개체에 전달될 수도 있습니다. 여기서는 Image 개체만 설명하고 나머지는 직접 시도해 볼 수 있습니다.

    
    패턴 만들기 및 채우기
    먼저 이미지 로드 방법을 살펴보세요.

    이미지 개체 만들기

    이미지 개체의 이미지 소스 지정
    

    코드는 다음과 같습니다.

    
    

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

    1. var img = new Image(); //이미지 객체 생성
    2. img.src = "8-1.jpg"; //이미지 개체의 이미지 소스 지정
    확장자 : HTML

    의 상대경로 '../디렉토리 또는 파일명' 또는 '디렉터리 또는 파일명'은 현재 동작중인 파일이 위치한 디렉토리의 경로를 의미합니다
    '../ 디렉토리 또는 파일명' 현재 동작 중인 파일이 위치한 디렉토리보다 상위 디렉토리의 경로를 의미합니다
    

    나중에 텍스처 채우기:

    
    

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

    1. var 패턴 = context.createPattern(img,"반복")
    2. context.fillStyle = 패턴
    완성된 프로그램을 직접 살펴보겠습니다. 여기서는 이 귀여운 기린을 텍스처로 반복해서 채워넣고 싶습니다. 주의할 점은 사진을 선택할 때 왼쪽에서 오른쪽, 위에서 아래로 질감이 서로 소통되는 사진을 선택해야 부자연스러운 짧은 연결이 발생하지 않는다는 점이다.

    
    

    아래에 코드가 제공됩니다.

    
    

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

    2. "zh">
    "UTF-8">
    5. <본문>
    "캔버스 워프"
    7. > "canvas"
    style=
    8. "border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
<스크립트>
window.onload =
34. 함수
(){
35. var
canvas = document.getElementById(
36. "캔버스"); canvas.width = 800 캔버스.높이 = 600
var
38. context = canvas.getContext(
"2d"
39. )
var
40. img =
new
41. Image() img.src = "8-1.jpg";
img.onload =
42. 함수(){
43. var 패턴 = context.createPattern(img, "반복"
);
44. context.fillStyle = 패턴 context.fillRect(0,0,800,600)                                                        
}
50. 실행 결과:
51. 여기서 Image의 onload 이벤트가 사용됩니다. 해당 기능은 이미지를 미리 로드하는 것입니다. 즉, 이미지가 로드된 후 후속 함수의 코드 본문이 즉시 제거됩니다. 이는 필수입니다. 작성하지 않으면 캔버스에 검은색 화면이 표시됩니다. 이미지가 로드될 때까지 기다리지 않고 텍스처가 채워지기 때문에 브라우저는 이미지를 찾을 수 없습니다. 여기서 "반복"이 사용되었습니다. 아동용 신발은 다른 세 가지 값을 사용해 어떤 효과가 있는지 확인할 수도 있습니다. 다른 그림을 찾아 내용을 채우고 효과를 확인할 수도 있습니다.