使用canvas制作的移動端colorPicker

meteor199 發布于2019-08-20 15:30 / 1494人閱讀

摘要：主要是生成顏色區域，判斷手指移動所在的區域，這兩塊花了多點的時間。而且用到了三角函數，還有一些坐標計算啊，數學都已經還給了老師，要多寫下這種，順便來復習下數學。

使用canvas制作的移動端color picker

我在另一個demo中，需要用到color picker，但是找不到我需要的移動端color picker，很多都是pc的，然后發現input[type="color"]這個東西存在，發現安卓沒問題，ios卻不支持，但是我看安卓那個color picker貌似很簡單就能實現，剛好另一個demo也是用canvas實現的，所以就打算自己寫一個。

項目演示地址

效果大概就是這樣。外層選擇顏色，內層就是混合的。

怎么做？

這里有兩部分，一個是圓環，一個是正方形，兩個形狀內都有兩個點，這兩個點表示當前選擇的顏色。圓環的選擇的顏色，決定正方形顯示的顏色，正方形內的點，決定最終輸出的顏色。

所以我先制作圓環和正方形的顏色，然后給畫布事件獲取鼠標位置。再使用canvas的getImageData，我們只需要ctx.getImageData(x,y,1,1)就可以獲取到rgba顏色了。

制作圓環

制作這個圓環，一開始想到是用漸變來處理的，但無論線性還是徑向，都好像搞不出來，然后我google了下，使用線和hsl就可以搞出來了。我們這里制作的圓環，是一個圓形，這里就可以用循環360，根據每次循環的度數，去制作線。而顏色就是hsl(i , 100% , 50%)這樣就可以得到顏色。

hsl

我們看看hsl是怎么組成的。
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%

我們只需改變H(色調)就可以制造出常用的顏色出來。

獲取坐標，制作線

canvas中的mveTo和lineTo，需要x,y坐標，才能制作出一條線，再通過hsl顏色，進行繪制。這里獲取x,y坐標，用到了三角函數，Math.sin,Math.cos。要注意的是，它們接受的值是弧度，而不是角度，所以我們要先把角度轉成弧度先rad = i * (2 * Math.PI) / 360。

看這圖，應該能大概知道了x,y坐標的獲取，不過這里獲取的x,y是相對于圓心的距離，而不是相對于(0,0)這個點，所以我們還要加上半徑r，才是最終的x,y坐標。

for (var i = 0; i < 360; i += .1) {
    //獲取度數
    var rad = i * (2 * Math.PI) / 360;
  //計算x,y坐標
  x = r + Math.cos(rad) * r;
  y = r + Math.sin(rad) * r;
  //然后連接線
  ctx.strokeStyle = "hsl(" + i + ", 100%, 50%)";
  ctx.beginPath();
  ctx.moveTo(r,r);
  ctx.lineTo(x,y);
  ctx.stroke();
  ctx.closePath();
}

這樣就可以制作出漸變色的圓形，但卻不是圓環，因為中間是透明，沒有顏色的(也不能是白色)。原本我打算再繪制一個白色圓來覆蓋中間部分的，但我想要的是透明的效果，這樣看起來會好很多。所以繼續在上面循環做文章了。

既然終點可以計算，那起點也是同樣的道理，只不過加的長度不同而已。

for (var i = 0; i < 360; i += .1) {
    //獲取度數
    var rad = i * (2 * Math.PI) / 360，
     angleX = Math.cos(rad),
     angleY = Math.sin(rad),
     lineW = 20;//圓環的厚度

  //然后連接線
  ctx.strokeStyle = "hsl(" + i + ", 100%, 50%)";
  ctx.beginPath();

  //計算坐標
  ctx.moveTo(r + angleX * (r - lineW),r + angleY * (r - lineW));
  ctx.lineTo(r + angleX * r,r + angleY * r);
  ctx.stroke();
  ctx.closePath();
}

這樣就可以制作出圓環的效果，而且中間的圓形是透明的。

制作正方形顏色

這里是用了三種顏色疊加起來的。首先是從圓環獲取到的顏色，加上從左到右的白色漸變色，加上從下到上的黑色漸變色。每當圓環的顏色改變后，要重新生成正方形的顏色。

判斷手指移動的坐標

接著，就要給canvas添加事件了，來判斷手指移動的坐標，是否在圓環或者正方形內，然后根據這個坐標去生成顏色。

這里就主要說下，怎么判斷移動時，是否在圓環內。

移動時，通過事件對象event，可以獲取到x,y坐標

var t = event.touches[0],
  x = t.pageX - oCan_left,
  y = t.pageY - oCan_top;

這里獲取到x,y坐標還要減去畫布到可視區的左，上的距離。因為我們計算的時候，是根據畫布的坐標計算的，(0,0)坐標就是畫布的左上角。

接著我們來計算，這個x,y坐標到圓心的距離d = Math.sqrt(Math.pow((x - r),2) , Math.pow((y - r),2))。這里用的是知道兩點坐標，得到兩點之間的距離，公式是這樣的d = √(x1 - x2)2 + (y1 - y2)2

如上圖，畫布寬高其實就是外圓的直徑，r1*2。開始點(0,0)在左上角。我們移動的坐標，到圓心的距離d，小于r1且大于r2的話，就是在圓環內了。
d >= r2 && d <= r1

獲取顏色

這個簡單，得到了x,y坐標后就可以直接獲取顏色了，直接上代碼

var pixel = this.ctx.getImageData(x, y, 1, 1),
    data = pixel.data,
    rgb = "rgb(" + data[0] + "," + data[1] + "," + data[2] + ")";
return rgb

如何使用

我已經把代碼上傳到github了，大家可以下載使用。
只要把colorPicker.js和colorPicker.css導入就好了。按下面代碼調用即可:

//html結構

  
  


//調用代碼
new ColorPicker({
  oBox: document.querySelector(".colorPickerbox"),//最外層
  oBtnWrap: document.querySelector(".btnWrap"),//按鈕外層
  oCan: document.querySelector("#colorPicker"),//畫布
  width: 200,//畫布寬高
  height: 200,
  callback:function(color){//回調函數
    //color就是獲取到的顏色
  }
}).init()//初始化

總結

這個color picker我用了一個下午左右的時間，大概完成了。主要是生成顏色區域，判斷手指移動所在的區域，這兩塊花了多點的時間。而且用到了三角函數，還有一些坐標計算啊，數學都已經還給了老師，要多寫下這種demo，順便來復習下數學。
可以用canvas來處理的東西太多了，看來是要花更多的時間在canva這部分，因為確實挺有趣的 :)

這里是原文地址

云服務器 GPU云服務器華為云服務器移動端使用教程使用canvas畫圖兼容支持webrtc的移動端移動端對webRTC的支持情況

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82296.html

vux入門

摘要：它是主要用于移動端的基于和的組件庫。看上作者的描述很霸氣。一種愛用不用的感覺。的端的框架有等。使用預處理工具是不影響開發者使用等。局部注冊全局注冊在中引用的的組件后其下的子組件都可不用注冊組件直接使用。使用起來很簡單。 vux vux讀作[v’ju:z]。它是主要用于移動端的基于weui和vue的ui組件庫。看git上作者的描述很霸氣。一種愛用不用的感覺。的pc端vue的ui框架有...

happyfish 2019-08-23 12:01 評論0 收藏0
利用vue制作在線涂鴉板

摘要：撤銷清空等操作撤銷前進清空清空前后數據恢復到默認數據地址查看代碼效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API簡介調用方法 getImageData() 返回ImageData對象，該對象為畫布上指定的矩形復制像素數據 putImageData() 把圖像數據（從指定的 Imag...

nemo 2019-08-20 13:29 評論0 收藏0
前端常用插件、工具類庫匯總（上）

摘要：函數庫動畫庫動畫庫，也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析，驗證，操作和顯示日期和時間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在開發中，我們經常會將一些常用的代碼塊、功能塊進行封裝，...

txgcwm 2019-08-23 13:06 評論0 收藏0
Canvas畫板---手機上也可以用的畫板

摘要：方法可以獲取到上下文二制作畫板畫板功能可以繪制不同顏色和粗細的線條，畫板上有橡皮擦功能，一鍵清除功能，下載功能。我們可以用來監聽三種狀態。學習制作畫板之前，我們先來了解一下canvas標簽一.canvas標簽 1.canvas標簽與img標簽相似，但是canvas標簽是一個閉合標簽，并且沒有src alt屬性2.canvas標簽有兩個屬性，width，height。我們在頁面上用c...

oogh 2019-08-22 13:51 評論0 收藏0