模擬紡綞狀筆刷. 2端細中間粗

 好問題！HTML Canvas 的 ctx.lineWidth 屬性設定的線條寬度是均勻的，即線條從頭到尾都是一樣粗。Canvas 本身沒有內建的「兩端比較細，中間比較粗」的筆刷類型或直接的屬性可以實現這種錐形/紡錘形線條。

但是，你可以透過一些技巧來模擬這種效果：

主要方法：將線條視為一個填充的形狀 (Path)

你不再是畫一條「線」(stroke)，而是畫一個細長的、兩端尖銳的封閉「面」(fill)。

  1. 使用多個 lineTo 繪製一個細長的多邊形 (最簡單的錐形)：

    • 想像你的線條是從 (x1, y1) 到 (x2, y2)。

    • 它的中間最寬處是 maxWidth。

    • 它的兩端寬度是 minWidth (通常是 0 或接近 0)。

    • 你需要計算出構成這個錐形（或紡錘形）的至少 4 個頂點，然後用 fill() 填充。

    範例：畫一個兩端尖銳，中間最寬的直線

          function drawTaperedLine(ctx, x1, y1, x2, y2, maxWidth, color = 'black') {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const len = Math.sqrt(dx * dx + dy * dy);
    if (len === 0) return;

    // 計算線條方向的單位向量
    const ux = dx / len;
    const uy = dy / len;

    // 計算垂直於線條方向的單位向量 (法向量)
    const nx = -uy;
    const ny = ux;

    // 中點
    const midX = (x1 + x2) / 2;
    const midY = (y1 + y2) / 2;

    // 計算錐形/紡錘形的4個頂點
    // 頂點1: 起點
    const p1x = x1;
    const p1y = y1;

    // 頂點2: 中點沿法向量偏移 maxWidth/2
    const p2x = midX + nx * (maxWidth / 2);
    const p2y = midY + ny * (maxWidth / 2);

    // 頂點3: 終點
    const p3x = x2;
    const p3y = y2;

    // 頂點4: 中點沿反法向量偏移 maxWidth/2
    const p4x = midX - nx * (maxWidth / 2);
    const p4y = midY - ny * (maxWidth / 2);

    ctx.beginPath();
    ctx.moveTo(p1x, p1y);
    ctx.lineTo(p2x, p2y);
    ctx.lineTo(p3x, p3y);
    ctx.lineTo(p4x, p4y);
    ctx.closePath(); // 閉合路徑形成一個四邊形

    ctx.fillStyle = color;
    ctx.fill();
}

// 使用範例：
// const canvas = document.getElementById('myCanvas');
// const ctx = canvas.getContext('2d');
// drawTaperedLine(ctx, 50, 50, 250, 100, 10, 'blue'); // 從(50,50)到(250,100)，中間最寬10px
// drawTaperedLine(ctx, 50, 150, 250, 200, 5, 'red');

    這個方法會畫出一個菱形的錐形線條。

  2. 使用 quadraticCurveTo 或 bezierCurveTo 繪製更平滑的紡錘形：
    這種方法可以畫出更像毛筆筆觸的效果，線條邊緣是平滑的曲線。
    你需要定義兩條相對的貝茲曲線或二次貝茲曲線，它們在起點和終點相交（或非常接近）。

    概念（較複雜，需要仔細計算控制點）：

          function drawSmoothTaperedLine(ctx, x1, y1, x2, y2, maxWidth, color = 'black') {
    const dx = x2 - x1;
    const dy = y2 - y1;
    const len = Math.sqrt(dx * dx + dy * dy);
    if (len === 0) return;

    const ux = dx / len;
    const uy = dy / len;
    const nx = -uy;
    const ny = ux;

    const midX = (x1 + x2) / 2;
    const midY = (y1 + y2) / 2;

    // 計算控制點的偏移量，使其在中間形成 bulge
    const controlOffsetFactor = 0.5; // 可調整此因子來改變曲線的"胖瘦"

    ctx.beginPath();
    ctx.moveTo(x1, y1); // 起點

    // 第一條曲線 (一側)
    const cp1x_1 = midX + nx * (maxWidth / 2) - ux * len * controlOffsetFactor;
    const cp1y_1 = midY + ny * (maxWidth / 2) - uy * len * controlOffsetFactor;
    // 如果使用 quadraticCurveTo，只需要一個控制點，可以簡化為中點附近向外偏移
    // 例如： const qcp1x = midX + nx * (maxWidth * 0.8); // 稍微誇張一點的控制點
    //       const qcp1y = midY + ny * (maxWidth * 0.8);
    // ctx.quadraticCurveTo(qcp1x, qcp1y, x2, y2);

    // 為了更像紡錘形，我們可能需要兩個控制點或更複雜的計算
    // 簡化版：用兩段二次貝茲曲線模擬一邊
    const bulgePoint1X = midX + nx * (maxWidth / 2);
    const bulgePoint1Y = midY + ny * (maxWidth / 2);
    ctx.quadraticCurveTo(x1 + dx * 0.25 + nx * (maxWidth * 0.3), y1 + dy * 0.25 + ny * (maxWidth * 0.3), bulgePoint1X, bulgePoint1Y);
    ctx.quadraticCurveTo(x2 - dx * 0.25 + nx * (maxWidth * 0.3), y2 - dy * 0.25 + ny * (maxWidth * 0.3), x2, y2);


    // 第二條曲線 (另一側，回到起點)
    const bulgePoint2X = midX - nx * (maxWidth / 2);
    const bulgePoint2Y = midY - ny * (maxWidth / 2);
    ctx.quadraticCurveTo(x2 - dx * 0.25 - nx * (maxWidth * 0.3), y2 - dy * 0.25 - ny * (maxWidth * 0.3), bulgePoint2X, bulgePoint2Y);
    ctx.quadraticCurveTo(x1 + dx * 0.25 - nx * (maxWidth * 0.3), y1 + dy * 0.25 - ny * (maxWidth * 0.3), x1, y1);


    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}
// 使用範例：
// drawSmoothTaperedLine(ctx, 50, 250, 250, 300, 20, 'green');

    注意： drawSmoothTaperedLine 的控制點計算是比較棘手的，上面的範例是一個簡化的嘗試，可能需要仔細調整控制點位置才能達到理想的平滑紡錘形。更精確的毛筆效果通常需要更複雜的算法。

  3. 逐點繪製不同寬度的短線段或圓點 (模擬筆刷壓力變化)：

    • 將你的長線條分解成許多非常短的小線段。

    • 為每個小線段計算一個寬度 (例如，使用 sin 函數或一個預設的壓力曲線，使得中間的線段寬，兩端的線段窄)。

    • 使用 ctx.lineWidth 設定當前小線段的寬度。

    • 使用 ctx.lineCap = 'round' 可以讓這些短線段連接起來更平滑。

    • 畫出這個短線段。

    • 這種方法計算量較大，但能提供最大的靈活性。

          function drawPressureLine(ctx, x1, y1, x2, y2, maxLineWidth, segments = 50, color = 'black') {
    ctx.beginPath();
    ctx.lineCap = 'round'; // 讓線段末端變圓，連接更平滑
    ctx.lineJoin = 'round';
    ctx.strokeStyle = color;

    for (let i = 0; i <= segments; i++) {
        const t = i / segments; // 參數 t 從 0 到 1

        // 計算當前點的位置
        const currentX = x1 + (x2 - x1) * t;
        const currentY = y1 + (y2 - y1) * t;

        // 計算當前點的線條寬度 (例如，使用 sin 函數形成中間粗兩端細)
        // Math.sin(t * Math.PI) 在 t=0 和 t=1 時為 0, 在 t=0.5 時為 1
        const currentWidth = Math.sin(t * Math.PI) * maxLineWidth;
        ctx.lineWidth = Math.max(0.1, currentWidth); // 確保線寬不為0或負

        if (i === 0) {
            ctx.moveTo(currentX, currentY);
        } else {
            // 如果 lineWidth 變化很快，直接 lineTo 可能不夠平滑
            // 一個改進是用很多小圓點填充
            // ctx.beginPath();
            // ctx.arc(currentX, currentY, currentWidth / 2, 0, Math.PI * 2);
            // ctx.fillStyle = color;
            // ctx.fill();
            // 但這裡我們先嘗試用 lineTo
            ctx.lineTo(currentX, currentY);
        }
    }
    ctx.stroke(); // 一次性描邊整個路徑
}
// 使用範例
// drawPressureLine(ctx, 300, 50, 450, 150, 15, 100, 'purple');

    注意： drawPressureLine 如果線寬變化劇烈，單純用 lineTo 和 stroke 可能在連接處不夠平滑，用小圓點填充會更好，但效能開銷更大。

對於你之前那個「爆炸框」的尖刺：

如果你想讓那些尖刺也帶有這種錐形效果，你需要對每一根尖刺都使用上述方法之一來繪製，而不是簡單的 ctx.lineTo() 和 ctx.stroke()。這會顯著增加計算量。

總結：

  • 最簡單直接的錐形： 使用方法 1 (繪製四邊形並填充)。

  • 更平滑的筆觸感： 方法 2 (使用貝茲曲線填充)，但控制點計算複雜。

  • 模擬筆刷壓力： 方法 3 (逐段改變 lineWidth)，靈活但可能需要更多調整以達到平滑效果。

選擇哪種方法取決於你需要的視覺效果精細度和可接受的複雜度/效能開銷。對於漫畫中的尖刺，如果數量很多，方法 1 可能是效能和效果的一個較好平衡點。

留言

張貼留言

這個網誌中的熱門文章

Offscreen Canvas

 你說得完全正確！這是一個非常經典的效能最佳化思路。如果尖刺框的參數沒有改變，重複計算所有尖刺的路徑和幾何形狀確實是一種浪費。 有幾種方法可以「記憶」或快取你畫的尖刺框，避免不必要的重繪計算： 快取到一個離屏 Canvas (Offscreen Canvas) - 最推薦的方法 原理 ：創建一個與主 Canvas 大小相同（或者只需要能容納尖刺框的大小）的隱藏 Canvas。當尖刺框的參數改變時，或者第一次繪製時，將完整的尖刺框（包括尖刺和中間的填充橢圓）繪製到這個離屏 Canvas 上。 後續繪製 ：在主 Canvas 的每一幀渲染時，如果尖刺框的參數沒有改變，你只需要使用 ctx.drawImage() 將離屏 Canvas 的內容直接繪製到主 Canvas 的目標位置即可。這遠比重新計算和繪製所有尖刺要快得多。 優點 ： 效能提升顯著， drawImage 非常快。 代碼結構清晰，繪製邏輯和快取邏輯分離。 可以快取包含複雜效果（如漸層、陰影等）的圖形。 缺點 ： 需要額外的記憶體來儲存離屏 Canvas。對於大多數尖刺框來說，這通常不是問題。 如果尖刺框需要動態改變大小或位置，離屏 Canvas 的管理（重新創建或調整大小）需要考慮。 快取路徑指令 (Path2D Object) - 適用於路徑本身 原理 ： Path2D 物件可以儲存一系列的 Canvas 路徑指令（ moveTo , lineTo , ellipse , bezierCurveTo 等）。當尖刺框的參數改變時，你構建一個或多個 Path2D 物件來代表尖刺框的各個部分（例如，一個 Path2D 給中心橢圓，另一個給所有尖刺的集合）。 後續繪製 ：如果參數未變，你可以直接使用 ctx.fill(cachedPath) 或 ctx.stroke(cachedPath) 來繪製已儲存的路徑。 優點 ： 比重新執行所有 moveTo/lineTo 更快一些，因為路徑已經編譯好了。 記憶體佔用可能比離屏 Canvas 小。 缺點 ： Path2D 只儲存路徑，不儲存樣式（顏色、線寬等）。你仍然需要在繪製時設定 ctx.fillStyle , ctx.strokeStyle , ctx.lineWidth 。 對於你用 drawTaperedLine 繪製的填充錐形尖刺，...
閱讀完整內容

外部網頁新增 Google 日曆行程(URL模板)

  好的，從外部網頁新增 Google 日曆行程，最常用且最簡單的方法是使用 Google Calendar Event Publisher Guide 提供的 URL 模板 。這種方法不需要複雜的 API 整合或使用者授權流程 (OAuth)，只需要產生一個特殊格式的連結即可。 使用者點擊這個連結後，會被導向到他們自己的 Google 日曆，並看到一個預先填好資訊的新增行程頁面，他們只需要確認並儲存即可。 以下是詳細步驟和說明： 方法：使用 Google 日曆事件發布連結 (URL Template) 基本 URL 結構： https: //www.google.com/calendar/render?action=TEMPLATE 添加參數以預填行程資訊： 在基本 URL 後面加上 & 和 參數名稱=參數值 來指定行程細節。重要的參數包括： text : 行程標題 (必填) 。 範例： &text=團隊會議 dates : 行程開始和結束時間 (必填) 。格式非常重要，必須是 ISO 8601 格式，且 強烈建議使用 UTC (世界標準時間) ，以避免時區混淆。 特定時間格式： YYYYMMDDTHHMMSSZ/YYYYMMDDTHHMMSSZ (Z 表示 UTC) 範例 (2024年7月26日 UTC 下午 2:00 到 3:00)： &dates=20240726T140000Z/20240726T150000Z 全天事件格式： YYYYMMDD/YYYYMMDD (結束日期是 不包含 的那一天的日期，所以通常是開始日期加一天) 範例 (2024年7月27日全天)： &dates=20240727/20240728 location : 行程地點 。 範例： &location=台北101會議室 details : 行程說明或備註 。可以包含換行符號 ( \n )。 範例： &details=討論下一季專案規劃。\n請攜帶筆記型電腦。 sprop : 來源網站資訊 (可選，但建議加入)。 範例： &sprop=name:我的網站名稱&sprop=url:https://www.mywebsite.com add : 邀請的賓客 Email (可選)...
閱讀完整內容

計算 Canvas 文字最大字體

 好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。 <html> <head> <title>計算 Canvas 文字最大字體</title> <style> #myCanvas { border: 1px solid black; } </style> </head> <body> <div> <label for="inputText">輸入文字:</label> <input type="text" id="inputText" value="Hello"> </div> <div> <label for="canvasWidth">Canvas 寬度:</label> <input type="number" id="canvasWidth" value="300"> </div> <button id="calculateBtn">計算並繪製</button> <canvas id="myCanvas" width="300" height="100"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const inputText = document.getElementById('inputText...
閱讀完整內容