原创 canvas筆記-擴展canvas的context及畫橢圓及瀏覽器兼容問題
首先是擴展canvas的context 比如擴展一個畫五角星的代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<
2020-06-03 16:38:20
原创 canvas筆記-globalAlpha和globaleCompositeOperation的使用
如下代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <can
2020-06-03 16:38:20
原创 canvas筆記-非零環繞原則及剪紙實例
首先提下非零環繞原則，如下圖： 這裏如上面的圖，這個非零環繞和畫圖的方向有關！ 如+1要染色的地方，在這裏找一個點射向外邊，如果相交的地方畫圖方向和射線方向一樣就是+1，要染色。 +2那個地方，也是那樣。 0爲不染色，因爲一個+1一個-
2020-06-03 16:38:20
原创 canvas筆記-文本水平垂直對齊與度量
在canvas中通過textAlign可以設置文本的對齊： 其中left爲左對齊，center爲居中對齊，right爲右對齊。 程序運行截圖如下： 源碼如下： <!DOCTYPE html> <html lang="en"> <hea
2020-06-02 14:14:36
原创 canvas筆記-arcTo的使用及繪製彎月
首先介紹下這個函數 context.arcTo(x1, y1, x2, y2, r); 其中x1爲弧的起點x座標； 其中y1爲弧的起點y座標； 其中x2爲弧的終點x座標； 其中y2爲弧的終點y座標； 其中r爲弧的半徑。 程序運行截圖如
2020-06-02 14:14:35
原创 canvas筆記-使用arc與lineTo畫圓角矩形及繪製2048棋盤
首先是使用arc圓所對應的參數爲（默認爲順時針）： 這裏話矩形的話，對應的圓心頂點座標爲： 程序運行截圖如下： 源碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta cha
2020-06-02 14:14:35
原创 canvas筆記-二次貝塞爾曲線與三次貝塞爾曲線的用法
此博文不研究其算法，只記錄下其用法。 首先是二次貝塞爾曲線！ 函數是這樣的 quadraticCurveTo(cpx, cpy, x, y); 其中cpx爲貝塞爾控制點x； 其中cpy爲貝塞爾控制點y； 其中x爲結束點x座標； 其中y
2020-06-02 14:14:35
原创 canvas筆記-文字渲染
字體以及填充文字 程序運行截圖如下： 源碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
2020-06-02 14:14:35
原创 canvas筆記-使用canvas畫矩形及各樣式（透明）
程序運行截圖如下： 源碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <
2020-06-01 12:18:52
原创 canvas筆記-線性漸變與非線性漸變
首先來看下線性漸變 //第一步 let grd = context.createLinearGradient(xstart, ystart, xend, yend); //第二步 Grd.addColorStop(stop, col
2020-06-01 12:18:52
原创 canvas筆記-畫一片星空
程序運行截圖如下： 源碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <
2020-06-01 12:18:52
原创 canvas筆記-圖形變換(位移translate、縮放scale、變換矩陣transform)
這裏首先演示下位移，這裏使用的函數是translate(x, y)這個函數是疊加的，也就是說，當translate(100, 100)，後再次調用translate(200, 200)，那麼最後圓點的基準值就爲translate(300,
2020-06-01 12:18:52
1
原创 canvas筆記-closePath函數的使用（含例子）
如下代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canv
2020-06-01 12:18:52
原创 canvas筆記-畫一個五角星（含算法）
算法如下： 上面的圖是正三角形： 說下算法，關於上面那些x，y是怎麼算出來的。 這裏大圓的5個頂點，每個頂點佔用的角度爲360/5 = 72度，左邊那個18度是通過90 - 72 = 18度。 大圓半徑爲R，所以 x爲cos(18度)
2020-06-01 12:18:52
原创 canvas筆記-設置底紋(createPattern相關)
createPattern(img, repeat-style) 函數中第二個參數可以填寫4個值，分別爲： repeat-style: no-repeat、repeat-x、repeat-y、repeat 如下模板代碼 <!DOCT
2020-06-01 12:18:52