SegmentFault 思否技術週刊 Vol.75 — 簡簡單單畫個“圖”

本週技術週刊一起簡單畫個“圖”，歡迎大家一起試一試～

`文章推薦`

很多時候，在使用 Canvas 繪製圓角矩形都是一件比較麻煩的事，因為之前並沒有直接的方法，只能透過直線和圓弧間接組合而成，下面是一個常規繪製方式
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + w, y, x + w, y + h, r);
ctx.arcTo(x + w, y + h, x, y + h, r);
ctx.arcTo(x, y + h, x, y, r);
ctx.arcTo(x, y, x + w, y, r);
ctx.closePath();
這裡x、y、w、h、r分別代表x座標、y座標、寬度、高度、圓角。
這段程式碼應該是最精簡的了，雖然不是特別複雜，但是應該很少有人能直接手寫，主要是不夠語義化，比較繁瑣。
而圓角矩形又是一個非常常見的功能需求，為此，Canvas 在Chrome 99悄悄推出了一個新的方法：roundRect()，花一分鐘瞭解一下

使用 Canvas API 模擬一個彩色時鐘 // zkrisj

<canvas> 最早由 Apple 引入 WebKit，用於 Mac OS X 的 Dashboard，隨後被各個瀏覽器實現。如今，所有主流的瀏覽器都支援它。Canvas API 提供了一個透過JavaScript 和 HTML的 <canvas> 元素來繪製圖形的方式。它可以用於動畫、遊戲畫面、資料視覺化、圖片編輯以及實時影片處理等方面。Canvas 適合繪製大資料量圖形元素的圖表（如熱力圖、地理座標系或平行座標系上的大規模線圖或散點圖等），也適合實現某些視覺特效。它還能能夠以 png、jpg 或 webp 格式儲存影像。Canvas 提供了強大的 Web 繪圖能力，所以我們要學會使用它。

我用 Canvas 帶你看一場流星雨 // 南玖

首先我們需要的元素有：夜空、滿天繁星、流星雨。
滿天繁星：這個其實就是畫上一個個點，然後不斷的透過顏色交替，營造出一種星星閃爍的意境。
流星雨：流星處於他自己的運動軌跡之中，當前的位置最亮，輪廓最清晰，而之前劃過的地方離當前位置軌跡距離越遠就越暗淡越模糊，其實它就是一個漸變的過程，恰巧canvas有方法可以建立一個沿引數座標指定的直線的漸變。然後讓它從右上向左下移動，這樣就能營造一種流星雨的效果，同時實現動畫的迴圈。
OK，需求分析結束，準備動手開幹～

你的程式碼怎麼下起了雨？ // 小九

大多數的程式設計師都會有一個自己的個人網站，我們想要在自己的網站下面去刻畫一個酷炫的背景，我們可能會使用一些炫酷的圖片，或者疊加一個影片背景，亦或是透過css3 來進行手動繪製，這些方案都各有利弊，在出現canvas之後，我們出現了一種新的可能，我們可以透過canvas繪製一些非常炫酷的背景，有意思的是，我們還可以透過滑鼠或者鍵盤事件與其互動，這樣，我們就擁有了一種繪製動態背景的能力。

基於 Canvas 實現的多功能畫板 // LH_S

最近空閒時間比較多，就想做點小工具玩玩，方案選了好幾個，最終決定做一個基於canvas的畫板，目前已經完成了第一版，有以下主要功能
畫筆（動態寬度設定，顏色設定）
橡皮擦
撤回，反撤回，清除畫板，儲存
畫板拖拽
多圖層

現代 CSS 高階技巧，完美的波浪進度條效果！ // chokcoco

再簡單快速的過一下，什麼是 CSS Painting API。
CSS Painting API 是 CSS Houdini 的一部分。而 Houdini 是一組底層 API，它們公開了 CSS 引擎的各個部分，從而使開發人員能夠透過加入瀏覽器渲染引擎的樣式和佈局過程來擴充套件 CSS。Houdini 是一組 API，它們使開發人員可以直接訪問 CSS 物件模型（CSSOM），使開發人員可以編寫瀏覽器可以解析為 CSS 的程式碼，從而建立新的 CSS 功能，而無需等待它們在瀏覽器中本地實現。
CSS Paint API 目前的版本是 CSS Painting API Level 1。它也被稱為 CSS Custom Paint 或者 Houdini's Paint Worklet。
我們可以把它理解為 JS In CSS，利用 JavaScript Canvas 畫布的強大能力，實現過往 CSS 無法實現的功能。

不規則圖形背景排版高階技巧 -- 酷炫的六邊形網格背景圖 // chokcoco

首先，看到這樣一個圖形，如果想要使用一個標籤完成整個背景，最先想到的肯定是使用背景 background 實現，不過可惜的是，儘管 CSS 中的 background 非常之強大，但是沒有特別好的方式讓它足以批次生成重複的六邊形背景。
因此，在這個需求中，我們可能不得不退而求其次，一個六邊形實現使用一個標籤完成。
那麼，就拿 1 個 DIV 來說，我們有多少實現六邊形的方式呢？這裡簡單介紹 2 種方式：
使用 border 實現六邊形
使用 clip-path 實現六邊形

`問答推薦`

# SegmentFault 技術週刊 #
「技術週刊」是社群特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以新增小姐姐微信~

SegmentFault 思否技術週刊 Vol.75 — 簡簡單單畫個“圖”

文章推薦

問答推薦

相關文章

`文章推薦`

`問答推薦`