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

기본 드로잉

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

1. var 캔버스 = 문서.getElementById('canvas')
2. if (canvas.getContext) {
3. var context = canvas.getContext('2d')
4. // 선 너비
5. context.lineWidth = 4;
// 브러시 색상
7. context.StrokeStyle = '빨간색'
// 채우기 색상
9. context.fillStyle = "빨간색"
// 줄바꿈 유형
 
11. context.lineCap = '엉덩이' // 원형, 정사각형
// 시작 경로
context.beginPath()
//시작점
context.moveTo(10,10)
// 끝점
context.lineTo(150,50)
// 그리기
context.Stroke()
｝

 

직사각형

XML/HTML 코드

클립보드에 콘텐츠 복사

1. var 캔버스 = 문서.getElementById('canvas')
if (canvas.getContext) {
context.beginPath()
context.StrokeRect(10,10,70,40)
// 직사각형의 또 다른 방법
context.ract(10,10.70,40)
context.Stroke()
 
// 단색 직사각형
context.beginPath()
context.fillRect(10,10,70,40)
// 또 다른 방법은 실선 직사각형
context.beginPath()
context.ract(10,10,70,40)
context.fill()
｝

 

라운드

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. // 이미지 그리기
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인 영역에 배치합니다.
// context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100)
                                        
26. // getImageData 및 putImageData를 사용하여 그림 그리기
28. context.drawImage(img, 10, 10)
29. // 아트보드에서 픽셀 데이터 가져오기
30. // 시작 위치, 끝 위치
31. var
imgData
32. =
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.                                         
// createImageData 픽셀 생성
var
40. imgData = context.getImageData(50,50,200,200)
// 지정된 크기의 빈 객체 생성
var
42. imgData01 = context.createImageData(imgData)
                                             
43. for (
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. context.putImageData(imgData01, 10, 260)
51. }  
52. }