HTML5 7 __Canvas: 크기 조절, 회전, 그림자 생성-H5 튜토리얼-php.cn

1. 캔버스 API의 scale() 함수는 크기 조정에 사용됩니다.

scale()은 x의 두 매개변수를 나타내는 두 개의 매개변수를 사용합니다. 각 매개변수는 캔버스에 이미지를 표시할 때 방향 축을 기준으로 이미지를 확대(또는 축소)해야 하는 양을 전달합니다. 그려진 이미지의 모든 요소는 2가 됩니다. 이중 너비, y 값이 0.5이면 그려진 이미지의 모든 요소가 이전 이미지 높이의 절반이 됩니다.

예를 들어 다음 프로그램은 캔버스에 새 트리를 쉽게 만들 수 있습니다.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>缩放示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }
 
        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
 
            context.lineTo(0, -140);
            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }
 
        // 将绘制树的方法 放到 drawTree()，方便重用
        function drawTree(context) {
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);
 
            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            canopyShadow.addColorStop(0, &#39;rgba(0, 0, 0, 0.5)&#39;);
            canopyShadow.addColorStop(0.2, &#39;rgba(0, 0, 0, 0.0)&#39;);
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);
 
            createCanopyPath(context);
 
            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();
 
            context.fillStyle = &#39;#339900&#39;;
            context.fill();
        }
 
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            // 在 X=130, Y=250的位置绘制第一棵树
            context.save();
            context.translate(130, 250);
            drawTree(context);
            context.restore();
            // 在 X=260, Y=500 位置绘制第二棵树
            context.save();
            context.translate(260, 500);
 
            // 将第二棵树的宽高分别放大至原来的2倍
            context.scale(2, 2);
            drawTree(context);
            context.restore();
 
            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }
  </script>
</html>

로그인 후 복사

2. Rotate context.rotate(angle), 매개변수 각도는 라디안 단위입니다

코드를 보세요

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>旋转示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }
 
        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
 
            context.lineTo(0, -140);
 
            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }
 
        // 将绘制树的方法 放到 drawTree()
        function drawTree(context) {
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);
 
            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            canopyShadow.addColorStop(0, &#39;rgba(0, 0, 0, 0.5)&#39;);
            canopyShadow.addColorStop(0.2, &#39;rgba(0, 0, 0, 0.0)&#39;);
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);
 
            createCanopyPath(context);
 
            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();
 
            context.fillStyle = &#39;#339900&#39;;
            context.fill();
        }
 
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            // 在 X=130, Y=250的位置绘制第一棵树
            context.save();
            context.translate(100, 150);
            context.rotate(1.57);    //旋转角度以弧度为单位
            drawTree(context);
            context.restore();
 
            context.save();
            context.translate(-10, 450);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }
 
  </script>
</html>

로그인 후 복사

위의 두 가지 예에서 주목해야 할 사항:

그래픽 및 경로에 대한 변환 작업 수행 이 예에서는 그래픽과 경로에 대해 원점에서 변환 작업을 수행한 다음 실행 후 균일하게 변환해야 하는 이유를 보여줍니다. 원점에 있지 않은 그래픽을 회전하면 그래픽이 제자리에서 회전하지 않고 원점을 중심으로 회전합니다. 마찬가지로 크기 조정 시 그래픽이 적절한 좌표에 배치되지 않으면 모든 좌표가 동시에 크기 조정되며 새 좌표가 캔버스 범위를 초과할 수 있습니다.

3. 그림자 만들기

다음 예는 경로 좌표를 기본적으로 자유롭게 변환하는 방법을 보여줍니다. 이제 나무의 경로 표시를 변경하여 궁극적으로 그림자 효과를 생성합니다. 관련 코드:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>变换阴影</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }
 
        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);
 
            context.lineTo(0, -140);
            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }
 
        function drawTree(context) {
            context.save();
            // X值随着Y值的增加而增加，借助拉伸变换，可以创建一棵用作阴影的倾斜的树，应用了
            // 变换以后，所有坐标都与矩阵相乘
            context.transform(1, 0, -0.5, 1,  0, 0);
 
            // 在Y轴方向，将阴影的高度压缩为原来的60%
            context.scale(1, 0.6);
 
            // 使用透明度为20%的黑色填充树干
            context.fillStyle = &#39;rgba(0, 0, 0, 0.2)&#39;;
            context.fillRect(-5, -50, 10, 50);
 
            // 使用已有的阴影效果重新绘制
            createCanopyPath(context);
            context.fill();
            context.restore();
 
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);
 
            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            canopyShadow.addColorStop(0, &#39;rgba(0, 0, 0, 0.5)&#39;);
            canopyShadow.addColorStop(0.2, &#39;rgba(0, 0, 0, 0.0)&#39;);
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);
 
            createCanopyPath(context);
 
            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();
 
            context.fillStyle = &#39;#339900&#39;;
            context.fill();
        }
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            context.save();
            context.translate(130, 250);
            drawTree(context);
            context.restore();
 
            context.save();
            context.translate(260, 500);
            context.scale(2, 2);
            drawTree(context);
            context.restore();
 
            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }
  </script>
</html>

로그인 후 복사

이 변환의 수학적 의미를 분석해 보면 Y축을 조정함으로써 알 수 있습니다. value 해당 매개변수는 X축 값을 변경합니다. 이는 그림자에 대한 회색 트리를 늘리기 위해 수행됩니다. 다음으로 자른 나무를 60% 비율로 적절한 크기로 줄였습니다.

잘린 "그림자" 나무가 먼저 표시되므로 Z축(캔버스에서 개체가 겹치는 순서)에 따라 그림자 위에 실제 나무가 표시됩니다. ) . 또한, CSS의 RGBA 기능을 이용하여 나무 그림자를 채우는데, 이 기능을 통해 일반 조건에서는 투명도 값을 20%로 설정하면 반투명 효과가 있는 나무 그림자가 완성됩니다.

예제 grave.jpg