Canvas學習:繪製虛線和圓點線
上一節中,使用moveTo()
、lineTo()
和stroke()
可以很輕易的在Canvas中繪製出實線(線段)。整篇文章中看到的都是繪製實現。不知道你和我是不是一樣的好奇,那麼要在Canvas中繪製虛線和圓點線又要怎麼繪製,在Canvas有沒有類似的API能直接繪製呢?
其實我也很好奇,看了一些資料,要像繪製實線那樣簡單或者直接,相對來說是沒有的,但不用擔心,通過其他的方法也是可以實現的。因為JavaScript是一門萬能的語言,那麼接下來的內容,就來看看如何在Canvas中繪製虛線和圓點線。
繪製虛線
CanvasRenderingContext2D.setLineDash()
是 Canvas 2D API 設定虛線樣式的方法。
使用方式很簡單:
ctx.setLineDash(segments);
其接受一個引數segments
,這個引數是一個Array
陣列。一組描述交替繪製線段和間距(座標空間單位)長度的數字。如果陣列元素的數量是奇數,陣列的元素會被複制並重復。例如,[5,15,25]
會變成[5,15,25,5,15,25]
。
言外之意,在Canvas中,可以使用setLineDash
方法來繪製虛線。既然有這樣的方法,那還等什麼呢?動手吧。
function drawScreen() {
ctx.setLineDash([5,15]);
ctx.lineWidth = 4;
ctx.strokeStyle = '#f36' ;
ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(400, 100);
ctx.stroke();
}
咱們來改變一下setLineDash()
裡面的值:
ctx.setLineDash([25,5]);
效果變成:
將上圖放大來看:
上圖是setLineDash([25,5])
的效果,第一個虛線點是25
個畫素,第二個空白點是5
個畫素。然後按這樣的組合在不斷的迴圈,直到線段的終點。那麼如果,我們把上面的示例再做一下調整:
function drawScreen() {
ctx.lineWidth = 4 ;
ctx.beginPath();
ctx.setLineDash([40,30,20]);
ctx.strokeStyle = '#f36';
ctx.moveTo(10, 100);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.beginPath();
ctx.setLineDash([40,30,20,10]);
ctx.strokeStyle = 'blue';
ctx.moveTo(10, 120);
ctx.lineTo(400, 120);
ctx.stroke();
}
同樣我們把它們放大來看,這樣好理解一點:
上圖應該解釋清楚了吧。簡單的理解setLineDash([])
值,“線|間距”,不斷的迴圈。如此一來,在繪製虛線時,就需要注意他們的迴圈次數,以及你需要的虛線格式,不然說不定繪製出來的虛線,並不是你所需要的喲。
其實如果你想線和間距一樣大小,最簡單的方法,就是隻給setLineDash()
傳一個值:
ctx.setLineDash([10]);
上面實現了,我們所說的虛線,也就是CSS中的dashed
。除此之外,還有圓點線(dotted
)。接下來就來看,怎麼在Canvas中繪製圓點線。
繪製圓點線
查了一下,在Canvas中沒有直接繪製圓點(dotted)線的API。也就是說,如果要繪製這樣的線段(路徑)需要特殊處理。也就是說,需要通過JavaScript另外封裝一個API。比如封裝一個CanvasRenderingContext2D.dottedLine
,然後通過context.dottedLine
繪製。接下來,看看如何封裝這個API:
var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
canvasPrototype.dottedLine = function (x1,y1, x2, y2, interval) {
if (!interval) {
interval = 5;
}
var isHorizontal = true;
if (x1 == x2) {
isHorizontal = false;
}
var len = isHorizontal ? x2 - x1 : y2 - y1;
this.moveTo(x1, y1);
var progress = 0;
while (len > progress) {
progress += interval;
if (progress > len) {
progress = len;
}
if (isHorizontal) {
this.moveTo(x1 + progress, y1);
this.arc(x1 + progress, y1, 1, 0, Math.PI * 2, true);
this.fill();
} else {
this.moveTo(x1, y1 + progress);
this.arc(x1, y1 + progress, 1, 0, Math.PI * 2, true);
this.fill();
}
}
}
在Canvas畫布中,通過下面的方式就可以繪製圓點線:
context.dottedLine(10, 100, 200, 200);
當x1
和x2
的值相等時,可以繪製豎線:
context.dottedLine(10, 100, 10, 200);
同時我們也可以改變間距值:
context.dottedLine(10, 100, 200, 200, 10);
使用類似的方法,我們就可以繪製一個圓點線的距形:
context.dottedLine(10, 100, 200, 200, 10);
context.dottedLine(10, 100, 10, 200, 10);
context.dottedLine(200, 100, 200, 200, 10);
context.dottedLine(10, 200, 200, 200, 10);
效果如下:
這樣一來是不是也很簡單。其實除了封裝成Canvas的API之外,我們是不是也可以將其封裝成一個函式呢?思考一下?
總結
這篇文章主要使用setLineDash()
繪製虛線(dashed),這是Canvas裡提供的API。但在Canvas中沒有類似的API,可以直接讓我們繪製圓點劃線。不過這不是什麼大問題,可以利用JavaScript封裝一個類似
setLineDash()
的API dottedLine
來繪製圓點劃線。當然也可以將其封裝成一個JavaScript。
在這篇文章中,我們看到的是在Canvask 繪製虛線和圓點劃線,那麼我們思考一下,在Canvas中怎麼繪製對角線。
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/canvas/draw-dashed-and-dotted-lines.html © w3cplus.com著作權歸作者所有。
個人建了前端學習群,旨在一起學習前端。純淨、純粹技術討論,非前端人員勿擾!入群加我微信:iamaixiaoxiao。
相關推薦
Canvas學習:繪製虛線和圓點線
上一節中,使用moveTo()、lineTo()和stroke()可以很輕易的在Canvas中繪製出實線(線段)。整篇文章中看到的都是繪製實現。不知道你和我是不是一樣的好奇,那麼要在Canvas中繪製虛線和圓點線又要怎麼繪製,在Canvas有沒有類似的API能直接繪製呢?
javascript學習:閉包和prototype原型使用基礎
c# 作用 cnblogs public return rem 聲明 pre 都是 閉包 function Person(name) { this.Username = name; var Userage = 18;
機器學習:模型評估和選擇
val 上一個 bootstrap 自助法 break all 誤差 rec 數據集 2.1 經驗誤差與擬合 精度(accuracy)和錯誤率(error rate):精度=1-錯誤率 訓練誤差(training error)或經驗誤差(empirical error) 泛
SpringBoot學習:讀取yml和properties檔案的內容
轉:https://www.cnblogs.com/tongxuping/p/7207814.html 一、在SpringBoot實現屬性注入: 1)、新增pom依賴jar包; 1 <!-- 支援 @ConfigurationProperties 註解 -->
Python入門學習:1.變數和簡單的資料型別
python入門學習:1.變數和簡單的資料型別 關鍵點:變數、字串、數字 1.1 變數的命名和使用1.2 字串1.3 數字1.4 註釋 1.1 變數的命名和使用 變數,顧名思義是一個可變的量,每個變數都儲存一個值--與變數關聯的資訊。 1message =
GO語言學習:型別轉換和別名
1.型別轉換 go語言不允許隱式轉換,所有型別轉換必須顯式宣告,而且轉換隻能發生在兩種相互相容的型別之間。 var ch byte = 97 var a int = ch //error var a int =int(ch) 2.別名 t
python入門學習:9.檔案和異常
python入門學習:9.檔案和異常 關鍵點:檔案、異常 9.1 從檔案中讀取資料9.2 寫入檔案9.3 異常9.4 儲存資料 9.1 從檔案中讀取資料 9.1.1 讀取整個檔案 首先建立一個pi_digits.txt檔案,內容任意填寫,儲存在當前目錄下。 1with
git學習:關於origin和master
git的伺服器端(remote)端包含多個repository,每個repository可以理解為一個專案。而每個repository下有多個branch。"origin"就是指向某一個repository的指標。伺服器端的"master"(強調伺服器端是因為本地端也有mas
機器學習:線性迴歸和嶺迴歸入門程式碼
機器學習中運用python進行對房子價格的預測程式碼,資料庫直接使用sklearn自帶的boston,使用三種方法進行預測,分別是:線性迴歸直接預測、梯度下降預測、嶺迴歸預測 from sklearn.datasets import load_boston fr
Canvas學習:globalCompositeOperation詳解
在預設情況之下,如果在Canvas之中將某個物體(源)繪製在另一個物體(目標)之上,那麼瀏覽器就會簡單地把源特體的影象疊放在目標物體影象上面。 簡單點講,在Canvas中,把影象源和目標影象,通過Canvas中的globalCompositeOperation操作,可以得到不同的效果,比如下圖:
PyTorch學習:動態圖和靜態圖
動態圖和靜態圖 目前神經網路框架分為靜態圖框架和動態圖框架,PyTorch 和 TensorFlow、Caffe 等框架最大的區別就是他們擁有不同的計算圖表現形式。 TensorFlow 使用靜態圖,這意味著我們先定義計算圖,然後不斷使用它,而在 PyTorch 中,每次都
非監督式學習:聚類和降為
聚類主要的三種模型:K-means,混合高斯以及譜聚類 K-means是非常簡單和直觀的聚類,他用歐式距離來度量資料間的相似度。類似畫圈圈的方法來完成聚類運算。它隱含的假設是資料的各維度是均質的,應用範圍比較窄。 為了解決引用範圍比較窄的問題,我們
網路運維:各類網線和光纖線的有效傳輸距離
網路運維工程師應該都知道網線的有效傳輸距離不大,這時我們可能會通過光纖線加光電轉換裝置來延長網路傳輸的距離,本文將彙總整理網線和光纖線的有效傳輸距離: 一、網線 五類,六類都是100米 ,如果要加大傳輸距離,在兩段雙絞線之間可安裝中繼器,最多可安裝4箇中繼器。如安裝4箇中繼器連線5個網段,則最大
深度學習:梯度消失和梯度爆炸
梯度消失 主要是因為網路層數太多,太深,導致梯度無法傳播。本質應該是啟用函式的飽和性。 DNN結果出現nan值? 梯度爆炸,導致結果不收斂。都是梯度太大惹的禍,所以可以通過減小學習率(梯度變化直接變小)、減小batch size(累積梯度更小)、 features規格化(避
pandas學習:對series和dataframe進行排序
本問主要寫根據索引或者值對series和dataframe進行排序的方法 程式碼: #coding=utf-8 import pandas as pd import numpy as np #以下實現排序功能。 series=pd.Series([3,4,1,6],inde
PyTorch學習:載入模型和引數
pytorch的模型和引數是分開的,可以分別儲存或載入模型和引數。 pytorch有兩種模型儲存方式: 一、儲存整個神經網路的的結構資訊和模型引數資訊,save的物件是網路net 二、只儲存神經網路的訓練模型引數,save的物件是net.state_dict() 對應
python學習:絕對路徑和相對路徑
大牛們應該對路徑都很瞭解了,這篇文章主要給像我這樣的入門小白普及常識用的,啊哈 下面的路徑介紹針對windows,其他平臺的暫時不是很瞭解。 在編寫的py檔案中開啟檔案的時候經常見到下面其中路徑的表
圖解機器學習:神經網路和 TensorFlow 的文字分類
開發人員經常說,如果你想開始機器學習,你應該首先學習演算法。但是我的經驗則不是。 我說你應該首先了解:應用程式如何工作。一旦瞭解了這一點,深入探索演算法的內部工作就會變得更加容易。 那麼,你如何 開發直覺學習,並實現理解機器學習這個目的?一個很好的方法是建立機器學習模型。 假設
監督學習:生成模型和判別模型
生成模型與判別模型 一直在看論文的過程中遇到這個問題,折騰了不少時間,然後是下面的一點理解,不知道正確否。若有錯誤,還望各位前輩不吝指正,以免小弟一錯再錯。在此謝過。 一、決策函式Y=f(X)或者條件概率分佈P(Y|X) 監督學習的任務就是從
機器學習:梯度下降和牛頓法
一、問題描述 考慮將基本梯度下降和牛頓法應用到表中的資料上。 (a)用這兩種演算法對二維資料給出 和 的判別。對梯度下降法取 。畫出以迭代次數為準則函式的曲線。 (b)估計這兩種方法的數學運算量。 (c)畫出收斂時間-學習率曲線。求出無法收斂的最小學習率。 二、