HTML5 Canvas 변환

HTML5 Canvas 상태

HTML5 Canvas toDataURL()

Canvas 픽셀 처리

1. Canvas 애니메이션

2. Canvas 변화

Canvas 변화는 형태의 채우기나 연필의 색상 패턴으로 사용되며, 단색이 아닌 색상 패턴입니다. 변화는 하나의 색상에서 다른 색상으로 변하는 색상 패턴입니다. 변화는 두 가지 유형이 있습니다: Linear(선형)과 Radial(경계선)
Canvas 변화는 형태의 채우기나 연필의 색상 패턴으로 사용되며, 단색이 아닌 색상 패턴입니다. 변화는 하나의 색상에서 다른 색상으로 변하는 색상 패턴입니다. 이를 설명하기 위해 몇 가지 예제를 드리겠습니다:
두 가지 변화 유형이 있습니다:

Linear(선형)

Radial(경계선)2선형 변화는 수평, 수직 또는 대각선의 선형 패턴을 사용하여 색상을 변경합니다.

var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
　　　　
var　x1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
var　y1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
var　x2　=　100;
var　y2　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
var linearGradient1　= 0;1,　y1,　x2,　y2);

Radial(경계선) 변화는 원형 패턴을 사용하여 색상을 변경하고, 내부에서 외부로 색상을 변경합니다.4두 가지 변화 유형이 본문에서 소개됩니다.1와 y1선형 변화2와 y2위에서 설명한 것처럼, 선형 변화는 선형 패턴을 사용하여 색상을 변경합니다. 선형 변화를 사용합니다.4createLinearGradient() 함수는 D 컨텍스트 함수를 사용하여 선형 변화를 생성합니다. createLinearGradient(). 다음은 예제입니다:1와 y1개의 매개변수: x2와 y2입니다.
개의 매개변수가 변화 패턴의 방향과 확장을 결정합니다. 변화는 첫 번째 점 x1와 x2으로 확장됩니다.

　　　　var　x1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
　　　　var　y1　만 변경하여 가로 변화를 생성합니다. 다음은 예제입니다:2　=　100;
　　　　var　y2　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
　　　　var linearGradient1　= 0;1,　y1,　x2,　y2);

를 사용하여 가로 변화를 생성합니다. 다음은 예제입니다:1를 사용하여 가로 변화를 생성합니다. 다음은 예제입니다:2와 y

　　　　var　x1　를 사용하여 가로 변화를 생성합니다. 다음은 예제입니다:1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
　　　　var　x2　를 사용하여 가로 변화를 생성합니다. 다음은 예제입니다:2　=　100;
　　　　var linearGradient1　= 0;1,　y1,　x2,　y2);

= 0; var y

　　　　var　x1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
　　　　var　y1　를 동시에 x와 y축 매개변수를 변경하여 대각선 변화를 생성합니다. 다음은 예제입니다:
　　　　var　x2　=　100;
　　　　var　y2　=　100;
　　　　var linearGradient1　= 0;1,　y1,　x2,　y2);

= context.createLinearGradient(x

색상 중지

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(1,　'rgb(　　0,　0,　0)');

위의 예제는 변화의 색상을 보여주지 않았습니다. 변화의 색상을 설정하려면 addColorStop() 함수를 변화 객체에 사용할 수 있습니다. 다음은 예제입니다:2이 addColorStop() 함수는1매개변수는 0과/녹색 사이의 숫자입니다. 이 숫자는 이 색상표가 변화 영역에서 어디에 위치할지를 나타냅니다. 두 번째 매개변수는 색상 자체입니다. 주의해야 할 것은, 이 예제에서는 rbg(red, green, blue) 색상 표현법을 사용하는 방법입니다. 각 빨간색/파란색 값은 0에서255사이의 숫자(1바이트를 나타냅니다).
위의 예제는 두 개의 색상표를 추가했습니다. 첫 번째는 빨간색으로, 변화하는 시작점에서 설정되었습니다(첫 번째 매개변수 값이 0입니다). 두 번째 색상은 검은색으로, 변화 영역의 끝에 설정되었습니다(첫 번째 매개변수는1）。
그레이더에 두 개 이상의 색상 표시를 추가할 수 있습니다. 이는3개의 색상 표시의 예제:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');

이 예제에서는 그레이더 중간에 파란색을 추가했습니다. 따라서 그레이더는 빨간색에서 파란색으로 부드럽게 변하고, 그 다음 검은색으로 변합니다.

그레이더를 채우거나 테두리 스타일로 사용하면 됩니다

그레이더를 채우거나 테두리 스타일로 사용할 수 있습니다. 단순히2D 컨텍스트 fillStyle 또는 strokeStyle 속성을 그레이더 객체로 설정하여 이 작업을 완료할 수 있습니다. 이는 예제입니다:

var linearGradient1　= context.createLinearGradient(0,0,100,0);
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255);
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　0)');
context.fillStyle = linearGradient1;
context.strokeStyle = linearGradient1;

이제, 그레이더를 채우거나 테두리 색상으로 그릴 수 있습니다. 이를 보여주기 위해 두 개의 사각형을 그리는 예제를 보겠습니다-한쪽이 채워져 있고 다른 쪽이 테두리로 그려져 있습니다:

<canvas id="ex2" width="500" height="125" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex2");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(0,0,100,0);　//horizontal gradient
linearGradient1.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient1.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient1.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,100,　100);
var linearGradient2　= context.createLinearGradient(125,0,　225,0);　//horizontal gradient
linearGradient2.addColorStop(0　　,　'rgb(255,　0,　　　0)');
linearGradient2.addColorStop(0.5,　'rgb(　　0,　0,　255)');
linearGradient2.addColorStop(1　　,　'rgb(　　0,　0,　　　0)');
context.strokeStyle = linearGradient2;
context.strokeRect(125,　10,　100,　100);
</script>

이는 캔버스에 그릴 때의 결과입니다:

그레이더 그레이더 범위

그레이더의 정도를 이해하는 것이 중요합니다. 그레이더가 x = 10까지 확장됩니다. 110만 x 값이10까지110사이의 그래픽만이 그레이더 색상을 가집니다. 이 영역 외에 그린 그래픽은 그레이더에 영향을 받지만, 그레이더의 첫 번째 또는 마지막 색상을 사용하여 그려집니다.
예를 들어, x = 150에서350. 이 그레이더는 파란색에서 녹색으로 변합니다. x 값이150으로 그린 모든 그래픽은 파란색으로 그려집니다. x 값이350으로 그린 모든 그래픽은 녹색으로 그려집니다. x 값이150과350 사이의 그래픽만이 그레이더 색상을 가집니다.
이는 위의 그레이더를 사용하여 그린 코드 예제입니다5개의 사각형을 통해 이를 설명합니다

<canvas id="ex3" width="500" height="250" style="border:　1px solid #cccccc;">
　　　　HTML5　Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex3");
var context = canvas.getContext("2d");
var linearGradient1　= context.createLinearGradient(150,　0,　350,0);
linearGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
linearGradient1.addColorStop(1,　'rgb(0,　255,　0)');
context.fillStyle = linearGradient1;
context.fillRect(10,10,130,　100);
context.fillRect(150,10,　200,　100);
context.fillRect(360,10,　130,　100);
context.fillRect(100,120,　150,　100);
context.fillRect(280,120,　150,　100);
</script>

这就是在画布上绘制时的结果。请注意，只有x值在150到350之间的图形才具有渐变颜色，而其余图形是全蓝色（第一个色标）或全绿色（最后一个色标）。

本示例仅在渐变中使用2种颜色，但是如果在渐变中使用3种或更多颜色，则效果相同。在渐变区域之外，仅使用第一个和最后一个停止色。
渐变程度对于理解正确着色形状很重要。在许多情况下，可能必须为每种形状专门定义渐变，以适合绘制形状的区域。

径向渐变

径向渐变类型是从内部颜色向外延伸到一种或多种其他颜色的圆形图案。以下是一些图形示例:

径向渐变由2개의 원 정의. 각 원에는 중심점과 반지름이 하나 있습니다. 이는 코드 예제입니다:

var　x1　=　100;　　　//　x　of　1.　circle　center　point
var　y1　=　100;　　　//　y　of　1.　circle　center　point
var　r1　=　30;　　　　//　radius　of　1.　circle
var　x2　=　100;　　　//　x　of　2.　circle　center　point
var　y2　=　100;　　　//　y　of　2.　circle　center　point
var　r2　=　100;　　　//　radius　of　2.　circle
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　　　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

와 같이 두 중심점이 정의되었습니다.1와 y1와 x2와 y2())이 두 반지름(r1와 r2())이 createRadialGradient()에 매개변수로 전달됩니다.2D 컨텍스트의 기능.
두 원을 다른 반지름으로 정의해야 하며, 따라서 내 원과 외 원(적어도 크기)을 생성합니다. 그런 다음, 점진에서의 색상은 하나의 원에서 원형으로 다른 원으로 이어집니다.
컬러 스타일의 작동 방식은 선형 그레이더와 같습니다. 그들은 점진에서 사용할 색상을 정의하며, 점진 범위에 어떤 색상을 배치할지 정의합니다.
추가된 컬러 스타일은 두 원 사이의 어떤 위치에서도 일치합니다. 예를 들어, 컬러 스톱의 첫 번째 매개변수 0은 색상이 첫 번째 원에서 시작되는 곳에서 시작된다는 것을 의미합니다. 컬러 스톱의 첫 번째 매개변수1에서 색상이 두 번째 원에서 시작되는 곳에서 시작됩니다.
이는 HTML5캔버스에 그릴 때의 코드 예제 결과:

두 원이 같은 중심점을 가지고 있다면, 그레이더는 완전히 원형이며, 색상은 내 원에서 외 원으로 점진적으로 변합니다. 두 원의 중심점이 다를 경우, 그레이더는 더 비슷한 원추형이며, 조명에서 투사되는 빛(표면에 직각으로 향하지 않음)과 같습니다. 이는 비슷한 원추형 코드 예제입니다:

var　x1　=　100;
var　y1　=　100;
var　r1　=　30;
var　x2　=　150;
var　y2　=　125;
var　r2　=　100;
var　radialGradient1　=　context.createRadialGradient(x1,　y1,　r1,　x2,　y2,　r2);
radialGradient1.addColorStop(0,　'rgb(0,　　　0,　255)');
radialGradient1.addColorStop(1,　'rgb(0,　255,　　　0)');
context.fillStyle = radialGradient;1;
context.fillRect(10,10,　200,　200);

이는 화면에 변화gradient을 그리는 모습입니다: