HTML5 Canvas_html5 튜토리얼 기술로 텍스트와 그림을 그리는 기본 튜토리얼

텍스트 그리기

HTML5에서는 Canvas "캔버스"에 필요한 텍스트를 그릴 수도 있습니다. 관련된 CanvasRenderingContext2D 개체의 주요 속성과 메서드는 다음과 같습니다.

属性或方法	基本描述
font	设置绘制文字所使用的字体，例如20px 宋体，默认值为10px sans-serif。该属性的用法与css font属性一致，例如italic bold 14px/30px Arial,宋体
fillStyle	用于设置画笔填充路径内部的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
strokeStyle	用于设置画笔绘制路径的颜色、渐变和模式。该属性的值可以是一个表示CSS颜色值的字符串。如果你的绘制需求比较复杂，该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象
fillText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制填充的文本文字。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。与本方法对应的样式设置属性为fillStyle。
strokeText(string text, int x, int y[, int maxWidth])	从指定坐标点位置开始绘制非填充的文本文字(文字内部是空心的)。参数maxWidth是可选的，如果文本内容宽度超过该参数设置，则会自动按比例缩小字体以适应宽度。该方法与fillText()用法一致，不过strokeText()绘制的文字内部是非填充(空心)的，fillText()绘制的文字是内部填充(实心)的。与本方法对应的样式设置属性为strokeStyle。

위의 API 설명 정보를 통해 Canvas에 텍스트를 그리는 방법에는 두 가지가 있음을 알 수 있습니다. 하나는 fillText() fillStyle을 사용하여 채워진(단색) 텍스트를 그리는 것이고, 다른 하나는 스트로크 텍스트()를 사용하는 것입니다. 채워지지 않은(빈) 텍스트입니다.

다음으로 캔버스를 사용하여 단색 텍스트를 그리는 방법을 살펴보겠습니다.

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

4. "UTF-8">
"myCanvas" width=
9. "400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
11. <스크립트 유형=
"텍스트/자바스크립트"
12. >
13. //캔버스 객체 가져오기(캔버스)
14. var canvas = document.getElementById("myCanvas"
);
15. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
if
16. (canvas.getContext){ 
//해당 CanvasRenderingContext2D 객체(브러시) 가져오기
var
18. ctx = canvas.getContext("2d")
19.   //글꼴 스타일 설정
20. ctx.font =
"30px 택배 신규"
//글꼴 채우기 색상 설정
22. ctx.fillStyle =
"파란색"
//좌표점(50,50)에서 텍스트 그리기 시작
24. ctx.fillText(
"CodePlayer 중국어 테스트"
25. , 50, 50) }

28. 해당 표시 효과는 다음과 같습니다.
    

    다음으로, 다른 환경 조건을 변경하지 않고 다시 스트로크텍스트()의 스트로크 스타일 메서드를 사용하여 위 예제의 텍스트를 그립니다.

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

    1. <스크립트 유형="텍스트/자바스크립트">
    2. //캔버스 객체 가져오기(캔버스)
    3. var canvas = document.getElementById("myCanvas"); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 객체를 지원하는지 여부를 간단히 감지합니다.
    4. if
    5. (canvas.getContext){  //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
    6. var
    7. ctx = canvas.getContext("2d")  
    8. //글꼴 스타일 설정
    9. ctx.font = "30px 택배 신규"
    10. ; //글꼴 색상 설정
    11. ctx.StrokeStyle = "파란색";
    12. //좌표점(50,50)에서 텍스트 그리기 시작
    13. ctx.StrokeText("CodePlayer 중국어 테스트", 50, 50)
    14. }
    15. 브라우저를 사용하여 페이지에 다시 액세스하면 다음과 같은 표시 효과를 볼 수 있습니다(효과 그림에서 "CodePlayer"라는 단어는 실제로 비어 있지만 글꼴이 더 작기 때문에 양면이 겹쳐 보이는 것처럼 보입니다).

    그림 그리기
    HTML5에서는 캔버스를 사용하여 벡터 그래픽을 그리는 것 외에도 캔버스 "캔버스"에 기존 이미지 파일을 그릴 수도 있습니다.

    
    먼저 캔버스를 사용하여 이미지 파일을 그리는 데 필요한 CanvasRenderingContext2D 개체의 주요 속성과 메서드를 살펴보겠습니다.

    
    XML/HTML 코드
    클립보드에 콘텐츠 복사

    drawImage(혼합 이미지, int x, int y)

    1. 캔버스에 지정된 좌표점부터 시작하여 이미지의 원본 크기에 맞게 전체 이미지를 그립니다. 여기의 이미지는 Image 객체 또는 Canvas 객체(아래 동일)일 수 있습니다.
    XML/HTML 코드

    클립보드에 콘텐츠 복사

    
    

    drawImage(혼합 이미지, int x, int y, int 너비, int 높이)

    캔버스의 지정된 좌표점에서 시작하여 지정된 크기(너비 및 높이)로 전체 이미지를 그립니다. 이미지는 지정된 크기에 따라 자동으로 조정됩니다.
    drawImage(mixed image, int imageX, int imageY, int imageWidth, int imageHeight, int canvasX, int canvasY, int canvasWidth, int canvasHeight)
    지정된 이미지의 부분 이미지를 변환합니다((imageX, imageY) 왼쪽 상단 Corner, 너비는 imageWidth, 높이는 imageHeight)는 캔버스에 그려지며 (canvasX, canvasY)는 왼쪽 상단 좌표로, 너비는 canvasWidth, 높이는 canvasHeight
    예, 그 말을 읽어보세요. 캔버스에 이미지를 그리려면 drawImage()라는 메서드를 사용할 수 있지만 이 메서드에는 세 가지 다른 변형이 있습니다. 각 메서드 변형에서는 서로 다른 수의 매개변수를 받을 수 있을 뿐만 아니라 매개변수의 의미도 동일합니다.

    여기에서는 위의 세 가지 변형에 대한 예를 각각 제시합니다.

    먼저 drawImage()의 첫 번째 변형을 사용하여 캔버스(원본 크기는 550 x 190)에 Google 로고 이미지를 그립니다.

    JavaScript 코드클립보드에 콘텐츠 복사
    4. "UTF-8">
    "myCanvas"
    10. width="400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
    <스크립트 유형=
    13. "텍스트/자바스크립트"
    >
    14. //캔버스 객체 가져오기(캔버스)
    15. var canvas = document.getElementById(
    "myCanvas"
    16. ); //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
    17. if(canvas.getContext){ 
    18. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
    19. var ctx = canvas.getContext("2d"
    )
    20.   //새 이미지 객체 생성
    22. var img = new
    이미지()
    23. //이미지 URL 지정
    img.src =
    24. "http://www.365mini.com/image/google_logo.png"
    25. //이미지를 로드한 후 브라우저가 이미지를 그립니다.
    img.onload =
    26. 함수(){
    27. //캔버스 캔버스의 좌표(10,10)를 시작점으로 이미지를 그린다
    ctx.drawImage(img, 10, 10);
    28. }; }

    32. 해당 표시 효과는 다음과 같습니다.
        

        Google 로고 이미지가 너무 크고 캔버스 크기 범위를 초과하기 때문에 이미지의 일부만 표시될 수 있습니다. 이 시점에서는 두 번째 변형을 사용하여 Google 로고 이미지를 지정된 너비와 높이로 축소하고 캔버스에 그립니다.

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

        1. <스크립트 유형="텍스트/자바스크립트">
        2. //캔버스 객체 가져오기(캔버스)
        3. var canvas = document.getElementById("myCanvas");
        4. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
        5. if(canvas.getContext){ 
        6. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
        7. var ctx = canvas.getContext("2d")
         
        9. //새 이미지 객체 생성
        10. var img = new 이미지()
        11. //이미지 URL 지정
        img.src =
        12. "http://www.365mini.com/image/google_logo.png"
        13. //이미지를 로드한 후 브라우저가 이미지를 그립니다.
        img.onload =
        14. 함수(){
        15. //캔버스 캔버스의 좌표(10,10)를 시작점으로 이미지를 그린다
        16. //이미지의 너비와 높이는 각각 350px과 100px로 조정됩니다.
        ctx.drawImage(img, 10, 10, 350, 100);
        17. };
        18. }
        Google 로고 이미지의 크기를 조정하면 이제 캔버스에서 전체 이미지를 볼 수 있습니다.

        마지막으로 세 번째 방법 변형을 사용하여 Google 로고의 'Goo' 부분을 캔버스에 그립니다('Goo' 부분의 이미지 크기는 Photoshop과 같은 도구를 사용하여 측정할 수 있으며 측정된 크기가 사용됨). 바로 여기 결과).
        

        JavaScript 코드

        클립보드에 콘텐츠 복사

        1. <스크립트 유형="텍스트/자바스크립트">
        2. //캔버스 객체 가져오기(캔버스)
        3. var canvas = document.getElementById("myCanvas");
        4. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
        5. if(canvas.getContext){ 
        6. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
        7. var ctx = canvas.getContext("2d")
         
        9. //새 이미지 객체 생성
        10. var img = new 이미지()
        11. //이미지 URL 지정
        img.src =
        12. "http://www.365mini.com/image/google_logo.png"
        13. //이미지를 로드한 후 브라우저가 이미지를 그립니다.
        img.onload =
        14. 함수(){
         
        15. /*
        16. * 이미지 왼쪽의 "Goo" 부분(즉, 이미지의 왼쪽 상단 좌표가 (0,0)인 부분, 너비 332px로 이동) , 높이는 190px)
        17. * 캔버스에 왼쪽 상단 좌표(10,10), 너비 332px, 높이 190px의 직사각형 영역을 그립니다.
        18. *
        19. * 캔버스 그리기 이미지의 대상 영역의 너비와 높이는 이미지의 캡처된 부분의 크기와 일치합니다,
        20. *는 확대/축소를 수행하지 않고, 이미지의 일부가 원본 크기로 캡처됨을 의미합니다.
        21. */ 
        ctx.drawImage(img, 0, 0, 332, 190, 10, 10, 332, 190);
        22. };
        23. }
        이 시점에서 캔버스에 표시된 "Goo" 부분 이미지를 볼 수 있습니다.