canvas 閉合 canvas 線的樣式

線的樣式在canvas中分為輪廓顏色、以及線型的樣式

strokestyle = color; // 設定描邊輪廓的顏色

ctx.linecap = 'butt'; // 預設 正常

屬性值:

round: 多出半圓

square: 多出方形

ctx.linewidth = 20;

ctx.strokestyle = 'red';
// 線帽： 線的兩端的樣式
// butt
ctx.beginpath();
ctx.linecap = 'butt'; // 預設
ctx.moveto(50, 100);
ctx.lineto(50, 400);
ctx.stroke();
// round：會多出半圓
ctx.beginpath();
ctx.linecap = 'round'; 
ctx.moveto(150, 100);
ctx.lineto(150, 400);
ctx.stroke();
// square: 會多出方形
ctx.beginpath();
ctx.linecap = 'square'; 
ctx.moveto(250, 100);
ctx.lineto(250, 400);
ctx.stroke();
// 黃色的線
ctx.linewidth = 2;
ctx.strokestyle = 'yellow';
ctx.beginpath();
ctx.moveto(0, 100);
ctx.lineto(400, 100);
ctx.moveto(0, 400);
ctx.lineto(400, 400);
ctx.stroke();

利用多出一點點的特性我們可以看看在閉合路徑時可以做點什麼

// 箭頭

ctx.beginpath();
ctx.linewidth = 6;
ctx.strokestyle = 'blue';
線帽使用的是***
ctx.linecap = 'square'; 
// 起始點
ctx.moveto(100, 200);
ctx.lineto(250, 200);
ctx.lineto(250, 150);
// 角》
ctx.lineto(350, 250);
ctx.lineto(250, 350);
ctx.lineto(250, 300);
// 結束點
ctx.lineto(100, 300);
ctx.stroke();

問題來了： 箭頭為什麼沒有閉合路徑，如何閉合路徑

// 第一種 新增最後乙個結束點

ctx.lineto(100, 200);
ctx.stroke();
// 第二種 閉合路徑
ctx.closepath();
ctx.stroke();

如果是預設線帽butt呢?

1、在使用closepath()方式閉合是完美連線在一起的(我就不貼圖了)

2、使用lineto()，出現了問題：缺了一小塊

三、線的交點

ctx.linejoin = 'miter '; // 預設 尖角

設定內角與外角距離

ctx.miterlimit = 10; 預設值（

當使用miter作為線條的連線時，所產生的內角與外角最大的預設值，一旦超過預設值，就會變成bevel

ctx.linejoin = 'bevel'; // 斜接

ctx.linejoin = 'round'; // 圓角

canvas 閉合 canvas 簡版畫板

結合之前的api可以來個簡單的實踐 栗子 結合滑鼠互動效果實現畫板的功能，有寫的功能以及橡皮擦的功能 撤銷 前進就先不考慮了 首先來個布局 需要調節線的粗細以及橡皮擦的大小，我們需要h5的範圍表單元素 html 線的粗細 橡皮檫的大小 js1 獲取表單元素 線，橡皮大小 var linerange ...

canvas 閉合 Canvas的絢爛起點

可以理解為，它提供了一塊畫布，在它所掌控的區域，可以運用各種方法繪製圖形 文字，或者製作動畫 處理影象，等等。通常我們能夠看到一些炫酷的動畫，很多都是canvas做出來的，但是需要各種元素和技巧綜合使用，不是一蹴而就的，我們先從基礎看起。var canvas document.getelementb...

canvas06 canvas線模糊問題

當我們在canvas中繪製一條直線，會預設線的寬度為1px,顏色為黑色。但是我們會發現線條的寬度要比1px寬，顏色也沒有那麼黑，更像是灰色。我們看下效果。效果 我們邊框設定的是1px，直線預設也是1px,但是我們發現直線就是比邊框要粗顏色要淡。為什麼會出現這種效果呢？原因 如圖，我們的電腦螢幕是由乙...