canvas相關(guān)單位
實(shí)際上在剛接觸canvas的時(shí)候，我犯了一個(gè)錯(cuò)誤。將canvas的畫(huà)布進(jìn)行了如下設(shè)置：
<canvas style='width: 700px;height:700px'></canvas>
這樣設(shè)置以后，在畫(huà)布中畫(huà)圓的時(shí)候，我進(jìn)行了如下設(shè)置：
var mycanvas = ocanvas.getContext('2d');
mycanvas.beginPath();
mycanvas.arc(350,350,300,0,2*Math.PI)
后面才發(fā)現(xiàn)圓形沒(méi)有如預(yù)期那樣顯示在畫(huà)布的中央，實(shí)際上canvas中是有相關(guān)設(shè)置的。
arc中圓點(diǎn)x,y的坐標(biāo)是相對(duì)于畫(huà)布的，而畫(huà)布大小設(shè)置應(yīng)該由它自己的屬性width和height決定，而不是通過(guò)stytle來(lái)設(shè)置。
所以最后修改如下：
<canvas width='700' height='700'></canvas>
顯示成功
canvas相關(guān)對(duì)象
我通過(guò)在控制臺(tái)打印canvas.getContext(‘2d’)得到的對(duì)象，發(fā)現(xiàn)如下屬性，便于處理
canvasRenderingContext2d對(duì)象.png
canvas的stroke()方法
需要注意在畫(huà)的線時(shí)，上一條線的strokeStyle會(huì)影響下一條，即便使用了beginPath。所以解決方法只有每條線都設(shè)置相應(yīng)的strokeStyle才行。
canvas清空畫(huà)布方法
我采用的是以下鏈接的第二種方法：
（接下來(lái)考慮stroke顏色加深的問(wèn)題）
