1. canvas Chinese tutorial https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
2. The default width and height of canvas are 300 and 150. To avoid exceptions, it is best to use display attributes to add them. Add width and height without using css
3. Add instructions for browsers that do not support canvas tag inside the canvas tag
4. You can also determine whether the browser supports canvas through the following js code
var canvas = document.getElementById('tutorial ');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
5. Canvas only supports the drawing of one basic shape, that is, rectangle, but other graphics can be drawn through canvas path
6. Draw rectangle There are four functions: rect, fillRect, strokeRect and clearRect
7. beginPath is used to start a new path layer. If not added, it means drawing on the original path layer. The effect of the following two pieces of code is Completely different, the first code shows two red lines, the second code shows one black line and one red line
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo (100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx .moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
8. 경로를 닫을 필요가 없으면 closePath를 사용할 필요가 없습니다. fill을 사용하면 경로가 자동으로 닫힙니다.
9. 인내심이 충분하다면 Searle 곡선을 사용하여 어떤 그래픽도 그릴 수 있습니다.
10. Firefox에서는 2차 곡선에 버그가 있어서 3차 곡선이 사용됩니다. 2차 곡선 대신 사용할 수 있습니다
11. 이미지(예: PNG, GIF, JPEG 등)를 캔버스에 도입할 수 있으며 다른 캔버스 요소도 이미지 소스로 사용할 수 있습니다
12. 다음은 기본 캔버스 이미지 그리기 코드입니다. 여기서 image는 이미지 또는 캔버스 개체이고, x와 y는 대상 캔버스의 시작 좌표입니다.
drawImage(image, x, y)
다음 코드는 이미지 크기 조정을 나타내고, 너비와 높이는 확대된 크기를 나타냅니다.
drawImage(image, x , y, width, height)
다음 코드는 이미지 자르기를 나타냅니다. 다른 것과 마찬가지로 둘 다 이미지나 다른 캔버스에 대한 참조입니다. 나머지 8개의 매개변수는 각각 그림에서 자르기 시작 x 좌표, 그림에서 자르기 시작 y 좌표, 자르기 영역의 너비, 자르기 영역의 높이, 그려진 위치의 x 좌표, y를 나타냅니다. 그려지는 위치의 좌표와 그려지는 그래픽의 너비는 그려지는 그래픽의 크기와 다를 수 있습니다. 그려진 그림
drawImage(image, sx, sy, sWidth, sHeight, dx , dy, dWidth, dHeight)
13. 스트로크 스타일은 그래픽 윤곽선의 색상을 설정하는 데 사용되며, 채우기 스타일은 사용됩니다. 채우기 색상을 설정합니다. color는 CSS 색상 값을 나타내는 문자열, 그라데이션 객체 또는 패턴 객체일 수 있습니다. 기본적으로 선 및 채우기 색상은 검은색입니다(CSS 색상 값 #000000).
14. 이미지 투명도는 globalAlpha = 투명도 값 또는 rgba 색상 값으로 표현할 수 있습니다
15. lineWidth 속성은 1px 선 너비를 해결하기 위해 설정합니다. 버그 문제 0.5 사용 해결 방법
16. lineCap 속성의 가장 왼쪽 줄은 기본 버튼을 사용합니다. 안내선과 같은 높이인지 확인하세요. 가운데는 선 너비의 절반 반경이 끝점에 추가된 반원이 있는 둥근 효과입니다. 오른쪽은 너비가 같고 선 너비의 절반이 끝점에 추가된 사각형의 효과입니다.
17. LineJoin 속성 여기서도 예로 세 개의 폴리라인을 사용하고 다른 lineJoin을 설정했습니다. 각각의 가치. 맨 위는 둥근 효과이고 모서리는 둥글며 원의 반경은 선 너비와 같습니다. 가운데 선과 아래쪽 선은 각각 경사와 마이터의 효과입니다. 값이 마이터인 경우 선분은 한 지점에서 교차할 때까지 연결 외부로 확장됩니다.
18 아래에 소개되는 miterLimit 속성에 의해 확장 효과가 제한됩니다. 캔버스 상태를 저장하고 복원합니다. 모두 매개변수가 없습니다. Canvas의 상태는 현재 화면에 적용된 모든 스타일과 변환의 스냅샷입니다. 캔버스 상태는 스택에 저장됩니다. save 메서드가 호출될 때마다 현재 상태가 스택에 푸시되어 저장됩니다. 복원 메서드가 호출될 때마다 마지막으로 저장된 상태가 힙에서 팝되고 모든 설정이 복원됩니다.
19. 변환(1, 0, 0, 1, 0, 0) 매개변수는 각각 수평 스케일링, 수평 회전(시계 방향), 수직 회전(반시계 방향), 수직 스케일링, 수평 방향 오프셋, 수직 오프셋을 나타냅니다.
setTransform(1, 0, 0, 1, 0, 0)은 이전 변환 행렬을 재설정한 다음 새 행렬을 구성하는 것을 의미합니다. 매개 변수 함수는 위와 동일합니다.
rotate(angle), (반경) 는 1라디안, 2πr/r=라디안, 즉 360=2π, 즉 1=π/180)
20. 애니메이션은 실제로 드로잉 보드(clearRect())를 지속적으로 지우는 것입니다. ) 그런 다음 다시 그립니다.
