Empfohlene Ressourcen für Canvas-Zeichnungen und Animationsvideos mit umwerfenden Countdown-Effekten

Canvas ist, wie der Name schon sagt, eine im Browser definierte Leinwand, aber Canvas ist nicht nur ein Element, sondern eine Reihe von Programmierschnittstellen. Seine Entstehung hat die ursprüngliche dokumentbasierte Designabsicht des Webs übertroffen. Sie können damit viele Trauminhalte entwickeln und Programmierern so die Möglichkeit geben, ihrer Kreativität freien Lauf zu lassen!

Adresse für die Kurswiedergabe: //m.sbmmt.com/course/303.html

Die Der Unterrichtsstil des Lehrers:

Die Vorträge des Lehrers sind einfach und tiefgründig, klar in der Struktur, schichtweise analysiert, ineinandergreifend, streng in der Argumentation und streng in der Struktur. Er nutzt die logische Kraft des Denkens um die Aufmerksamkeit der Schüler zu erregen und den Unterrichtsprozess vernünftig zu steuern. Durch das Anhören der Vorlesungen des Lehrers lernen die Schüler nicht nur Wissen, sondern erhalten auch eine Denkschulung und werden auch von der strengen akademischen Haltung des Lehrers beeinflusst und beeinflusst

Der schwierigere Teil in diesem Video ist der Countdown-Effekt Leinwandzeichnung und Animation 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;

Übung: Zeichnen Sie eine gerade Linie (seien Sie sehr vorsichtig, der Status muss zuerst festgelegt werden, bevor die Methode Stroke() zum Zeichnen aufgerufen wird. Wenn die Reihenfolge umgekehrt ist, dort Es wird kein Ergebnis angezeigt, und es wird kein Fehler gemeldet, und der Debugger passt sich auch an. Kein Problem.)

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

Definieren Sie einen Pfad:

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

Definieren Sie mehrere Pfade: Wrap the Definieren Sie den Zustand mit der folgenden Methode und rufen Sie dann die Methode Stroke() auf. Sie können Linien in verschiedenen Zuständen zeichnen.

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

Tangram-Zeichnung: Abbildung 1 wird vom Lehrer gezeichnet, Abbildung 2 wird gezeichnet von mir. . Hahahaha, so hart. In der nächsten Lektion werde ich lernen, Kreise und Bögen zu zeichnen. Nachdem ich das Canvas-System erlernt habe, werde ich versuchen, die Kollisionstechnologie von js zu verwenden, um das Puzzle zu verschieben und es in verschiedene Grafiken zu integrieren

Das obige ist der detaillierte Inhalt vonEmpfohlene Ressourcen für Canvas-Zeichnungen und Animationsvideos mit umwerfenden Countdown-Effekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!