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

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

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

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

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단계 전략이지만 첫 번째 단계에서 사용하는 방법이 변경되었습니다.
그라디언트 원 추가:

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

그라디언트 적용:

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