【怕啥弄啥系列】Canvas - 基礎圖形繪製

Canvas

HTML5 <canvas> 元素用於圖形的繪製，通過腳本 (通常是JavaScript)來完成.

<canvas> 標籤只是圖形容器，您必須使用腳本來繪製圖形。

我對Canvas 的恐懼已經不是一兩天的事了，從接觸到現在，一看到 canvas 這個詞，我就恐懼，害怕，渾身乏力..........

Canvas 功能很強大，可以做好酷炫的東西，但是卻讓我敬而遠之，那麼酷炫的東西一眼就能讓人覺得這個東西絕壁很複雜......

我同樣相信很多人跟我一樣，存在這種想法吧

我做過好全好詳細的筆記，但是看得我沒脾氣啊，有時做一個簡單的繪圖，但是忘記怎麼開始了，看下筆記，卻根本找不到着手點，也只能放棄......

所以打算寫得通透，簡單明瞭一些，不想講太多太複雜的東西，讓自己這個沙比在忘的時候，能瞬間撿起來

如何開始Canvas

1、創建 canvas 標籤

2、獲取到 canvas DOM 元素

3、獲取 2d 渲染上下文對象，即繪畫對象，所有操作都是基於繪畫對象

基礎代碼如下

<!DOCTYPE html>
<html lang="en">
    <head><meta charset="UTF-8"></head>
    <body>
        <canvas id="canvas" height="400" width="400"></canvas>
        <script>
            var canvas = document.getElementById("canvas");        
            var context = canvas.getContext("2d")    
        </script>
    </body>
</html>

座標系統

Canvas 的座標系統是，左上角，左上角，左上角，重要的事情說三遍

就是 Y 軸向下走是增加的，和我們數學中的的座標軸垂直翻轉了

矩形

矩形應該算比較簡單的圖形了，有直接的 api 可以調用

基礎API瞭解一下

實心矩形

contxt.fillRect(x,y,w,h)

空心矩形

contxt.strokeRect(x,y,w,h)

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

// 繪製 x=0，y=10，長=20，高=30 的實心矩形 
contxt.fillRect(0,10,20,30)   
// 繪製 x=0，y=10，長=20，高=30 的空心矩形 
contxt.strokeRect(0,10,20,30)

線條

基礎 API 瞭解一下

開始繪製路徑，告訴canvas 繪製新路徑

ctx.beginPath

設置線條起點

ctx.moveTo

設置線條終點

ctx.lineTo

設置完兩點，現在將兩點連起來

ctx.stroke

修改線條寬度

ctx.lineWidth=數字，必須在繪製線條前設置

現在我們來繪製一條直線

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

// 設置線條寬度爲5
context.lineWidth=5
context.moveTo(0,0)
context.lineTo(10,10)
context.stroke()

三角形

三角形其實是由線條組成的，在上面畫線條的基礎上，增加多一個點 即可

基礎 API 瞭解一下

自動閉合路徑

ctx.closePath

填充繪製的路徑，就是畫實心圖形

ctx.fill

繪製空心三角形

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
// 把線條移動回原點，否則不閉合
context.lineTo(0,0)
context.stroke()

如果你最後不把線條移動回原點，三角形是不閉合的，如下圖

如果使用 closePath 之後，可以自動閉合路徑，可以不用把線條移動到原點

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
context.closePath() // 或者 context.lineTo(0,0)
context.stroke()

繪製實心三角形，需要填充

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

context.beginPath()
context.moveTo(0,0)
context.lineTo(0,100)
context.lineTo(100,0)
context.lineTo(0,0)
// 填充圖形區域
context.fill()

圓和圓弧

ctx.arc( x, y, radius, startAngle,endAngle, anti-clockwise)

圓心 x 座標

圓心 y 座標

radius

圓弧半徑，一個數字

startAngle

圓弧開始角度，使用 Math.PI 作爲角度單位，以上圖的 0 那條虛線爲起始位置

例如 Math.PI * 2，表示 360°

endAngle

圓弧結束角度，使用 Math.PI 作爲角度單位，以上圖的 0 那條虛線爲起始位置

例如 Math.PI / 2 ，表示 90°

anti-clockwise

順時針還是逆時針，默認爲 false，即是順時針

TIP

Math.PI 就是代表數學中的 π

Math.PI 表示 180 ° , Math.PI /2 就是 90 °

我的理解

所畫的圓弧弧長等於結束角度減去開始角度，剩下的角度所對應的弧長

例如，開始角度是 45° ，結束角度是 90° ，結束角度 - 開始角度 = 45°

所以，最終繪製的弧長 = 45° 所對應的圓弧

基礎 API 瞭解一下

設置填充的顏色

ctx.fillStyle = #fff......

不閉合弧線

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.stroke()

跟頭髮一樣哈哈哈哈

閉合空心弧線

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.closePath()
ctx.stroke()

閉合實心弧線

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI/2)
ctx.closePath()
ctx.fill()

空心圓形

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(130,130,100,0,Math.PI*2)
ctx.stroke()

實心圓形

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.fillStyle="rgb(0, 0, 0)"
ctx.arc(130,130,100,0,Math.PI*2)
ctx.fill()

圓角矩形

圓角矩形，沒有可以直接調用的 api

但是分析一下，並不複雜，就是四個 90°角，四條直線，從左上角開始按順序一個個畫就可以了（當然了，從哪裏開始畫無所謂，但是要按順序）

var x = 120; // 圓角矩形左上角橫座標
var y = 120; // 圓角矩形左上角縱座標
var width = 250; // 圓角矩形的寬度
var height = 250; // 圓角矩形的高度
var radius = 50; // 圓角的半徑

// 開始創建新路徑
context.beginPath();

// 左上角+頂邊
// 繪製左上角圓角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 繪製頂邊路徑
context.lineTo(width - radius + x, y);

// 右上角+右邊
// 繪製右上角圓角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 繪製右邊路徑
context.lineTo(width + x, height + y - radius);

// 右下角+下邊
// 繪製右下角圓角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 繪製底邊路徑
context.lineTo(radius + x, height +y);

// 左下角+左邊
// 繪製左下角圓角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 閉合路徑 也可使用 context.lineTo(x, y + radius);
context.closePath();

// 設置繪製的顏色
context.strokeStyle = '#188eee';
context.stroke();

如果現在你想花一個膠囊，想必你已經知道怎麼畫了吧

繪製文本

基礎 API 瞭解一下

實心文本

ctx.fillText( text，x，y )

空心文本

ctx.strokeText( text，x，y )

字體樣式

ctx.font="60px solid "

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.font="60px solid"

// 空心，60px 的 嘿嘿嘿
ctx.strokeText("嘿嘿嘿",100,100)

ctx.font = "20px solid"

// 實心，20px 的 "哈哈哈"
ctx.fillText("哈哈哈",300,100)

填充顏色

基礎 API 瞭解一下

填充顏色

ctx.fillStyle="#000" :

描邊顏色

ctx.strokeStyle="#000"：

以矩形爲例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

ctx.fillStyle="red"
ctx.strokeStyle="pink"

// 實心，紅色，矩形
ctx.fillRect(100,100,100,100)
// 空心，粉色邊框，矩形
ctx.strokeRect(300,100,100,100)

擦除 Canvas

ctx.clearRect(x,y,w,h)

矩形區域擦除

只要設置擦出的起點和寬高就好了

我畫了寬高爲 200 的矩形，但是隻擦出了 150*150 的面積，那麼就會剩下一部分沒有被清除

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d")

context.fillRect(100,100,200,200)
context.clearRect(100,100,150,150)

最後

Canvas 這麼一弄下來，看起來是聽簡單的，只是背後有很多複雜的API

但是我們只要把簡單的掌握了，也就不會這麼恐懼

現在，Canvas 基本圖形會畫了，複雜的圖形還遠嗎？

嗯，還挺遠的.....但是不要慫！家油吧，神仙朱

關注我可以說是相當優秀了

本文分享自微信公衆號 - 神仙朱（skying-zhu）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。

【怕啥弄啥系列】Canvas - 基礎圖形繪製

win11關閉自動檢測病毒刪文件

【前端監控-序】簡說騰訊團隊的前端監控

【怕啥弄啥系列】總要愛上它《正則》 - 基礎

【怕啥弄啥系列】Canvas - 基礎圖形繪製

【Vue原理】Vue源碼閱讀總結大會 - 終

【Vue原理】Diff - 源碼版之 Diff 流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結