HTML5 Canvas API에서 클립() 메서드를 사용하여 영역 이미지를 자르는 코드 예-H5 튜토리얼-php.cn

HTML5 Canvas API에서 클립() 메서드를 사용하여 영역 이미지를 자르는 코드 예

黄舟

풀어 주다： 2017-03-15 16:17:01

원래의

1704명이 탐색했습니다.

이 글에서는 주로 HTML5 Canvas API에서 clip() 메서드를 사용하여 영역 이미지를 자르는 예제 튜토리얼을 소개합니다. .save() 와 Restore() 메소드의 조합에 특별한 주의가 필요합니다. 도움이 필요한 친구들은

을 참조하세요. Canvas를 사용하여 이미지를 그릴 때 이미지의 일부만 유지하고 싶은 경우가 많습니다. 이것이 바로 캔버스 API에서 제공하는 이미지 자르기 기능을 사용하여 이 아이디어를 실현할 수 있는 방법입니다.
Canvas API의 이미지 자르기 기능은 캔버스 내의 경로를 사용하면 경로에 포함된 영역의 이미지만 그려지고 경로 외부의 이미지는 그려지지 않는다는 의미입니다. 이는 Flash의 레이어 마스크와 약간 비슷합니다.

캔버스의 이미지 자르기 기능을 구현하려면 그래픽 컨텍스트의 매개변수 없이 clips() 메소드를 사용하십시오. 이 메서드는 경로를 사용하여 캔버스의 클리핑 영역을 설정합니다. 따라서 경로를 먼저 생성해야 합니다. 생성이 완료되면 Clip() 메서드를 호출하여 자르기 영역을 설정합니다.
잘라내기는 캔버스에서 수행된다는 점에 유의하세요. 잘린 캔버스는 원래 크기로 복원할 수 없습니다. 즉, 원래 정의된 크기를 유지하기 위해 캔버스가 작아집니다. 결국 캔버스에 의한 그리기는 저장()과 복원()에 주의가 필요합니다. 그리기 전에 캔버스를 먼저 자릅니다. 반드시 사진일 필요는 없고, 경로를 넣어도 됩니다~

먼저 간단한 데모를 살펴보겠습니다.

아아아앙

실행 결과:
HTML5 Canvas API에서 클립() 메서드를 사용하여 영역 이미지를 자르는 코드 예

save() 및 Restore() 메소드를 혼합하여 그리기 영역을 제한할 수 있습니다. 먼저, ect() 메서드를 사용하여 그리려는 영역을 둘러싼 다음,clip() 메서드를 사용하여 해당 영역을 자릅니다.

이렇게 하면 컨텍스트에서 어떤 작업을 수행하더라도 제한된 부분만 표시됩니다. 즉, 클립()의 기능은 표시할 영역을 제한하는 것입니다. 더 이상 영역을 제한하고 싶지 않으면 복원() 메서드를 사용하여 원래 컨텍스트에서 벗어나 계속 작업할 수 있습니다.
이 작물을 다시 보세요:
HTML5 Canvas API에서 클립() 메서드를 사용하여 영역 이미지를 자르는 코드 예

JavaScript Code复制内容到剪贴板
<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>裁剪区域</title>   
    <style>   
        body { background: url("./images/bg3.jpg") repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    </style>   
</head>   
<body>   
<p id="canvas-warp">   
    <canvas id="canvas">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</p>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
        context.fillStyle = "#FFF";   
        context.fillRect(0,0,800,600);   
  
        //在屏幕上绘制一个大方块   
        context.fillStyle = "black";   
        context.fillRect(10,10,200,200);   
        context.save();   
        context.beginPath();   
  
        //裁剪画布从(0，0)点至(50，50)的正方形   
        context.rect(0,0,50,50);   
        context.clip();   
  
        //红色圆   
        context.beginPath();   
        context.strokeStyle = "red";   
        context.lineWidth = 5;   
        context.arc(100,100,100,0,Math.PI * 2,false);   
        //整圆   
        context.stroke();   
        context.closePath();   
  
        context.restore();   
  
        //再次裁切整个画布   
        context.beginPath();   
        context.rect(0,0,500,500);   
        context.clip();   
  
        //绘制一个没有裁切的蓝线   
        context.beginPath();   
        context.strokeStyle = "blue";   
        context.lineWidth = 5;   
        context.arc(100,100,50,0,Math.PI * 2,false);   
        //整圆   
        context.stroke();   
        context.closePath();   
    };   
</script>   
</body>   
</html>

로그인 후 복사

역시 크롭 기능의 일반적인 호출 형태는

JavaScript Code复制内容到剪贴板
function drawScreen() {   
        var x = canvas.width / 2;   
        var y = canvas.height / 2;   
        var radius = 75;   
        var offset = 50;   
  
        //裁剪的区域为 (x, y)为中心半径为75的圆   
        context.save();   
        context.beginPath();   
        context.arc(x, y, radius, 0, 2 * Math.PI, false);   
        context.clip();   
  
        // 先画一个蓝色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;blue&#39;;   
        context.fill();   
  
        // 画一个黄色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x + offset, y, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;yellow&#39;;   
        context.fill();   
  
        // 画一个红色的圆弧， 超过裁剪的部分不显示   
        context.beginPath();   
        context.arc(x, y + offset, radius, 0, 2 * Math.PI, false);   
        context.fillStyle = &#39;red&#39;;   
        context.fill();   
  
        /* 
         * restore()方法会返回到context原先的状态，在这里是clip()之前的状态。  
         * 大家可以移除context.beginPath()方法，试试会发生什么。  
         */  
        context.restore();   
        context.beginPath();   
        context.arc(x, y, radius, 0, 2 * Math.PI, false);   
        context.lineWidth = 10;   
        context.strokeStyle = &#39;blue&#39;;   
        context.stroke();   
    }

로그인 후 복사

순서입니다.

위 내용은 HTML5 Canvas API에서 클립() 메서드를 사용하여 영역 이미지를 자르는 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!