눈부신 카운트다운 효과가 포함된 캔버스 드로잉 및 애니메이션 동영상에 대한 권장 리소스

캔버스는 이름에서 알 수 있듯이 브라우저에 정의된 캔버스이지만, 캔버스는 단순한 요소가 아니라 프로그래밍 인터페이스 집합입니다. 웹의 원래 문서 기반 디자인 의도를 뛰어넘었습니다. 이를 사용하여 많은 꿈의 콘텐츠를 개발할 수 있으므로 프로그래머가 창의력을 완전히 발휘할 수 있습니다!

강좌 재생 주소: //m.sbmmt.com/course/303.html

선생님의 강의 스타일:

선생님의 강의는 간단하고 심층적이며 구조가 명확합니다. , 그리고 층별로 분석합니다. 상호 연결되고 엄격한 논증, 엄격한 구조를 사용하여 논리적 사고력을 사용하여 학생들의 관심을 끌고 이성을 사용하여 교실 교육 과정을 제어합니다. 선생님의 강의를 들으면서 학생들은 지식을 배울 뿐만 아니라 사고력 훈련도 받고, 선생님의 엄격한 학업 태도에 영향을 받고 영향을 받습니다

이 영상에서 더 어려운 부분은 카운트다운 효과입니다. 캔버스 그리기 및 애니메이션:

HTML:

<canvas id="canvas" style="border:1px solid red;"></canvas>

JS:

var canvas = document.getElementById('canvas');　
var context = canvas.getContext('2d');

// 注意，是不加单位的，而且不建议在css中设置宽高。最好是调用width和height这两个属性
canvas.width = 1024;
canvas.height = 768;

연습: 직선을 그립니다. (매우 주의하세요. 그리기 위해 스트로크() 메서드를 호출하기 전에 상태를 먼저 설정해야 합니다. 순서가 바뀌면 결과가 생성되지 않으며 오류가 보고되지 않으며 디버거가 문제를 해결할 수 없습니다.)

// 先设置状态
    context.moveTo(100, 100);
    context.lineTo(700, 700);
    context.lineTo(700, 100);
    context.lineTo(100, 100);
    context.lineWidth = 10;
    context.strokeStyle = "pink";
// 再进项绘制
    context.stroke();

경로 정의:

context.moveTo(100, 100);  //接受两个参数，表示x坐标和y坐标
context.lineTo(700, 700);

여러 경로 정의: 정의할 상태를 다음 방법으로 래핑합니다. 그런 다음 스트로크() 메서드를 호출하여 다양한 상태를 그립니다.

context.beginPath();
context.closePath();

의 선 탱그램 그리기: 그림 1은 선생님이 그린 것이고, 그림 2는 제가 그린 것입니다. . 하하하하, 너무 거칠다. 다음 수업에서는 원과 호를 그리는 방법을 배워보겠습니다. 캔버스 시스템을 배운 후, js의 충돌 기술을 사용하여 직소 퍼즐을 움직여서 다른 그래픽으로 연결해 보겠습니다

위 내용은 눈부신 카운트다운 효과가 포함된 캔버스 드로잉 및 애니메이션 동영상에 대한 권장 리소스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!