炫麗的倒數效果Canvas繪圖與動畫影片的資源推薦

Canvas顧名思義是定義在瀏覽器上畫布，但Canvas不僅僅是一個元素，它更是一套程式設計的接口，它的出現已然超過了Web基於文件的設計初衷。利用它你可以發展出許多夢寐以求的內容，讓程式設計工作者徹底釋放自己的創造力！

課程播放網址：http://www.php.cn/course/303.html

該老師講課風格:

教師講課深入淺出，條理清楚，層層剖析，環環相扣，論證嚴密，結構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。學生透過聆聽教師的講授，不僅學到知識，也受到思考的訓練，也受到教師嚴謹的治學態度的薰陶與感染

本影片中較為難點是倒數計時效果Canvas繪圖與動畫了：

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

#　實踐：繪製直線（要非常注意，狀態一定要先設定才能調stroke()方法進行繪製，如果順序顛倒，將不會出結果，而且不報錯，debugger也調不出問題來。）

// 先设置状态
    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);

　　定義多個路徑：用以下方法將要定義的狀態包裹住，再呼叫stroke()方法，既可繪製不同狀態的線條

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

　　七巧板的繪製：圖1為老師繪製，圖2我繪製。 。哈哈哈哈，可真粗糙。下節課學習繪製圓和弧線，把canvas系統學習下來後就去嘗試使用js的碰撞技術做一下七巧板的移動拼接成不同的圖形

以上是炫麗的倒數效果Canvas繪圖與動畫影片的資源推薦的詳細內容。更多資訊請關注PHP中文網其他相關文章！