① 求助大神~~js/JQUERY可以獲取到canvas裡面圖形的屬性嗎比如圓的半徑。
肯定可以啊，不過前提是你要先做好空間建模，就是二維圖形的原始坐標內
然後持續遍歷，具體的容DEMO你可以看看ge1doot的一些實例
如果你說通過演算法就要通過逐行尋找特徵點，然後循環通過X軸和Y軸的六個正向像素點找到最遠的X或者Y坐標，這樣你就得到一個角度為已知的能過中心線的點，剩下的就通過投影到過圓心的線來計算出直徑了
② html canvas標簽寬度和css寬度的區別
如果此時我在canvas上畫一個圓，但是在瀏覽器上看到的效果卻是個扁平的圓。為什麼？
canvas就像一張圖片，如上面的例子就是一張300*300的圖片，當你通過css設置寬度和高度時，就相當於你對一個圖片進行了拉伸處理，如果設置的寬高比例和canvas本來的寬高比例不同鎮毀的話，就會出現變形的情況。
因為通過css設置寬高只相畝禪當於對canvas進行縮放操作；所以我們可以通過js來修改canvas標簽上的屬性來達到我們想要的效果。
舉迅旅塵個栗子：
刷新瀏覽器，正圓又回來了，大功告成~
③ js canvas操作圖片
// canvas工具類
// 畫圖片 參數：圖片地址 x坐標 y坐標 寬 高 回大行調函數
// 回調函數：如果傳了回調函數會培悉返回圖片的dom 第二個參數為next-不執行不會往下走
// next可穿繪制圖片的寬度和高度-不傳為默認傳的寬度和高度,都不傳為默認的圖片寬高
可以製作類似微信為頭像添加黨徽的功能，案例在下方
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input id="inputFile" accept="image/*" type="file" />
<input id="inputFile2" accept="image/*" type="file" />
<div>
<canvas id="mycanvas"></canvas>
</div>
<script src="./utilityClass.js"></script>
<script type="text/javascript">
const color = new ColorProcessing('#46a6ff')
console.log(color)
const canvasHandler = new CanvasHandler('#mycanvas')
const fileHandler = new FileHandler()
inputFile.addEventListener('change', async function () {
const imgArr = await fileHandler.fileToBase64(this.files)
canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) => {
let width = info.width
配仿乎 let height = info.height / (width / 200)
canvasHandler.canvas.width = 200
canvasHandler.canvas.height = height
next(200, height)
})
})
inputFile2.addEventListener('change',async function () {
const imgArr = await fileHandler.fileToBase64(this.files)
canvasHandler.drawImage(imgArr[0], 0, 0, 0, 0, (info, next) => {
let height = info.height
let width = info.width / (height / mycanvas.height)
next(width, canvasHandler.canvas.height)
})
})
</script>
</body>
</html>
④ html5 Canvas 如何自適應屏幕大小
用JS調制局褲屏幕大小。
⑤ 在JS中獲取canvas，然後設置寬度，怎麼會出現這種情況[第一個百度提問]
沒報錯啊？？？
你是不是把JavaScript代碼寫到canvas標簽前面了，如果寫在專前面要這樣寫屬，如下，寫在canvas標簽的後面就無所謂了
<!DOCTYPEhtml>
<html>
<head>
<title>在JS中獲取canvas，然後設置寬度，怎麼會出現這種情況[第一個網路提問]</title>
<metacharset="UTF-8"/>
<script>
window.onload=function(){
varmyCanvas=document.querySelector('.rain');
varw=window.innerWidth;
myCanvas.width=w;
//console.log(window.innerWidth);
}
</script>
</head>
<body>
<canvasid="myCanvas"class="rain"></canvas>
</body>
</html>
⑥ 如何用js動態設置canvas的寬和高
<悉睜canvas id="敗洞test" width="400px" height="300px" style="background-color:black"睜枯歲></canvas>
⑦ ThreeJS canvas畫布自適應的原理
在窗口變化時缺盯，如果不做自適應，立方體的邊界會出現鋸齒，這就是點陣圖被css拉伸後失真導致的，默認canvas 畫布的尺寸只有300*150。
因此，我們需要用canvas 畫布的像素尺寸自適應窗口。
canvas 的行內屬性width、height與橘褲css的width、height屬性差別
我們可以使用css設置設置canvas元素的像素的寬度和高度，但是我們在使用坐標系進行繪圖時，使用的坐標系是通過canvs行內屬性設置的width和height，默認為300x150；也就是如果沒有設置行內的width 和 height屬性，使用canvasAPI進行繪圖時整個canvs的坐標系在可見范圍內是300x150，並不是圓扮簡css設置的像素尺寸。
Three載入模型常用的方法-判斷窗口是否變化，更新canvas尺寸，解決模型鋸齒的問題。
當canvas 畫布的尺寸變化了，相機視口的寬高比也需要同步調整。
當相機視口的寬高比變了，相機的透視投影矩陣也會隨之改變，因此我們需要使用camera.updateProjectionMatrix() 方法更新透視投影矩陣。
這樣我們拖拽瀏覽器的邊界，縮放瀏覽器的時候，就可以看到canvas 畫布自適應瀏覽器的尺寸了。
渲染尺寸改變時 重置相機視口的寬高比，更新透視頭一個矩陣。解決模型變形的問題。
⑧ canvas屬性方法整理
整理了一些有關canvas的屬性（ 』 - 』 * )
canvas畫布
用於繪制圖像，本身不具備繪制能力，需要通過腳本來完成繪畫，通常這個腳本就是javascript
canvas的默認寬高為300*150，不能通過css或行內樣式修改它的寬高，它有自己的寬高屬性
canvas是一個html元素，通過js來執行繪制
getContext()是用來獲取canvas上下文渲染環境和繪畫功能的方法,目前只有一個參數：'2d'，代表返回一個2d的繪制環境，將來有可能3d，但是目前不支持
它可以做什麼？
html5小游戲
繪制圖片，圖標，圖表，曲線圖等等，例如地圖上的熱力圖等等
以及各種酷炫的動畫效果都可以通過canvas來完成(可以了解一下WEBGL<http://www.hewebgl.com/>)
畫布柵格
通常畫布的一個格子就代表canvas中元素的一像素，柵格的左上角為起點，坐標0, 0，所有位置都相對於原點定位，
使用：
var canvas = document.gteElementById('canvas');
var context = canvas.getContext('2d'); // 環境准備歷兄好，調用context的方法屬性繪制即可
屬性及方法
beginPath()
新開始一條路徑，繪制方法被指向新路徑
closePath()
閉合當前路徑，讓繪制命令重迅尺新指向上下文
stroke()
通過線條來繪制圖像輪廓
fill()
通過填充路徑的內容區域生成實心圖形
moveTo(x, y)
描述起點坐標
lineTo(x, y)
描述終點坐標
rect(x, y, width, height)
繪制矩形x,y為繪制的起點坐標，width和height為要繪制矩形的寬高，無需加px
需要配和stroke繪制帶邊框的矩形，或者fill繪制實心矩形
strokeRect(x, y. width, height)
參數同上，繪制邊框矩形
fillRect(x,y,width,height)
參數同上，繪制填充矩形
clearRect(x,y,width,height)
清除指定區域矩形,會留下一塊白色矩形區域
arc(x,y,r,sangle,eangle,counterclockwise)
圓弧
x,y為繪制圓的圓心坐標
r為圓的半徑
sangle,eangle為圓的起始角度和結束角度
counterclockwise，可選參數，表示繪制圓是順時針還是逆時針，true為逆時針
strokeStyle
描邊的顏色
fillStyle
填充的顏色
shadowColor
陰影顏色
shadowBlur
畝爛高 陰影模糊級別
shadowOffsetX
陰影水平偏移量
shadowOffsetY
陰影垂直偏移量
lineCap
設置線條兩端結束位置的形狀
butt默認
round圓形帽
square正方形
lineJoin
設置線條與線條接合處的樣式
miter (默認)， 通過延伸相連部分的外邊緣，使其相交於一點，形成一個額外的菱形區域。
round 通過填充一個額外的，圓心在相連部分末端的扇形，繪制拐角的形狀。 圓角的半徑是線段的寬度。
bevel 在相連部分的末端填充一個額外的以三角形為底的區域， 每個部分都有各自獨立的矩形拐角。
lineWidth
線條寬度，以像素計算，沒有px
rotate(angle)
旋轉
角度轉弧度公式
deg乘以Math.PI/180
deg為要繪制的角度
Math.PI為圓周率，也就是180度，但是它為一個浮點數，即使除以180也不能忽略它的小數
translate(x, y)
移動原點
將一個坐標原點向x,y正方向移動，如果坐標原點不在原來的位置，則以新的位置加上要移動的位置
scale(x, y)
縮放x軸和y軸分別設置縮放
rotate(x, y)
旋轉
凡是牽扯到度數，都用公式deg乘以Math.PI/180來計算
arcTo(x1,y1,x2,y2,r)
畫圓角，一般兩個直線相交的地方，用此方法繪製成圓弧，x1,y1指圓弧開始的x坐標和y坐標，x2,y2指圓弧結束的x和y坐標，r指半徑
setLineDash/lineDashOffset/getLineDash
繪制虛線
setLineDash([實線長度, 間隙長度])方法接受一個數組，來指定線段與間隙的交替
lineDashOffset設置起始偏移量
getLineDash()返回當前虛線的樣式，為一個數組
fillText(text, x, y [, maxWidth])
繪制填充文本
text文本
x,y指定的坐標
maxWidth最大寬度，可選
strokeText(text, x, y [, maxWidth])
繪制文本邊框
text文本
x,y指定坐標
maxWidth最大寬度，可選
font
文本樣式
和css設置字體相似，復合設置
例如：context.font='100px sans-serif';
textAlign/textBaseline/direction
textAlign(文本對齊選項): start|end|left|right|center
textBaseline(基線對齊選項)：top|hanging|middle|alphabetic|ideographic|bottom
direction(文本方向)：ltr|rtl|inherit
繪制圖片
drawImage(imgElement,x,y,width,height)
x,y繪制圖片的起始坐標
imgElement 要繪制的圖片元素,或者為一個canvas的引用
width,height,設置圖片的寬高
裁剪圖片
drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)
imgElement 要繪制的圖片元素,或者為一個canvas的引用
sx, sy (可選)要裁剪的起始位置
swidth, sheight (可選)要裁剪區域的寬高
x,y放置原始圖片的位置
width,height (可選)原始圖片的寬高
為了不失真，一般嘗試讓swidth, sheight和width、height相等，x,y原點，去改變sx,sy(裁剪的起始位置)即可，實際根據需求來定
save()/restore()
save() 保存狀態，保存在棧中，類似於數組的push
restore() 恢復狀態，類似於數組的pop
clip()
裁剪路徑
把一個路徑之外的內容進行裁剪，只保留路徑本身內部的內容
用於控制動畫的常用方法
setInterval()
setTimeout()
requestAnimationFrame()
只執行一次，一般通過遞歸調用來完成動畫製作
接受一個回調函數，專門提供給動畫的api，默認刷新幀率為一秒60次，優於以上兩個方法，比如頁面未激活狀態下回自動暫停，節省cpu的開銷
cancelAnimationFrame() 用來停止此方法的執行
可能有不足的地方 歡迎大家補充(•̀⌄•́)
⑨ javascript 如何獲取div中的label標簽的寬度
可以用兩種方法 第一個用jquery 獲取div 可以查看幫助文檔
js 獲取 var width=document.getElementById("div").style.width獲得寬度