HTML5의 여러 변형

HTML5에는 여러 가지 변형 방법이 있습니다.

scale() scale
rotate() 회전
translate() 번역
transform () 행렬 변환
setTransform() 행렬 재설정

이러한 방법을 사용하면 다음과 같은 그림 처리를 완료할 수 있습니다

그러나, 다음과 같은 불규칙한 변형을 얻으려면 작동하지 않습니다

그러면 단계별로 진행해 보겠습니다. 먼저 이러한 방법 중 HTML5를 살펴보겠습니다.

1, 스케일링 방법은 다음과 같습니다

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="280"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.scale(0.5,0.5);
	ctx.drawImage(img,500,0);
};
</script>
</body>
</html>

로그인 후 복사

효과

2, 회전 코드

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.rotate(20*Math.PI/180);
	ctx.drawImage(img,200,0);
};
</script>
</body>
</html>

로그인 후 복사

효과

3, 번역코드

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="400"></canvas>
<script type="text/javascript">
var c=document.getElementById(&#39;myCanvas&#39;);
var ctx=c.getContext(&#39;2d&#39;);
var img = new Image();
img.src="face.jpg";
img.onload = function(){
	ctx.drawImage(img,0,0);
	ctx.translate(100,100);
	ctx.drawImage(img,0,0);
};
</script>
</body>
</html>

로그인 후 복사

효과

4, 틸트코드

으르렁

효과

불규칙한 변형

앞 전제 HTML5는 불규칙한 변형을 직접 구현할 수는 없지만 일련의 조합을 통해 구현할 수 있습니다. 예를 들어 다음과 같은 변형을 분해합니다.

분해 후. , 그것은

이 됩니다. 그러다가 계속해서 살펴보면 아래 그림과 같이 실제로 두 변형의 조합으로 볼 수 있습니다

사실 여러개의 변형을 합쳐서 이런 식으로 변형을 일부 꺼내서 새로운 모양으로 엮으면 지금 막 특별한 모양이 되는 것입니다

이 아이디어에 따라 AS3를 따라 그림을 여러 개의 작은 삼각형으로 분해했습니다. 효과는 다음과 같습니다

그렇습니다. drawtriangles 함수는 그래픽을 왜곡하기 위해 구현되었으며, 그 기능은 기본적으로 AS3의 drawtriangles 함수와 동일합니다. 차이점은 4번째 이후의 매개변수의 의미가 다릅니다. 여기서 4번째 매개변수는 분할의 선 두께를 나타냅니다. 5번째 매개변수는 구분선의 굵기를 나타냅니다. 이 매개변수는 구분선의 색상을 나타냅니다. 설정하지 않으면 이 기능의 효과는 다음과 같습니다. 변형, 심지어 3D 변형