目录
一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么？
二、如何设置一幅canvas图中某个颜色透明？
三、H5 canvas中strokeRect参数如果是小数，如何处理？
四、H5 Canvas中如何画圆角矩形框？
五、js中取某个颜色的相反颜色如何取，比如黑色对白色
六、如何通过js编程设改变box-shadow属性
七、不允许鼠标选择Label文本
八、设置Label为Disabled
一、HTML中Canvas画图strokeStyle 和 fillStyle 的区别是什么？
在HTML的Canvas元素中，strokeStyle和fillStyle是用于设置绘图的线条颜色和填充颜色的属性。
-
strokeStyle：用于设置绘图的线条颜色。它可以接受各种颜色值，比如CSS颜色名称、RGB、RGBA、十六进制等。默认值为"#000000"（黑色）。
-
fillStyle：用于设置绘图的填充颜色。它也可以接受各种颜色值，同样可以使用CSS颜色名称、RGB、RGBA、十六进制等。默认值为"#000000"（黑色）。
区别：
-
strokeStyle用于设置绘制图形边框的颜色，而fillStyle用于设置填充图形内部的颜色。
-
当使用绘图方法绘制一个形状时，可以使用strokeStyle设置形状的边框颜色，使用fillStyle设置形状的填充颜色。如果只设置了strokeStyle而没有设置fillStyle，那么形状将只有边框而没有填充颜色。如果只设置了fillStyle而没有设置strokeStyle，则形状将只有填充颜色而没有边框。
-
strokeStyle和fillStyle可以接受相同的颜色值类型，比如CSS颜色名称、RGB、RGBA、十六进制，所以可以使用相同的颜色值来设置边框和填充颜色。但是也可以使用不同的颜色值来设置边框和填充颜色，以达到不同的效果。
总结：strokeStyle用于设置线条颜色，fillStyle用于设置填充颜色，它们是Canvas绘图中设置边框和填充的重要属性。通过设置不同的颜色值，可以实现不同的绘图效果。
二、如何设置一幅canvas图中某个颜色透明？
要设置Canvas图中某个颜色为透明，可以通过以下步骤：
- 获取Canvas的上下文对象：使用getContext方法获取Canvas的上下文对象，例如：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
- 使用getImageData方法获取Canvas上的像素数据：使用getImageData方法获取Canvas上指定区域的像素数据。需要指定图像数据的起始点和宽度、高度。例如，获取整个Canvas的像素数据：
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
- 遍历像素数据并修改颜色值：通过遍历像素数据，找到要设置为透明的颜色，并将其对应的颜色值修改为透明的颜色值（RGBA中的A值为0）。像素数据是一个一维数组，每四个元素表示一个像素的RGBA值。例如，将颜色值为红色的像素设置为透明：
for (var i = 0; i < imageData.data.length; i += 4) {
var red = imageData.data[i];
var green = imageData.data[i + 1];
var blue = imageData.data[i + 2];
if (red === 255 && green === 0 && blue === 0) { // 判断颜色是否为红色
imageData.data[i + 3] = 0; // 设置透明度为0
}
}
- 将修改后的像素数据重新绘制到Canvas上：使用putImageData方法将修改后的像素数据重新绘制到Canvas上。例如：
ctx.putImageData(imageData, 0, 0);
这样就可以将Canvas图中指定的颜色设置为透明。需要注意的是，Canvas的像素数据是以左上角为原点，水平向右为x轴正方向，垂直向下为y轴正方向。同时，Canvas中的图像数据是存储在图像数据对象ImageData中的，通过修改ImageData的像素数据可以实现对Canvas图的修改。
三、H5 canvas中strokeRect参数如果是小数，如何处理？
在HTML5的Canvas中，strokeRect方法用于绘制一个矩形的边框。它接受四个参数，分别是矩形的左上角x坐标、左上角y坐标、宽度和高度。
如果传入的参数是小数，Canvas会将小数值向下取整，然后进行绘制。也就是说，小数值会被自动转换为整数。
例如，如果将strokeRect的参数设置为小数值：
ctx.strokeRect(10.5, 20.7, 30.9, 40.2);
Canvas会将参数转换为整数值：
ctx.strokeRect(10, 20, 30, 40);
所以无论参数是小数还是整数，Canvas都会将其转换为整数值进行绘制。如果需要绘制精确的小数值矩形，可以通过使用其他方法，如lineTo和stroke来手动绘制。
四、H5 Canvas中如何画圆角矩形框？
在HTML5的Canvas中，并没有直接的命令可以绘制圆角矩形框。但是可以通过一些方法来实现绘制圆角矩形框的效果：
-
使用arcTo方法：arcTo方法可以绘制一段弧线，通过组合多个弧线可以实现圆角矩形。具体步骤如下：
a. 使用moveTo方法将画笔移动到矩形的起始点。
b. 使用lineTo方法和arcTo方法绘制四条边和四个圆角。
c. 使用stroke或fill方法绘制矩形。下面是一个绘制圆角矩形的示例：
function drawRoundRect(ctx, x, y, width, height, radius) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.arcTo(x + width, y, x + width, y + radius, radius); ctx.lineTo(x + width, y + height - radius); ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius); ctx.lineTo(x + radius, y + height); ctx.arcTo(x, y + height, x, y + height - radius, radius); ctx.lineTo(x, y + radius); ctx.arcTo(x, y, x + radius, y, radius); ctx.stroke(); } -
使用quadraticCurveTo方法：quadraticCurveTo方法可以绘制二次贝塞尔曲线，通过组合多个二次贝塞尔曲线也可以实现圆角矩形。具体步骤如下：
a. 使用moveTo方法将画笔移动到矩形的起始点。
b. 使用quadraticCurveTo方法绘制四条边的圆角弧线。
c. 使用stroke或fill方法绘制矩形。下面是一个使用quadraticCurveTo方法绘制圆角矩形的示例：
function drawRoundRect(ctx, x, y, width, height, radius) { ctx.beginPath(); ctx.moveTo(x + radius, y); ctx.lineTo(x + width - radius, y); ctx.quadraticCurveTo(x + width, y, x + width, y + radius); ctx.lineTo(x + width, y + height - radius); ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); ctx.lineTo(x + radius, y + height); ctx.quadraticCurveTo(x, y + height, x, y + height - radius); ctx.lineTo(x, y + radius); ctx.quadraticCurveTo(x, y, x + radius, y); ctx.stroke(); }
这两种方法都可以用来绘制圆角矩形框。具体选择哪种方法取决于个人的需求和偏好。
五、js中取某个颜色的相反颜色如何取，比如黑色对白色
要获取某个颜色的相反颜色，可以使用一些数学运算和颜色空间的知识来实现。
对于 RGB 颜色空间，可以通过以下步骤来获取一个颜色的相反颜色：
-
将颜色值转换为 RGB 分量：将颜色值转换为红、绿、蓝三个分量的值。例如，对于十六进制颜色值 "#000000"（黑色），红、绿、蓝分量的值分别为 0、0、0。
-
计算相反颜色的 RGB 分量：将每个分量的值与最大值（255）相减，得到相反颜色的 RGB 分量值。例如，对于黑色，相反颜色的红、绿、蓝分量的值分别为 255、255、255。
-
将相反颜色的 RGB 分量值组合为颜色值：将计算得到的相反颜色的红、绿、蓝分量值转换为十六进制，并组合为颜色值。例如，相反颜色为 "#FFFFFF"（白色）。
以下是一个 JavaScript 函数，用于获取某个颜色的相反颜色：
function getInverseColor(color) {
// 去除颜色值中的 # 号
color = color.replace("#", "");
// 将颜色值转换为 RGB 分量
var red = parseInt(color.substr(0, 2), 16);
var green = parseInt(color.substr(2, 2), 16);
var blue = parseInt(color.substr(4, 2), 16);
// 计算相反颜色的 RGB 分量
var inverseRed = 255 - red;
var inverseGreen = 255 - green;
var inverseBlue = 255 - blue;
// 将相反颜色的 RGB 分量值组合为颜色值
var inverseColor = "#" + (inverseRed.toString(16)).padStart(2, "0") + (inverseGreen.toString(16)).padStart(2, "0") + (inverseBlue.toString(16)).padStart(2, "0");
return inverseColor;
}
使用示例：
var color = "#000000"; // 黑色
var inverseColor = getInverseColor(color); // 获取黑色的相反颜色
console.log(inverseColor); // 输出 "#FFFFFF"（白色）
通过调用 getInverseColor 函数并传入颜色值，即可获取该颜色的相反颜色。请注意，这个函数假设输入的颜色值是符合 RGB 格式的，并且不包含透明度。如果颜色值有其他格式或包含透明度，请根据需要进行适当的修改。
六、如何通过js编程设改变box-shadow属性
可以通过 JavaScript 来动态改变元素的 box-shadow 属性，从而实现改变元素阴影的效果。以下是一个示例：
HTML 结构：
<div id="myElement">这是一个带阴影的元素</div>
<button onclick="changeBoxShadow()">改变阴影</button>
CSS 样式：
#myElement {
width: 200px;
height: 200px;
background-color: #f1f1f1;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
JavaScript 代码：
function changeBoxShadow() {
var myElement = document.getElementById("myElement");
myElement.style.boxShadow = "5px 5px 10px rgba(0, 0, 0, 0.3)";
}
在上述代码中，我们通过 JavaScript 创建了一个 changeBoxShadow 函数，该函数会在点击按钮时被调用。在该函数内部，我们获取到 myElement 元素的引用，并将其 box-shadow 属性设置为新的阴影样式。
通过点击按钮，就可以调用 changeBoxShadow 函数，从而改变元素的阴影效果。在示例中，我们将阴影样式从原来的 2px 2px 5px rgba(0, 0, 0, 0.5) 改变为 5px 5px 10px rgba(0, 0, 0, 0.3)。
你可以根据实际需求修改阴影样式，包括阴影的偏移量、模糊半径、颜色以及透明度等。通过改变 box-shadow 属性，可以实现动态改变元素阴影的效果。
七、不允许鼠标选择Label文本
.label1 {
display: block;
width: 130px;
/* border: 1px solid red; */
text-align: right;
margin-left: 70px;
/* user-select: none; 不允许鼠标选择文字*/
}八、设置Label为Disabled
在HTML中，<label> 元素本身并没有 disabled 属性。disabled 属性通常适用于表单元素（如 <input>、<select> 和 <textarea>），用于禁用用户对该元素的交互。
如果你想禁用一个 <label> 元素，可以使用 CSS 来模拟禁用的外观。例如，你可以使用 pointer-events: none; 来阻止用户与 <label> 元素进行交互，并灰化文本颜色等来表示禁用状态。以下是一个示例：
<label id="myLabel" for="myInput">我是一个标签</label>
#myLabel {
color: #999;
pointer-events: none;
}
在上述示例中，pointer-events: none; 样式将阻止用户与 <label> 元素进行交互，使其看起来像禁用状态。通过设置 color 为灰色，进一步强调禁用的外观。文章来源：https://www.toymoban.com/news/detail-629087.html
请注意，这只是一种模拟效果，实际上并不会禁用 <label> 元素本身。如果需要真正禁用用户与 <label> 元素的交互，可以考虑使用其他元素或 JavaScript 来实现所需的禁用状态。文章来源地址https://www.toymoban.com/news/detail-629087.html
到了这里，关于HTML5中Canvas学习笔记：Canvas的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
