H5新特性Canvas繪製二叉樹 原生js

1.css內容

*

html,body
.btn

"canvas"

>
canvas
>
class
="btn"
onclick
="draw()"
>
畫樹button
>

var canvas = document.

getelementbyid
('canvas');
var ctx = canvas.
getcontext
('2d');
var startx = window.innerwidth *
0.5;
var starty = window.innerheight;
function
init()
function
nextstep
(parentlength, linewidth, color, parentendx, parentendy, k, baseangle, angle)
var leftangle = angle + baseangle;
var rightangle = baseangle - angle;
//根據傳來的角度，算出左枝和右枝需要偏移的量
var ldisx = k * parentlength * math.
round
(math.
cos(leftangle/
180* math.pi)
*10)/
10;var ldisy = k * parentlength * math.
round
(math.
sin(leftangle/
180* math.pi)
*10)/
10;var rdisx = k * parentlength * math.
round
(math.
cos(rightangle/
180* math.pi)
*10)/
10;var rdisy = k * parentlength * math.
round
(math.
sin(rightangle/
180* math.pi)
*10)/
10;//算出左枝和右枝終點座標的值
var lxbough = parentendx + ldisx;
var lybough = parentendy - ldisy;
var rxbough = parentendx + rdisx;
var rybough = parentendy - rdisy;
//開始繪畫
ctx.
beginpath()
; ctx.
moveto
(parentendx,parentendy)
; ctx.
lineto
(lxbough, lybough)
; ctx.
moveto
(parentendx,parentendy)
; ctx.
lineto
(rxbough, rybough)
; ctx.
closepath()
;//當樹枝長度到一定值時，樹枝的顏色逐漸變淺
var rgb =
'#f'
+ color +
""+ color;
if(parentlength <20)
}else
ctx.linewidth = linewidth;
ctx.
stroke()
;//樹枝下個分支點的角度 值越大，傘蓋越大，常數為了防止樹枝分叉角度太小重疊
var newangle = math.
random()
*30+10
;//畫左枝和右枝
nextstep
(parentlength * k, linewidth*
0.6, color, lxbough, lybough, k, leftangle, newangle)
;nextstep
(parentlength * k, linewidth*
0.6, color, rxbough, rybough, k, rightangle, newangle);}
function
draw()
init()
;

h5新特性 canvas標籤（補充）

上下文物件 painter 1.透明度 語法 painter.globalalpha 0 1 任何操作都要在fill 之前 2.線性 1 設定線寬 painter.linewidth number 2 端點 painter.lincap 端點型別 型別 butt 無端點,round 圓弧端點 squ...

H5常用新特性

注意 這些新特性都有相容性的問題，基本是ie9 以上版本的瀏覽器才支援，如果不考相容性問題，可以大量使用這些新特性 html5新增的語義話標籤 html新增的多 標籤 屬性值描述 autoplay autoplay controls controls width pixels height pxlo...

H5新特性 本地儲存

注意 本地儲存呼叫者必須統一，用臨時儲存儲存的資料，只有臨時儲存才能找到 localstorage 永久儲存 相對 其中的資料不隨著瀏覽器的開關而改變 sessionstorage 臨時儲存 相對 當瀏覽器關閉 當前頁面關閉時，資料消失,頁面重新整理時不會影響 兩者區別 local 和 sessio...