canvas初體驗之基本線條

2022-08-29 17:48:10 字數 1507 閱讀 6978

有的時候我們開啟一些**,可以看到背景是閃爍的星空或者是有一些可以與滑鼠互動的線條等等,此酷炫的效果就是用到了html5的canvas效果。

首先來認識一下h5新增的標籤的寫法,簡單的可以將其理解為乙個畫布,我們就是在這個畫布上畫出我們所要實現的靜態的或者動態圖案效果。

首先來學習靜態demo:

1、先建立乙個畫布:

有些瀏覽器還不能支援標籤的,如果你的瀏覽器看到了裡面的文字說明她還不支援,你可以公升級啦

<

canvas

id="canvas_demo"

width

="200"

height

="200">

你的瀏覽器部支援canvas

canvas

>

如下圖我們建立了乙個畫布,座標乙個x軸,乙個y軸。原點在左上角。這點認識比較關鍵!importent

2、下面開始準備畫畫啦

2.1、基本圖形

var canvas_demo = document.getelementbyid('

canvas_demo');

//判斷瀏覽器是否支援canvas

if(canvas_demo.getcontext)

else

從上面的例子中,我們簡單的畫出一些矩形圖案。包括填充,邊框,清除圖畫的常見方法。以後會慢慢多學習其他的線條,曲線等等稍微複雜的。

既然是畫圖,那麼我們必須搞清楚圖畫的座標,起點,終點等關鍵資訊,在以後的例子中會逐漸認識到他們的正確性。

矩形是乙個方正的圖案,只需要給出座標和尺寸,我們就可以繪製出來,但是一般我們需要繪製的可能是比較複雜的圖案,這個時候,我們會採用path方法繪製。從名稱上很容易理解「path」即路徑:我們先用path繪製出我們

需要的圖形,再進行填充或者描邊。總之,path就像畫家手中的筆一樣,可以繪製更多種類的圖案。

2.2、path

採用path繪圖的步驟非常容易理解:

相應**如下:

var canvas_path = document.getelementbyid('

canvas_2d_path');

if(canvas_path.getcontext)

畫正常圓形的起點在下面所示的b點,逆時針繞一圈後終點也是在b點。如果不是規整的圓,可以以此推算起點和終點所在座標。

紅色的線即是終點和起點之間連線。

以上,矩形和圓形的簡單介紹。有興趣的可以繼續**多種曲線。

下一步可以準備畫動態的圖案啦啦~~

scrapy之爬蟲初體驗

本篇文章主要將怎樣建立乙個scrapy專案,以及完成第乙個scrapy爬蟲專案。首先是安裝scrapy模組,有很多原因都能導致scrapy模組安裝失敗,網上有很多教程讓怎樣安裝scrapy。親測比較有效的方法使用whl檔案安裝。不過有小夥伴也可以嘗試直接使用pip install scrapy命令進...

jfinal初體驗之Controller學習(一)

1.儲備知識 jfinal框架採用了傳統的mvc架構設計,來不及解釋了,快上車。jfinal的controller是執行緒安全的,所謂的執行緒安全就是在多執行緒訪問時,採用了加鎖機制來保護資料。這樣的做的好處是不會出現髒資料。2.開始旅程 controller中,最好保證它的純潔性,不要寫複雜的的業...

eosio之nodeos初體驗

1.什麼是eosio智慧型合約。2.eos相關概念 eos 軟體 eos平台 eos代幣 eos幣eos社群之間的關係 nodeos node eos nodeos 核心eosio的node守護程序,主要應用場景有 區塊產生,專用api終端,本地開發等。cleos cli eos cleos 與區塊...