Recommended resources for Canvas drawing and animation videos with dazzling countdown effects

Canvas, as the name suggests, is a canvas defined on the browser, but Canvas is not just an element, it is a set of programming interfaces. Its emergence has exceeded the original intention of the Web's document-based design. You can use it to develop a lot of dream content, allowing programmers to completely unleash their creativity!

Course playback address: http://www.php.cn/course/303.html

The Teacher's teaching style:

The teacher's lectures are simple and in-depth, clear in structure, analyzed layer by layer, interlocking, rigorous in argumentation, and rigorous in structure. He uses the logical power of thinking to attract students' attention and controls the classroom with reason. teaching process. By listening to the teacher's lectures, students not only learn knowledge, but also receive thinking training, and are also influenced and infected by the teacher's rigorous academic attitude

The more difficult part in this video is the countdown effect Canvas drawing and animation Now:

#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;

Practice: Draw a straight line (be very careful, the state must be set first before calling the stroke() method to draw. If the order is reversed, there will be no result, no error will be reported, and the debugger will not be able to solve the 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();

Define a path:

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

Define multiple paths: Use the following method to wrap the state to be defined, and then call the stroke() method to draw lines in different states

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

Drawing of the tangram: Picture 1 was drawn by the teacher, and Picture 2 was drawn by me. . Hahahaha, so rough. In the next lesson, we will learn to draw circles and arcs. After learning the canvas system, we will try to use the collision technology of js to move the jigsaw puzzle and splice it into different graphics

The above is the detailed content of Recommended resources for Canvas drawing and animation videos with dazzling countdown effects. For more information, please follow other related articles on the PHP Chinese website!