HTML5 4__Canvas API: 곡선 그리기 및 변형-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 4__Canvas API: 곡선 그리기 및 변형

黄舟

Feb 18, 2017 pm 02:20 PM

HTML5 개발의 출발점 중 하나는 그래픽, 차트, 이미지, 애니메이션을 동적으로 생성하고 표시할 수 있는 Canvas입니다.

Canvas가 등장하기 전에는 개발자가 드로잉 API만 사용하면 되었습니다. 브라우저에서는 Adobe의 Flash 및 SVG(Scalable Vector Graphics) 플러그인이나 IE에서만 지원되는 VML(Vector Markup Language) 및 일부 JS 기술을 사용할 수 있습니다.

캔버스는 본질적으로 비트맵 캔버스입니다. 캔버스에 그려진 그래픽은 확장 가능하지 않으며 SVG 이미지처럼 크기 조절도 불가능합니다. >결함으로 간주되는 DOM 구조 또는 모든 네임스페이스, SVG 이미지는 다양한 해상도에서 원활하게 확장될 수 있으며 클릭 감지를 지원합니다. Canvas에는 명백한 단점이 있지만 Canvas API에는 두 가지 장점이 있습니다.

1. 그려진 이미지의 각 프리미티브를 객체로 저장할 필요도 없고 실행 성능도 매우 좋습니다.

2. 기존의 우수한 2차원 그리기 API를 기반으로 다른 프로그래밍 언어로 Canvas API를 구현하는 것은 상대적으로 간단합니다.

1. 먼저 캔버스를 도입하여 곡선을 그립니다

코드 보기

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>绘制曲线</title>
    <script language="javascript">
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            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 = &#39;#663300&#39;;
            context.lineWidth = 20;
            context.stroke();
            //恢复之前的canvas 状态
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
    </script>
</head>
<body>
    <canvas height="400" width="400" id="trails" style="border: 1px solid;"/>
</body>
</html>

로그인 후 복사

Chrome

브라우저에서 실행 효과

2. 🎜>

캔버스에 이미지를 그리는 한 가지 방법은 변환을 사용하는 것입니다. 실제로 변환은 복잡한 캔버스 작업을 구현하는 가장 좋은 방법입니다.

변환을 다음과 같이 이해할 수 있습니다. 개발자 발행 캔버스 표시 결과 사이의 수정된 포지티브 레이어

다음 예는 가장 간단한 변환 방법을 사용하는 방법을 보여줍니다---------translate()

보세요 코드에서

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <title>变换对角线</title>

  <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
  <script>
        function drawDiagonal() {
            var canvas = document.getElementById(&#39;diagonal&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            // 保存当前绘图状态
            context.save();

            //向右下方移动绘图上下文
            context.translate(70, 140);

            //以原点为起点，绘制与前面相同的线段
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            // 恢复原有的绘图状态
            context.restore();
        }

        window.addEventListener("load", drawDiagonal, true);
  </script>
</html>

로그인 후 복사

작동효과

위는 HTML5 4__Canvas API: Drawing Curves, 변환된 콘텐츠, 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!