當我們在canvas中繪製一條直線，會預設線的寬度為1px,顏色為黑色。但是我們會發現線條的寬度要比1px寬，顏色也沒有那麼黑，更像是灰色。我們看下效果。
**：
我們邊框設定的是1px，直線預設也是1px,但是我們發現直線就是比邊框要粗顏色要淡。
為什麼會出現這種效果呢？
原因：如圖，我們的電腦螢幕是由乙個個畫素點構成，當我們在(0,0)座標開始橫向繪製一條直線時，canvas會找的y軸0px刻度的中心0.5px開始繪製。直線的寬度為0.5px到1.5px，但是又由於瀏覽器解析畫素的最小單位為1px，所以瀏覽器會把0.5px解析為1px。使得直線變成了2px。顏色也會變淡。就像一瓶墨水中，只裝了半瓶墨水，又裝了半瓶水稀釋，所以顏色會變淡了。解決辦法為，movatoy軸上下移動0.5px。
對比**：
不過我們在作圖中可以忽略這個缺陷。
canvas 閉合 canvas 線的樣式
線的樣式在canvas中分為輪廓顏色 以及線型的樣式 strokestyle color 設定描邊輪廓的顏色ctx.linecap butt 預設 正常 屬性值 round 多出半圓 square 多出方形 ctx.linewidth 20 ctx.strokestyle red 線帽 線的兩端的樣...
canvas繪製線和矩形
canvas繪製矩形 html中的元素canvas只支援一種原生的圖形繪製 矩形。所有其他的圖形的繪製都至少需要生成一條路徑 1.繪製矩形 canvas提供了三種方法繪製矩形 繪製乙個填充的矩形 填充色預設為黑色 fillrect x,y,width,height 繪製乙個矩形的邊框 預設邊框為 一...
canvas拋物線運動軌跡
本來是想做乙個貝塞爾曲線運動軌跡的 公式太複雜了，懶得算，公式在最後 我先畫了乙個拋物線，我確定了兩個點，起點 0,0 終點 200,200 用座標系可算出方程 y 0.005x 2 現在找出終點的切線與x軸的交點，那個就是貝塞爾曲線的第二個引數，控制點 求出是 100,0 現在重新繪製乙個動態曲線...