지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5 Canvas 기본 드로잉 예제 코드_html5 튜토리얼 기술 모음

HTML5 Canvas 기본 드로잉 예제 코드_html5 튜토리얼 기술 모음

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

기본 드로잉

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas')
  2. if (canvas.getContext) {
  3. var context = canvas.getContext('2d')
  4. // 선 너비
  5. context.lineWidth = 4;
    6. // 브러시 색상
  7. context.StrokeStyle = '빨간색'
    8. // 채우기 색상
  9. context.fillStyle = "빨간색"
    10. // 줄바꿈 유형
    11.  
  11. context.lineCap = '엉덩이' // 원형, 정사각형
    12. // 시작 경로
    13. context.beginPath()
    14. //시작점
    15. context.moveTo(10,10)
    16. // 끝점
    17. context.lineTo(150,50)
    18. // 그리기
    19. context.Stroke()
    20. ｝
 

직사각형

XML/HTML 코드
클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas')
    2. if (canvas.getContext) {
    3. context.beginPath()
    4. context.StrokeRect(10,10,70,40)
    5. // 직사각형의 또 다른 방법
    6. context.ract(10,10.70,40)
    7. context.Stroke()
    8.  
    9. // 단색 직사각형
    10. context.beginPath()
    11. context.fillRect(10,10,70,40)
    12. // 또 다른 방법은 실선 직사각형
    13. context.beginPath()
    14. context.ract(10,10,70,40)
    15. context.fill()
    16. ｝
 

라운드

XML/HTML 코드
클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas')
  2. if (canvas.getContext) {
  3. context.beginPath()
  4. // 원 중심 좌표 x, 원 중심 좌표 Y, 호 반경, 시작 각도, 끝 각도, 반시계 방향 여부
  5. // 네 번째와 다섯 번째 매개변수는 전달되는 라디안입니다. 30도의 각도를 그리면 라디안으로 변환해야 합니다. 30 * Math.PI / 180
  6. context.arc(100,100,70,0,130 * Math.PI / 180, true)
  7. context.Stroke()
  8. context.fill()
  9. ｝

 
둥근 모서리

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas')
  2. if (canvas.getContext) {
  3. context.beginPath()
  4. context.moveTo(20,20)
  5. context.lineTo(70,20)
  6. // 경로에 대한 호 p1.x p1.y p2.x, p2.y 호 반경 그리기
  7. context.arcTo(120,30,120,70, 50)
  8. context.lineTo(120,120)
  9. context.Stroke()
  10.  
  11. // 캔버스 아트보드 지우기
  12. context.beginPath()
  13. context.fillRect(10,10,200,100)
  14.  
  15. // 영역 지우기
  16. context.clearRect(30,30,50,50)
  17. ｝

2차 베지어 곡선

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas')
  2. if (canvas.getContext) {
  3. context.beginPath()
  4. context.moveTo(100,100)
  5. context.quadraticCurveTo(20,50,200,20)
  6. context.Stroke()
  7. ｝


3차 베지어 곡선

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var 캔버스 = 문서.getElementById('canvas');   
  2. if (canvas.getContext) {   
  3.      context.moveTo(68,130);   
  4.      var cX1 = 20;   
  5.      var cY1 = 10;   
  6.      var cX2 = 268;   
  7.      var cY2 = 10;   
  8.      var endX = 268;   
  9.      var endY = 170;   
  10.      context.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);   
  11.      context.Stroke();   
  12.         
  13.     // 利用clip指定绘图区域，指定绘图区域之后，只能在绘图区域中进行绘图擦欧总   
  14.     // 전통제형   
  15.     context.arc(100,100,40,0, 360 * Math.PI/ 180 , true);   
  16.     // 제조공장   
  17.     context.clip();   
  18.     // 开始尝试绘其他   
  19.     context.beginPath();   
  20.     context.fillStyle = 'lightblue';   
  21.     // 结果矩형태의并没有显示出来   
  22.     context.fillRect(0,0,300,150);   
  23. }  

画板进阶使사용

XML/HTML 코드复复内容到剪贴板
  1. var 캔버스 = 문서.getElementById('canvas')
  2. if (canvas.getContext) {
  3. var context = canvas.getContext('2d')
  4. /*
  5. * drawImage(image,dx,dy)
  6. * drawImage(image,dx,dy,dw,dh)
  7. * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
  8. * 이미지 그리기 개체
  9. * dx dy 캔버스 좌표
  10. * dw, dh는 그릴 캔버스 내 이미지의 위치를 ​​나타냅니다
  11. * sw, sh는 그려지는 이미지의 영역을 나타냅니다
  12. * sx,sy 그릴 그림의 시작 위치
  13. */
  14. var 이미지 = 문서.getElementById('img')
  15. context.drawImage(이미지, 0, 0)
  16. var img = 새 이미지()
  17.  img.src = 'images/1.jpg'; 
  18. img.onload = 함수(){
    19.                                        
  19. // 이미지 그리기
  20. // 0,0 좌표부터 그리기 시작
  21. // context.drawImage(img,0,0)
  22. // 0, 0부터 시작해서 전체 그림을 가로, 세로 100,100으로 그린다
  23. // context.drawImage(img, 0, 0, 100, 100)
  24. // 스크린샷, 50,50부터 100,100까지 260,130부터 그려서 길이와 너비가 100,100인 영역에 배치합니다.
    25. // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100)
    26.                                         
  26. // getImageData 및 putImageData를 사용하여 그림 그리기
  28. context.drawImage(img, 10, 10)
  29. // 아트보드에서 픽셀 데이터 가져오기
  30. // 시작 위치, 끝 위치
  31. var
    32. imgData
  32. =
    33. context
  33. .getImageData(50,50,100,100)
  34. // 드로잉보드의 지정된 위치 좌표에 데이터를 그립니다.
  35. context.putImageData(imgData,10,260)
  36. // 픽셀 데이터의 일부를 작업판에 그립니다.
  37. context.putImageData(imgData,200,260,50,50,100,100)
  38.                                         
    39. // createImageData 픽셀 생성
    40. var
  40. imgData = context.getImageData(50,50,200,200)
    41. // 지정된 크기의 빈 객체 생성
    42. var
  42. imgData01 = context.createImageData(imgData)
    43.                                              
  43. for (
    44. i
  44. = 0; i < imgData01.width * imgData01.height * 4; i =4) { // 빨간색 픽셀
  45. imgData01.data[i 0] = 255
  46. imgData01.data[i 1] = 0
  47. imgData01.data[i 2] = 0
  48. imgData01.data[i 3] = 255
  49.                                          
    50.                                                              
  50. context.putImageData(imgData01, 10, 260)
  51. }  
  52. }
관련 라벨：
canvas html5 绘图
원천：php.cn
이전 기사：HTML5 로컬 저장 기술에 대해 이야기_html5 튜토리얼 기술 다음 기사：HTML5_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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿