1. 程式人生 > >HTML5_canvas(設定畫筆樣式、左右跑動的小塊、繪製路徑的方法、寫字板、繪製圓形的方法、吃豆豆、繪製文字、環形進度條)設定一個模板

HTML5_canvas(設定畫筆樣式、左右跑動的小塊、繪製路徑的方法、寫字板、繪製圓形的方法、吃豆豆、繪製文字、環形進度條)設定一個模板

1、canvas(相當於畫圖板)
這裡寫圖片描述

這句話是必須寫的 在版本高的瀏覽器中支援就不會顯示出來,版本低的就會顯示出
這裡寫圖片描述

—->寬高樣式直接在裡面寫;(預設寬度300,高度150)

這裡寫圖片描述

 設定畫筆樣式

這裡寫圖片描述
這裡寫圖片描述

——>畫出一個實心小方塊(x軸 ,y軸,寬度,高度)

這裡寫圖片描述
這裡寫圖片描述
—–>邊框線條寬度(寬度是從中間開始分的)
這裡寫圖片描述

這裡寫圖片描述
—->畫出一個空心有邊框的小方塊
這裡寫圖片描述
這裡寫圖片描述

—–>空心小塊邊框的顏色
這裡寫圖片描述

—–>實塊的背景顏色(預設是黑色)

這裡寫圖片描述
(opacity)
這裡寫圖片描述

—–>清除畫板(從0,0位置開始)

 左右跑動的小塊

這裡寫圖片描述
這裡寫圖片描述
這裡寫圖片描述

——->必須先清除之前的小塊
方法一:
這裡寫圖片描述

方法二:

這裡寫圖片描述

 繪製路徑的方法

這裡寫圖片描述
—–>(開始路徑是必須寫的)
這裡寫圖片描述

——->畫筆的起點

這裡寫圖片描述
—–>線條經過的地點

這裡寫圖片描述
——>線條開始執行

這裡寫圖片描述
—–>
(閉合的可以不用,如果用的話結束的時候自動閉合成一個封閉區域)
這裡寫圖片描述

—–>(未加)
這裡寫圖片描述
——(新增)
——->
這裡寫圖片描述

這裡寫圖片描述
——->填充

 設定一個模板
這裡寫圖片描述
這裡寫圖片描述

 寫字板

這裡寫程式碼片

這裡寫圖片描述

 繪製圓形的方法

這裡寫圖片描述
這裡寫圖片描述

這裡寫程式碼片

 吃豆豆(建立路徑)
閉嘴的:
這裡寫圖片描述

——>
這裡寫圖片描述
張開嘴巴的:

這裡寫圖片描述
——>
這裡寫圖片描述
兩個來回切換的效果:

這裡寫圖片描述
——>先執行一次open();

 繪製文字
這裡寫圖片描述

—–>設定字型大小和字型
這裡寫圖片描述

這裡寫圖片描述
——>輸入文字的寬度

這裡寫圖片描述

這裡寫圖片描述
—–>

這裡寫圖片描述
這裡寫圖片描述
—–>
這裡寫圖片描述

 環形進度條
這裡寫圖片描述

——->
這裡寫圖片描述
加上顏色後:
這裡寫圖片描述

——>
這裡寫圖片描述
加上文字後:

這裡寫圖片描述
——>
這裡寫圖片描述

關於善知教育(官網:善知教育(點選進入) 微信公眾號:善知技術)
地址:北京東燕郊經濟技術開發區文化大廈
諮詢老師鄭老師 電話/微信:13315631002 QQ:1939441377
目前我們開設Java伺服器Html5前端網頁Android移動端PHP伺服器,有全日制班有周末班;
學費優惠至8480!!!!
我們的優勢:

  • 基礎課程一個月免費學,全程面授;
  • 平均就業薪資10000-15000;
  • 免費重聽,跨學科免費學習;
  • 5-5.5個月大容量技術授課;
  • 0學費0基礎入學,海量專案實訓, 彈性教學制度;
  • 大部分學生找到月薪10k以上薪資工作, 專案實訓自然終止;
  • 課程全程視訊錄製,偶爾耽擱也不擔心;
  • 學習途中隨時可以無理由退費根據學生情況;
  • 靈活安排授課時間,一個科目學不會可以免費學習另一個科目;
  • 全日制班,週末班,網上授課同時進行;
  • 技術交流QQ群:198983438(加群請備註在哪裡看到我們的群)在群裡面隨時會更新一些我們的課程視訊以及開班動態

善知教育學習視訊大彙總