Just Do It - 開啟canvas之旅

布羅利發表於2018-12-11

Canvas

致懂得努力的我們

夫君子之行，靜以修身，儉以養德。非淡泊無以明志，非寧靜無以致遠。夫學須靜也，才須學也，非學無以廣才，非志無以成學。

淫慢則不能勵精，險躁則不能治性。年與時馳，意與日去，遂成枯落，多不接世，悲守窮廬，將復何及！

2018.12.12晚上帶大家一起實現你畫我猜的畫板

猜猜我畫的什麼？

主要內容

Canvas api講解
繪畫
橡皮擦
圖片生成
本地儲存
畫筆切換

公開課時間: 12月12日晚上 20：00~21：30

線上地址: ke.qq.com/course/5868…

教室地址: 北京昌平區回龍觀東大街地鐵A口出，向西走100米（緊鄰同仁堂）二樓201教室

Canvas簡述

Canvas 是HTML5新增的元素，讓我們通過JavaScript指令碼來繪製影象, 可以用JavaScript在上面繪製各種圖表、動畫等。

基於Canvas的一些庫：

Canvas基本用法

建立一個畫布

<canvas id="canvas" width="300" height="300">
  <p>你的瀏覽器不支援Canvas</p>
</canvas>
複製程式碼

如果你的瀏覽器不支援canvas標籤，則標籤內的文字會被顯示出來

canvas是內聯元素(inline)跟img元素很相像，唯一不同的是它沒有src和alt屬性，canvas標籤（除了選擇器）只有width和height兩個屬性，canvas 如果不設定寬高，預設 300*150。

獲取渲染上下文

var canvas = document.querySelector('#canvas')

// 獲取2D畫布的渲染上下文
var ctx = canvas.getContext('2d')
複製程式碼

context.getContext() 獲取渲染上下文，該物件提供了用於在畫布上繪圖的方法和屬性

提示：在未來，如果 canvas 標籤擴充套件到支援 3D 繪圖，getContext() 方法可能允許傳遞一個 "3d" 字串引數。

console.log(ctx) // 2D渲染上下文物件
複製程式碼

從畫一條直線開始

JS

// 通過canvas元素設定寬高
canvas.width = 400
canvas.height = 400

// 設定線條寬度
ctx.lineWidth = 10

// 設定畫筆開始繪製座標（落筆點）
ctx.moveTo(100, 100)
// 連線點
ctx.lineTo(300, 300)

// 設定繪製顏色
ctx.strokeStyle = 'red'
// 根據moveTo和lineTo定製的路徑 進行繪製
ctx.stroke()
複製程式碼

頁面效果

繪製路徑

canvas繪圖是基於路徑的，肉眼看不到，先進行路徑繪製然後再通過 fill（填充）或 stroke（描邊）等方法進行填充或繪製。

涉及api講解

lineWidth 設定當前繪製線條的寬度。預設值：1畫素
moveTo(x, y) 相當於畫筆落筆點開始一條路徑相對於畫布左上角 x軸座標 y軸座標
lineTo(x, y) 指定連線點座標，自動和上一個座標點進行連線繪製路徑相對於畫布左上角 x軸座標 y軸座標
strokeStyle 設定通過stroke 繪製描邊的顏色。預設值：#000
stroke 根據moveTo和lineTo定製的路徑進行繪製描邊

繪製幾何圖形

繪製三角形

HTML

<canvas id="canvas" width="600" height="600"></canvas>
複製程式碼

JS

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

// 設定繪製線條寬度
ctx.lineWidth = 10
// 設定繪製線條顏色
ctx.strokeStyle = 'red'
// 設定填充顏色
ctx.fillStyle = 'pink'

// 開始一條全新的繪製路徑
ctx.beginPath()

// 制定路徑
ctx.moveTo(300, 50)
ctx.lineTo(550, 500)
ctx.lineTo(50, 500)

// 閉合路徑
ctx.closePath()
// 進行填充
ctx.fill()
// 進行繪製
ctx.stroke()
複製程式碼

頁面效果

涉及api講解

fillStyle 設定填充色預設值：#000
fill 根據fillStyle 對當前路徑進行填充
beginPath 開始一條全新的繪製路徑
closePath 閉合當前路徑，建立從當前點到開始點的路徑

路徑相關方法講解

1.beginPath 開始一個全新繪製的路徑

假如我要繪製幾條顏色不同的平行線條

HTML

<canvas id="canvas" width="600" height="600"></canvas>
複製程式碼

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.moveTo(100, 100)
ctx.lineTo(500, 100)
ctx.strokeStyle = 'yellow'
ctx.stroke()

ctx.moveTo(100, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'red'
ctx.stroke()

ctx.moveTo(100, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'blue'
ctx.stroke()
複製程式碼

不加beginPath情況下，後面stroke 會從最初路徑開始座標重新繪製一遍導致之前路徑描邊顏色發生疊加

在每一次moveTo之前加上beginPath方法開始一個全新路徑

// 通常習慣在第一次的時候也加上beginPath 讓程式碼看上去一致
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(500, 100)
ctx.strokeStyle = 'yellow'
ctx.stroke()

ctx.beginPath()
ctx.moveTo(100, 200)
ctx.lineTo(500, 200)
ctx.strokeStyle = 'red'
ctx.stroke()

ctx.beginPath()
ctx.moveTo(100, 300)
ctx.lineTo(500, 300)
ctx.strokeStyle = 'blue'
ctx.stroke()
複製程式碼

新增beginPath後

效果如下：

2.closePath

假如我們繪製一個幾何圖形如上，closePath會建立從當前結束點到開始點的路徑形成閉合路徑

ctx.lineWidth = 10
ctx.strokeStyle = 'red'
ctx.fillStyle = 'pink'

ctx.beginPath()

ctx.moveTo(300, 50)
ctx.lineTo(550, 500)
ctx.lineTo(50, 500)

ctx.fill()
ctx.stroke()
複製程式碼

不加closePath時是這樣

新增上closePath

ctx.lineWidth = 10
ctx.strokeStyle = 'red'
ctx.fillStyle = 'pink'

ctx.beginPath()

ctx.moveTo(300, 50)
ctx.lineTo(550, 500)
ctx.lineTo(50, 500)

// 閉合路徑
ctx.closePath()

ctx.fill()
ctx.stroke()
複製程式碼

新增closePath

效果如下：

closePath例子：

ctx.lineWidth = 10
ctx.strokeStyle = 'red'

ctx.beginPath()
ctx.moveTo(300, 100)
ctx.lineTo(500, 500)

ctx.lineTo(300, 500)
ctx.closePath()

ctx.lineTo(100, 500)
ctx.stroke()
複製程式碼

效果如下：

繪製矩形

rect(x, y, width, height)

建立一個矩形，需要通過stroke() 進行繪製

var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')

ctx.strokeStyle = 'red'
ctx.beginPath()
ctx.rect(100, 100, 300, 300)
ctx.stroke()
複製程式碼

效果如下：

strokeRect(x, y, width, height)

根據strokeStyle指定顏色進行矩形描邊，繪製無填充色的矩形。同 rect+stroke 一樣效果

var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.lineWidth = 10
ctx.strokeStyle = 'red'
ctx.rect(100, 100, 300, 300)
ctx.stroke()
複製程式碼

效果如下：

fillRect(x, y, width, height)

繪製具有填充色的矩形

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.beginPath()
ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 300, 300)
複製程式碼

效果如下：

完整繪製一個矩形

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.lineWidth = 10
ctx.fillStyle = 'blue'
ctx.strokeStyle = 'red'

// 方式一
ctx.fillRect(100, 100, 200, 200)
ctx.strokeRect(100, 100, 200, 200)

// 方式二
ctx.rect(320, 100, 200, 200)
ctx.fill()
ctx.stroke()
複製程式碼

繪製帶陰影矩形

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

// 陰影模糊度
ctx.shadowBlur = 20
// 陰影顏色
ctx.shadowColor = 'black'

// 繪製帶藍色填充色的矩形
ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 200, 200)
複製程式碼

線條相關屬性

lineCap

設定線條兩端線帽的樣式 context.lineCap=“butt|round|square”;

注意："round" 和 "square" 值會使線條略微變長。

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.lineWidth = 20
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(500, 100)
// 預設值
ctx.lineCap = 'butt'
ctx.stroke()

ctx.beginPath()
ctx.moveTo(100, 200)
ctx.lineTo(500, 200)
// 兩末端圓形線帽
ctx.lineCap = 'round'
ctx.stroke()

ctx.beginPath()
ctx.moveTo(100, 300)
ctx.lineTo(500, 300)
// 兩末端方形線帽
ctx.lineCap = 'square'
ctx.stroke()
複製程式碼

效果如下：

繪製圓形

arc

JavaScript 語法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
複製程式碼

引數

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.lineWidth = 10
ctx.beginPath()

ctx.arc(300, 300, 100, 0, Math.PI * 2, false)

ctx.strokeStyle = 'blue'
ctx.fillStyle = 'red'
ctx.fill()
ctx.stroke()
複製程式碼

效果如下：

開始角與結束角：

繪製半圓

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')

ctx.lineWidth = 10
ctx.beginPath()

// 逆時針繪製
ctx.arc(300, 300, 100, 0.5 * Math.PI, 1.5 * Math.PI, true)

ctx.strokeStyle = 'green'
ctx.fillStyle = 'red'
ctx.fill()
ctx.stroke()
複製程式碼

效果如下：

繪製五角星

var canvas = document.querySelector('#canvas')
var ctx = canvas.getContext('2d')


// 計算x軸座標值
// X = Math.cos(弧度) * 半徑 + 圓心x軸座標
var cx = function(i, r, x, d) {
  return Math.cos((d + i * 72) / 180 * Math.PI) * r + x
}

// 計算y軸座標值
// Y = Math.sin(弧度) * 半徑 + 圓心y軸座標
var sy = function (i, r, y, d) {
  return -Math.sin((d + i * 72) / 180 * Math.PI) * r + y
}

/**
 * @desc 繪製五角星
 * @param  {Object} ctx  2d渲染上下文
 * @param  {Number} r  內圓半徑
 * @param  {Number} R  外圓半徑
 * @param  {Number} x  圓心x軸位置
 * @param  {Number} y  圓心y軸位置
 * @param  {Color} fillColor  填充色
 * @param  {Color} strokeColor  描邊色
 *
 */
function drawStart(ctx, r, R, x, y, fillColor, strokeColor) {
  ctx.fillStyle = fillColor
  ctx.strokeStyle = strokeColor

  ctx.beginPath()
  // 繪製五個角
  for (var i = 0; i < 5; i++) {
    // 繪製外圓路徑
    ctx.lineTo( cx(i, R, x, 18), sy(i, R, y, 18))
    // 繪製內圓路徑
    ctx.lineTo( cx(i, r, x, 54), sy(i, r, y, 54))
  }
  ctx.closePath()
  ctx.fill()
  ctx.stroke()
}
drawStart(ctx, 100, 200, 300, 300, 'red', 'white')
複製程式碼

效果如下：

五角星數學知識補下

// 求弧度
// 為L = n（圓心角度數）× π × r（半徑）/180（角度制）

// 對邊與斜邊的比叫做正弦（sine），記作sin
// 鄰邊與斜邊的比叫做餘弦（cosine），記作cos
// 對邊與鄰邊的比叫做正切（tangent），記作tan

// JS Math.sin() 與 Math.cos() 用法
// Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之間
// Math.cos(x) x 的餘弦值。返回的是 -1.0 到 1.0 之間的數
// 這兩個函式中的X 都是指的“弧度”而非“角度”，

// 弧度的計算公式為：2 * PI / 360 * 角度
// 30° 角度 的弧度 = 2 * PI / 360 * 30

// 如何得到圓上每個點的座標？
// 在圓的座標系中 半徑r為斜邊 x軸為鄰邊 y軸為對邊
// 正弦 = y / r
// 餘弦 = x / r

// 解決思路：根據三角形的正弦、餘弦來得值
// 假設一個圓的圓心座標是(a, b)，半徑為r

// X = 圓心x軸座標 + 弧度的餘弦值 * 半徑
// 則圓上每個點的X座標= a + Math.cos(2 * Math.PI / 360) * r

// Y = 圓心y軸座標 + 弧度的正弦值 * 半徑
// Y座標 = b + Math.cos(2 * Math.PI / 360) * r

// 計算x軸座標值
// X = Math.cos(弧度) * 半徑 + 圓心x軸座標
var cx = function(i, r, x, d) {
  return Math.cos((d + i * 72) / 180 * Math.PI) * r + x
}

// 計算y軸座標值
// Y = Math.sin(弧度) * 半徑 + 圓心y軸座標
var sy = function (i, r, y, d) {
  return -Math.sin((d + i * 72) / 180 * Math.PI) * r + y
}

ctx.lineTo(X, Y)
複製程式碼

該文章配套原始碼地址

github.com/Lwenli1224/…

獲取更多學習資源

Just Do It – 開啟canvas之旅
2018-12-11
Canvas
Just Do IT
2016-08-29
開啟Spring Boot 之旅
2021-09-09
Spring Boot
轉行如何開啟機器學習之旅？
2018-12-27
機器學習
一條命令開啟監控之旅!
2022-06-21
在 Fefora 上開啟 Go 語言之旅
2019-09-01
Go
在 Ubuntu 開啟 GO 程式編譯之旅
2019-06-26
UbuntuGo編譯
EE4J程式碼開啟開源之旅
2018-01-25
開啟 DevOps之旅，有哪些關鍵點？
2022-08-31
dev
深入思考軟體工程，開啟 DevOps 之旅
2021-10-13
軟體工程dev
用 C++ 開啟技術創業之旅
2016-08-09
C++創業
開啟高效專案管理之旅：選擇OmniPlan Pro
2024-01-09
專案管理
React Native填坑之旅--開啟TurboModule（Android)
2021-10-16
React NativeAndroid
開啟你的Swift伺服器之旅-Perfect框架
2017-12-04
Swift伺服器框架
一個檔案的開源專案，開啟你的開源之旅
2022-03-23
Spring boot學習（一）開啟Spring boot之旅
2019-01-17
Spring Boot
坐在馬桶上看演算法（10）：開啟“樹”之旅
2016-05-20
演算法
Just Calendar for Mac(就是一個日曆)2.0.4免啟用版
2021-11-16
Mac
開啟iOS/Mac開發之旅，過來人告訴你16件事
2013-10-07
iOSMac
It's not just a place to rest
2007-08-10
REST
一場跨越千年的開拓之旅，《世界啟元》野蠻測試今日開啟！
2024-03-22
基於 Windows 開啟我的 Homestead 之旅 --PHPHub 安裝
2017-03-30
WindowsPHP
DNS: More than just names
2020-08-19
DNS
Just as it's the EA name attached to it
2020-11-30
Hadoop實戰-初級部分之開啟雲端計算之旅
2013-12-05
Hadoop
UOS 開啟 VisualStudio 遠端除錯 .NET 應用之旅
2024-04-25
除錯
精選免費好用的API彙總推薦，開啟高效開發之旅
2024-01-12
API
升級你的Windows 11體驗：StartAllBack，開啟全新開始選單之旅
2023-12-27
Windows
開始Go開發之旅
2019-02-16
Go
從零開始，開啟屬於你的 RTE 漫遊之旅！丨漫遊指南 x 即將啟航
2022-12-28
《數碼寶貝：原始碼》預約開啟，定製你的冒險之旅！
2021-12-08
原始碼
談談如何透過主資料MDM 開啟資料治理之旅
2024-01-15
插上資料的翅膀，開啟我升職加薪的夢想之旅
2023-03-06
Logtail從入門到精通（二）：開啟日誌採集之旅
2018-04-22
AI
MySQL 之旅開始啦
2013-11-08
MySql
Python is doing just fine
2012-10-01
Python
2Do for Mac(任務管理GTD工具)2.8.3啟用版
2023-09-20
Mac
《新美妙世界》開發團隊訪談：「開啟一段全新的《美妙世界》之旅」
2021-05-06

Just Do It - 開啟canvas之旅

致懂得努力的我們

2018.12.12晚上 帶大家一起實現你畫我猜的畫板

Canvas簡述

Canvas基本用法

從畫一條直線開始

JS

頁面效果

繪製路徑

涉及api講解

繪製幾何圖形

繪製三角形

HTML

JS

頁面效果

涉及api講解

路徑相關方法講解

繪製矩形

rect(x, y, width, height)

strokeRect(x, y, width, height)

fillRect(x, y, width, height)

完整繪製一個矩形

繪製帶陰影矩形

線條相關屬性

lineCap

繪製圓形

arc

繪製半圓

繪製五角星

五角星數學知識補下

該文章配套原始碼地址

獲取更多學習資源

相關文章

2018.12.12晚上帶大家一起實現你畫我猜的畫板