H5 Canvas API의 drawImage(이미지 크기 조정 또는 자르기) 사용 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

May 24, 2018 pm 04:29 PM

canvas html5

이 글에서는 주로 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: 스타일 너비와 높이에 <canvas>를 정의하지 마세요. 그렇지 않으면 내부에 그려진 그림이 자동으로 확대되거나 축소됩니다.
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	要使用的图像的高度。（伸展或缩小图像）

&lt;!DOCTYPE html&gt;   
&lt;html lang=&quot;zh&quot;&gt;   
&lt;head&gt;   
    &lt;meta charset=&quot;UTF-8&quot;&gt;   
    &lt;title&gt;drawImage()&lt;/title&gt;   
    &lt;style&gt;   
        body { background: url(&quot;./images/bg3.jpg&quot;) repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    &lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p id=&quot;canvas-warp&quot;&gt;   
    &lt;canvas id=&quot;canvas&quot;&gt;   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    &lt;/canvas&gt;   
&lt;/p&gt;   
  
&lt;script&gt;   
    window.onload = function(){   
        var canvas = document.getElementById(&quot;canvas&quot;);   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext(&quot;2d&quot;);   
        context.fillStyle = &quot;#FFF&quot;;   
        context.fillRect(0,0,800,600);   
  
        var img = new Image();   
        img.src = &quot;./images/20-1.jpg&quot;;   
        img.onload = function(){   
            context.drawImage(img,200,50);   
        }   
    };   
&lt;/script&gt;   
&lt;/body&gt;   
&lt;/html&gt;

로그인 후 복사

실행 결과:

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

&lt;!DOCTYPE html&gt;   
&lt;html lang=&quot;zh&quot;&gt;   
&lt;head&gt;   
    &lt;meta charset=&quot;UTF-8&quot;&gt;   
    &lt;title&gt;绘制心形相框&lt;/title&gt;   
    &lt;style&gt;   
        body { background: url(&quot;./images/bg3.jpg&quot;) repeat; } 
        #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    &lt;/style&gt;   
&lt;/head&gt;   
&lt;body&gt;   
&lt;p id=&quot;canvas-warp&quot;&gt;   
    &lt;canvas id=&quot;canvas&quot;&gt;   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    &lt;/canvas&gt;   
&lt;/p&gt;   
  
&lt;script&gt;   
    window.onload = function(){   
        var canvas = document.getElementById(&quot;canvas&quot;);   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext(&quot;2d&quot;);   
        context.fillStyle = &quot;#FFF&quot;;   
        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 = &quot;./images/20-1.jpg&quot;;   
        img.onload = function(){   
            context.drawImage(img,348,240,100,100);   
        }   
    };   
&lt;/script&gt;   
&lt;/body&gt;   
&lt;/html&gt;

로그인 후 복사

실행 결과:

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.