Canvas study notes in HTML5: Canvas

Table of contents

1. What is the difference between strokeStyle and fillStyle in Canvas drawing in HTML?

2. How to set a certain color in a canvas to be transparent?

3. If the strokeRect parameter in H5 canvas is a decimal, how to deal with it?

4. How to draw a rounded rectangular frame in H5 Canvas?

5. How to take the opposite color of a certain color in js, such as black to white

6. How to change the box-shadow property through js programming

7. The mouse is not allowed to select the Label text

8. Set Label to Disabled

1. What is the difference between strokeStyle and fillStyle in Canvas drawing in HTML?

In the HTML Canvas element, strokeStyle and fillStyle are attributes used to set the line color and fill color of the drawing.

strokeStyle: Used to set the line color of the drawing. It can accept various color values such as CSS color names, RGB, RGBA, hexadecimal, etc. The default is "#000000" (black).
fillStyle: Used to set the fill color of the drawing. It can also accept various color values, again with CSS color names, RGB, RGBA, hexadecimal, etc. The default is "#000000" (black).

the difference:

strokeStyle is used to set the color for drawing the border of the graph, and fillStyle is used to set the color for filling the inside of the graph.
When drawing a shape using the drawing method, you can use strokeStyle to set the shape's border color and fillStyle to set the shape's fill color. If only strokeStyle is set and fillStyle is not set, then the shape will only have a border and no fill color. If only fillStyle is set and strokeStyle is not set, the shape will only have a fill color and no border.
strokeStyle and fillStyle can accept the same color value type, such as CSS color name, RGB, RGBA, hexadecimal, so you can use the same color value to set border and fill color. But you can also use different color values to set the border and fill colors to achieve different effects.

Summary: strokeStyle is used to set the line color, and fillStyle is used to set the fill color, which are important attributes for setting borders and fills in Canvas drawing. By setting different color values, different drawing effects can be achieved.

2. How to set a certain color in a canvas to be transparent?

To set a certain color in the Canvas to be transparent, you can follow the steps below:

Get the context object of Canvas: Use the getContext method to get the context object of Canvas, for example:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

Use the getImageData method to get the pixel data on the Canvas: use the getImageData method to get the pixel data of the specified area on the Canvas. The starting point, width and height of the image data need to be specified. For example, to get the pixel data of the entire Canvas:

var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Traverse the pixel data and modify the color value: find the color to be set as transparent by traversing the pixel data, and modify its corresponding color value to a transparent color value (A value in RGBA is 0). Pixel data is a one-dimensional array, and every four elements represent the RGBA value of a pixel. For example, to set a pixel with a red color value to be transparent:

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
  }
}

Redraw the modified pixel data to the Canvas: use the putImageData method to redraw the modified pixel data to the Canvas. For example:

ctx.putImageData(imageData, 0, 0);

This sets the specified color in the Canvas to be transparent. It should be noted that the pixel data of Canvas is based on the upper left corner as the origin, the horizontal to the right is the positive direction of the x-axis, and the vertical downward is the positive direction of the y-axis. At the same time, the image data in the Canvas is stored in the image data object ImageData, and the Canvas graph can be modified by modifying the pixel data of the ImageData.

3. If the strokeRect parameter in H5 canvas is a decimal, how to deal with it?

In HTML5 Canvas, the strokeRect method is used to draw a rectangular border. It accepts four parameters, which are the x-coordinate of the upper-left corner of the rectangle, the y-coordinate of the upper-left corner, width, and height.

If the parameter passed in is a decimal, Canvas will round down the decimal value and then draw it. That is, decimal values are automatically converted to integers.

For example, if the strokeRect parameter is set to a fractional value:

ctx.strokeRect(10.5, 20.7, 30.9, 40.2);

Canvas will convert the parameter to an integer value:

ctx.strokeRect(10, 20, 30, 40);

So whether the parameter is a decimal or an integer, Canvas will convert it to an integer value for drawing. If you need to draw a precise fractional value rectangle, you can draw it manually by using other methods, such as lineTo and stroke.

4. How to draw a rounded rectangular frame in H5 Canvas?

In HTML5 Canvas, there is no direct command to draw a rounded rectangle. But there are some ways to achieve the effect of drawing a rounded rectangle:

Use the arcTo method: the arcTo method can draw an arc, and a rounded rectangle can be realized by combining multiple arcs. The specific steps are as follows:
a. Use the moveTo method to move the brush to the starting point of the rectangle.
b. Use the lineTo method and the arcTo method to draw four sides and four rounded corners.
c. Use the stroke or fill method to draw the rectangle.

Here's an example that draws a rounded rectangle:

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();
}

Use the quadraticCurveTo method: The quadraticCurveTo method can draw a quadratic Bezier curve, and a rounded rectangle can also be realized by combining multiple quadratic Bezier curves. The specific steps are as follows:
a. Use the moveTo method to move the brush to the starting point of the rectangle.
b. Use the quadraticCurveTo method to draw a rounded arc with four sides.
c. Use the stroke or fill method to draw the rectangle.

Here is an example of drawing a rounded rectangle using the quadraticCurveTo method:

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();
}

Both methods can be used to draw rounded rectangle boxes. Which method you choose depends on your individual needs and preferences.

5. How to take the opposite color of a certain color in js, such as black to white

To get the opposite of a color, you can do it with some math and knowledge of color spaces.

For the RGB color space, the opposite of a color can be obtained by doing the following:

Convert color values to RGB components: Convert color values to red, green, and blue three-component values. For example, for the hexadecimal color value "#000000" (black), the red, green, and blue components have values 0, 0, and 0, respectively.
Calculate the RGB components of the opposite color: Subtract the value of each component from the maximum value (255) to obtain the RGB component values of the opposite color. For example, for black, the red, green, and blue components of the opposite color have values of 255, 255, and 255, respectively.
Combine the RGB component values of opposite colors into a color value: Convert the calculated red, green and blue component values of opposite colors into hexadecimal and combine them into a color value. For example, the opposite color is "#FFFFFF" (white).

Here's a JavaScript function to get the opposite of a color:

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;
}

Example usage:

var color = "#000000"; // 黑色
var inverseColor = getInverseColor(color); // 获取黑色的相反颜色
console.log(inverseColor); // 输出 "#FFFFFF"（白色）

getInverseColor You can get the inverse of that color by calling the function and passing in a color value. Note that this function assumes that the input color values are in RGB format and do not contain transparency. If the color value has another format or contains transparency, modify it appropriately as needed.

6. How to change the box-shadow property through js programming

You can dynamically change the properties of the element through JavaScript box-shadow , so as to achieve the effect of changing the shadow of the element. Here is an example:

HTML structure:

<div id="myElement">这是一个带阴影的元素</div>
<button onclick="changeBoxShadow()">改变阴影</button>

CSS styles:

#myElement {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

JavaScript code:

function changeBoxShadow() {
  var myElement = document.getElementById("myElement");
  myElement.style.boxShadow = "5px 5px 10px rgba(0, 0, 0, 0.3)";
}

In the above code, we created a changeBoxShadow function via JavaScript that will be called when the button is clicked. Inside the function, we get myElement a reference to the element and box-shadow set its property to the new shadow style.

By clicking the button, the function can be called changeBoxShadow to change the shadow effect of the element. In the example we 2px 2px 5px rgba(0, 0, 0, 0.5) change the shadow style from 5px 5px 10px rgba(0, 0, 0, 0.3).

You can modify the shadow style according to actual needs, including shadow offset, blur radius, color and transparency, etc. By changing box-shadow the properties, the effect of dynamically changing the shadow of the element can be achieved.

7. The mouse is not allowed to select the Label text

.label1 {
            display: block;
            width: 130px;
            /* border: 1px solid red; */
            text-align: right;
            margin-left: 70px;
            /* user-select: none;   不允许鼠标选择文字*/
        }

8. Set Label to Disabled

In HTML, the <label> element itself has no disabled attributes. disabled Attributes are often applied to form elements (such as <input>, , <select> and <textarea>) to disable user interaction with that element.

If you want to disable an <label> element, you can use CSS to simulate the disabled look. For example, you can use pointer-events: none; to prevent the user <label> from interacting with the element, and gray out the text color, etc. to indicate a disabled state. Here is an example:

<label id="myLabel" for="myInput">我是一个标签</label>

#myLabel {
  color: #999;
  pointer-events: none;
}

In the example above, pointer-events: none; the styling would prevent the user <label> from interacting with the element, making it appear disabled. color Further emphasize the disabled look by setting it to gray.

Note that this is only a simulated effect and does not actually disable <label> the element itself. If you need to actually disable user <label> interaction with an element, consider using other elements or JavaScript to achieve the desired disabled state.