지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5 canvas_html5 튜토리얼 기술을 사용하는 방법

HTML5 canvas_html5 튜토리얼 기술을 사용하는 방법

WBOY
풀어 주다： 2016-05-16 15:45:36
원래의
1952명이 탐색했습니다.

canvas 요소는 JavaScript를 사용하여 웹 페이지에 이미지를 그리며 그리기 기능은 없습니다.

캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다.

캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.

다음은 몇 가지 예입니다.

1. 캔버스를 채워주세요

JavaScript 코드클립보드에 콘텐츠 복사
  1. "myCanvas" width="200" height="100" style="border:1px solid red;">
  2. <스크립트 유형="텍스트/자바스크립트">
  3. var c=document.getElementById("myCanvas");
    4. var
  4. cxt=c.getContext("2d") cxt.fillStyle=
    5. "#ccc"
  5. cxt.fillRect(5,10,150,60)
    6. //x, y, x, y
    9. 다음과 같이 실행하세요.

2. 좌표 가져오기

JavaScript 코드

클립보드에 콘텐츠 복사
<스크립트 유형=
  1. "text/javascript">  함수
  2. cnvs_getCoordinates(e){ x=e.clientX
  3. y=e.clientY
  4. document.getElementById(
    5. "xycoordinates"
  5. ).innerHTML="좌표: (" x " y ")" }
    6. 함수
  6. cnvs_clearCoordinates(){ document.getElementById(
    7. "xycoordinates"
  7. ).innerHTML="";}
XML/HTML 코드
클립보드에 콘텐츠 복사
  1. <div id="coordiv" 스타일="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(이벤트)" onmouseout="cnvs_clearCoordinates()">div>
  2. <div id="xycoordinates" >div>

다음과 같이 실행하세요.

3. 선 및 그래픽 그리기

1) 다음과 같이 정사각형을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  2. 귀하의 브라우저는 캔버스 태그를 지원하지 않습니다.
  5. <스크립트 유형="텍스트/자바스크립트">
  7. var c=document.getElementById("myCanvas");
    8. var
  8. cxt=c.getContext("2d") cxt.moveTo(10,10)
    9. //x,y 시작점
  9. cxt.lineTo(10,50)
    10. //x,y
  10. cxt.lineTo(50,50)
    11. //x,y
  11. cxt.lineTo(50,10)
    12. //x,y
  12. cxt.lineTo(10,10)
    13. //x,y
  13. cxt.Stroke()
    17. 다음과 같이 실행

2) 다음과 같이 원을 그립니다.

JavaScript 코드

클립보드에 콘텐츠 복사
  1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  2. 귀하의 브라우저가 캔버스를 지원하지 않습니다
  5. <스크립트 유형="텍스트/자바스크립트">
  6. var c=document.getElementById("myCanvas");
    7. var
  7. cxt=c.getContext("2d") cxt.fillStyle=
    8. "#ccc"
  8. cxt.beginPath()
  9. cxt.arc(20,20,10,0,Math.PI*2,
    10. true
  10. ) cxt.closePath()
  11. cxt.fill()
    15. 다음과 같이 실행하세요.

4. 그라데이션 그리기

JavaScript 코드

클립보드에 콘텐츠 복사
  • "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
  • <스크립트 유형=
    • "텍스트/자바스크립트"
  • > var
    • c=document.getElementById(
  • "myCanvas"); var cxt=c.getContext(
    • "2d"
  • ) var grd=cxt.createLinearGradient(0,0,175,50)
  • grd.addColorStop(0,"#000000")
    • //Black
  • grd.addColorStop(1,"#FFFFFF")
    • //흰색
  • cxt.fillStyle=grd cxt.fillRect(5,10,175,50);
    • //x,y,x,y
    • 다음과 같이 실행하세요.
    • 5. 사진

    JavaScript 코드

    클립보드에 콘텐츠 복사

    1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
    2. 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
    5. <스크립트 유형="텍스트/자바스크립트">
    6. var c=document.getElementById("myCanvas");
      7. var
    7. cxt=c.getContext("2d")
      8. var
    8. img=new Image() img.src=
      9. "aa.png"
    9. cxt.drawImage(img,10,20)
      10. //x,y
      13. 실행은 다음과 같습니다.

    위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

    원문:

    http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html

    관련 라벨：
    canvas html5 캔버스
    원천：php.cn
    이전 기사：HTML5 CSS3 진행률 표시줄 카운트다운 애니메이션 특수 효과 코드 [권장]_html5 튜토리얼 기술 다음 기사：HTML5 Canvas的常用线条属性值总结_html5教程技巧
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
    에서 2024-04-06 15:33:12
    0
    1
    433
    PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
    에서 2024-04-05 12:57:00
    0
    1
    456
    HTML5에서 enctype과 formenctype의 차이점은 무엇입니까? HTMLLivingStandard(새 HTML5 사양이라고도 함)의 enctype 속성과 formenctype 속성의 차이점이 무엇인지 궁금합니다. 나는 개발자를...
    에서 2024-04-02 11:47:56
    0
    1
    275
    페이지를 모바일 친화적으로 만드시겠습니까? 나는 많은 웹 페이지와 일부 웹 사이트를 가지고 있습니다. 문제는 제가 초보자라는 것입니다. 저는 기본 html5와 css3을 사용하고 있지만 확장, 축소 및 모...
    에서 2024-04-01 20:42:38
    0
    1
    259
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿