HTML應用開發基礎篇 Canvas動畫(鐘錶)

2021-09-27 09:01:43 字數 565 閱讀 6504

前面做過了小球的無規則運動,算是已經開始接觸了 canvas 動畫的一些語法,這裡再說幾個其他經常用到的,順便做乙個動態的鐘錶。

做鐘錶是通過旋轉畫布來實現的,這裡用到這幾個方法:scale() 、 translate() 和 rotate() 。rotate() 是用來旋轉當前的繪圖角度,translate() 則是移動設定畫布上的(0,0)位置,如果預設不改則就是左上角處,scale() 則是用來縮放,這裡僅提一下,但用不到縮放。至於這幾個方法的詳細講解想知道的見 w3school 手冊 :w3school 手冊 。

在正式做鐘錶前,先來熟悉下旋轉畫布的使用,畫乙個簡單的圖形:

有關內容我已經在上面**中注釋了一下,那麼下面我們來做乙個可動的鐘錶:

效果圖:

這樣乙個常見的鐘錶就做好了,當然我這個並沒有加 css 等樣式去進一步美化,感興趣的讀者私下去調整吧。

HTML(基礎篇)介紹

html 基礎篇 1 html基本介紹 html 超文字標記語言 hypertext mark up language 超 超連結,標記 標籤.html不是一種程式語言而是一種標記語言,通過使用標籤來描述網頁.2 html格式 html編輯工具 基本文字編輯軟體 如記事本 editplus等。所見即...

HTML5基礎篇之HTML

本文章純屬個人學習之後總結的一些小經驗,望大神指導指導 一 html基本結構 注 html大小寫都可以 但是不要出現這種的 html 要麼全都大寫 要麼全都小寫 所有的標點符號都必須是英文狀態下的!切記!doctype 宣告文件型別 千萬不可以忘記 meta charset utf 8 防止出現亂碼...

WEB前端 html基礎篇

1 html概述 1 什麼是html web頁或web應用,就是網際網路上的乙個網頁程式,通常以 html或.htm作為字尾的檔案 web頁是由html編寫而成 html hyper text markup language 超文字標記語言 a 26個字元中的首字元 超文字a 超連結的功能 b 26...