집 > 기사 > 웹 프론트엔드 > H5 Canvas API의 drawImage(이미지 크기 조정 또는 자르기) 사용 예

H5 Canvas API의 drawImage(이미지 크기 조정 또는 자르기) 사용 예

巴扎黑원래의: 2018-05-24 16:29:5416966검색

이 글에서는 주로 HTML5 Canvas API의 drawImage() 메소드 사용 예를 소개합니다. drawImage() 메소드는 주로 이미지 크기를 조정하거나 자르는 데 사용되며 해당 좌표 및 관련 매개변수의 사용법을 제공합니다.

drawImage()를 참고하면 이미지, 캔버스, 비디오를 소개하고 크기를 조정하거나 자를 수 있습니다.

3가지 형태의 표현이 있습니다:

구문 1

JavaScript 코드클립보드에 콘텐츠 복사

context.drawImage(img,dx,dy); 콘텐츠를 클립보드에 복사

context.drawImage(img,dx,dy,dw, dw);

구문 3

클립보드에 콘텐츠 복사

context.drawImage(img,sx,sy,sw,sh, dx,dy,dw,dh)

좌표 스케치를 살펴보겠습니다.

PS: 스타일 너비와 높이에 5ba626b379994d53f7acf72a64f9b697를 정의하지 마세요. 그렇지 않으면 내부에 그려진 그림이 자동으로 확대되거나 축소됩니다.
3개의 매개변수 버전은 표준 형식이며 이미지, 캔버스 또는 비디오를 로드하는 데 사용할 수 있습니다. 5개의 매개변수 버전은 이미지를 로드할 수 있을 뿐만 아니라 9개의 매개변수로 이미지를 지정된 너비와 높이로 확대/축소할 수도 있습니다. 크기 조정 외에도 버전을 자를 수도 있습니다. 각 매개변수의 의미는 아래 표를 참조하세요.

매개변수	설명
img
sx	선택사항. 자르기를 시작할 X 좌표 위치입니다.
sy	선택사항. 절단을 시작할 Y좌표 위치입니다.
폭	선택사항. 자른 이미지의 너비입니다.
높이	선택사항. 잘린 이미지의 높이입니다.
x	이미지의 x 좌표 위치를 캔버스에 배치합니다.
y	이미지의 y 좌표 위치를 캔버스에 배치합니다.
너비	선택사항. 사용할 이미지의 너비입니다. (이미지를 늘리거나 줄입니다)
height	사용할 이미지의 높이입니다. (이미지를 늘리거나 줄입니다)

다음으로 이미지를 불러와 보겠습니다.
2016325103525710.png (360×360)

클립보드에 콘텐츠 복사

参数	描述
img
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	要使用的图像的高度。（伸展或缩小图像）

<!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>drawImage()</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);   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
</script>   
</body>   
</html>

실행 결과:

클립보드에 콘텐츠 복사 2016325103645161.jpg (850×500)

<!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.beginPath();   
        context.moveTo(400,260);   
        context.bezierCurveTo(450,220,450,300,400,315);   
        context.bezierCurveTo(350,300,350,220,400,260);   
        context.clip();   
        context.closePath();   
  
        var img = new Image();   
        img.src = "./images/20-1.jpg";   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
</script>   
</body>   
</html>

실행 결과:

위 내용은 H5 Canvas API의 drawImage(이미지 크기 조정 또는 자르기) 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Java JavaScript html5 canvas

성명：

이전 기사：HTML5의 새로운 양식 속성 분석다음 기사：HTML5의 새로운 양식 속성 분석