① 求助大神~~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获得宽度