1. 首页
  2. 作者
  3. System
html canvas怎么在图片上面加文字
System
2024-08-09
所有,html

在HTML canvas上添加文字可以通过以下步骤完成：

  1. 首先，创建一个canvas元素并设定尺寸。
  2. 然后，使用JavaScript获取canvas的2D上下文。
  3. 使用fillText()方法在canvas上绘制文本。

以下是一个简单的示例代码：




<!DOCTYPE html>
<html>
<body>
 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
 
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
 
// 加载图片
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0); // 绘制图片
    ctx.font = "16px Arial"; // 设置字体
    ctx.fillStyle = "white"; // 设置字体颜色
    ctx.fillText("在图片上的文字", 10, 50); // 在图片上添加文字
};
img.src = 'path_to_your_image.jpg'; // 替换为你的图片路径
</script>
 
</body>
</html>

确保替换img.src中的'path_to_your_image.jpg'为你的图片路径。fillText()的第一个参数是你想要添加的文本，第二个和第三个参数分别是文本的x和y坐标，这些坐标指定了文本的起始位置。

- 阅读更多 -
基于 HTML+ECharts 实现智慧安防数据可视化大屏
System
2024-08-09
所有,html

以下是一个基于HTML和ECharts实现的智慧安防数据可视化大屏的简化示例代码：




<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('container'));
 
        var option = {
            // 此处填入ECharts配置项
        };
 
        myChart.setOption(option);
 
        // 自适应窗口大小
        window.onresize = function() {
            myChart.resize();
        };
    </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，其中包含了一个用于渲染ECharts图表的div元素。我们通过echarts.init方法初始化ECharts实例，并通过setOption方法设置图表配置项。最后，我们添加了一个窗口大小变化的监听器，以确保图表可以响应窗口大小的变化。

请注意，实际的ECharts配置项需要根据实际的数据和可视化需求来设置。这个示例仅展示了如何创建基础的ECharts图表容器和基本的ECharts初始化代码。

- 阅读更多 -
vue动态添加dom元素、css3 animation 动画 实现字体上升并逐渐消失效果
System
2024-08-09
所有,css3

在Vue中，您可以使用v-if或v-show来动态添加或删除DOM元素，并利用CSS3的animation属性来实现字体上升并渐变消失的效果。以下是一个简单的示例：




<template>
  <div id="app">
    <button @click="show = !show">Toggle Animation</button>
    <transition name="fade-up">
      <div v-if="show" class="animated-text">Hello World!</div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      show: true
    };
  }
};
</script>
 
<style>
.animated-text {
  animation: up-and-fade 3s infinite;
}
 
@keyframes up-and-fade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px);
  }
}
 
.fade-up-enter-active, .fade-up-leave-active {
  transition: opacity 0.5s, transform 0.5s;
}
 
.fade-up-enter, .fade-up-leave-to /* .fade-up-leave-active for <2.1.8 */ {
  opacity: 0;
  transform: translateY(20px);
}
</style>

在这个示例中，我们定义了一个animated-text类，它使用CSS3的animation属性来创建上升并渐变消失的动画效果。通过Vue的<transition>组件包裹动态内容，可以在元素显示与隐藏时应用相应的过渡效果。通过改变show数据属性的值，可以控制文本的显示和隐藏。

- 阅读更多 -
CSS选择器优先级，及权重 计算规则
System
2024-08-09
所有,css3

CSS选择器的优先级是由选择器的组成部分确定的，主要有四个层次：元素标签、类选择器、ID选择器和内联样式。权重是根据这四个层次的不同类型进行计算的。

计算规则如下：

  1. 对于每个选择器，统计其中的id选择器的数量。
  2. 统计其中的其他选择器（包括类选择器、属性选择器等）的数量。
  3. 如果选择器中包含了!important规则，则其权重会被提高到最高。
  4. 最后计算内联样式，它的权重最高，为1000。

权重的计算方法是：将所有的id选择器的数量按照10的幂进行计算（每多一个id选择器，就乘以10），然后将其他选择器的数量相加。最后，将内联样式的1000添加到最终结果中。

例如，考虑以下选择器：




p#content .list-item span

这个选择器包含一个id选择器(#content)，一个类选择器(.list-item)和一个元素标签(span)，没有使用!important。计算其权重如下：

  1. 计算id选择器的数量：1
  2. 计算其他选择器的数量：1（类选择器）+ 1（元素标签）= 2
  3. 内联样式的权重不考虑，因为这个选择器不是内联样式。
  4. 最终权重计算为：100 + 2 = 102

如果另一个选择器是：




div#content .list-item span

这个选择器也是包含一个id选择器，一个类选择器和一个元素标签，但是因为id选择器更具体，所以它的权重会更高：100 + 10 + 2 = 112。

如果使用!important，则其优先级会高于所有其他规则，例如：




p#content .list-item span { color: red !important; }

这条规则即使计算出的权重很高，也会被!important所覆盖，使得它具有最高的优先级。

- 阅读更多 -
flex弹性布局详细介绍
System
2024-08-09
所有,css3

Flexbox（弹性布局模块）是CSS3新引入的一种布局方式，它能够提供一种更简单的方式来设计弹性的布局，无论是列或者是行，并且可以很容易的做到当内容增加或减少时，布局能够适应这种变化。

Flexbox布局的主要特点：

  1. 弹性布局容器的主轴（main axis）和交叉轴（cross axis）。
  2. 容器内的每个子元素称作项目（item）。
  3. 主轴方向上的项目排列称为主轴对齐（main-axis alignment）。
  4. 交叉轴方向上的项目排列称为交叉轴对齐（cross-axis alignment）。
  5. 容器可以设置为单行或多行。

Flexbox布局的属性：

  1. display: 设置或检索布局为flex或inline-flex。
  2. flex-direction: 设置主轴方向。
  3. flex-wrap: 设置是否换行。
  4. flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap。
  5. justify-content: 设置主轴上的对齐方式。
  6. align-items: 设置交叉轴上的对齐方式。
  7. align-self: 项目自身在交叉轴的对齐方式。
  8. flex-grow: 项目的放大比例。
  9. flex-shrink: 项目的缩小比例。
  10. flex-basis: 项目的初始大小。
  11. flex: 复合属性，相当于同时设置了flex-grow, flex-shrink和flex-basis。
  12. order: 项目的排列顺序。

以下是一个简单的Flexbox布局示例：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 使用弹性布局 */
  flex-direction: row; /* 主轴方向为水平 */
  justify-content: center; /* 主轴上水平居中 */
  align-items: center; /* 交叉轴上垂直居中 */
}
 
.flex-item {
  width: 50px; /* 项目宽度 */
  height: 50px; /* 项目高度 */
  margin: 5px; /* 项目间距 */
}

这个例子中，.flex-container 类使得div成为一个弹性容器，.flex-item 类应用于容器内的每个子元素。这个布局会在容器中水平居中并垂直居中所有子元素。

- 阅读更多 -
CSS3实现一个粒子动效的按钮
System
2024-08-09
所有,css3

以下是一个使用CSS3实现的粒子动效按钮的示例代码：

HTML:




<div class="particles-button">
  <button class="btn">点击我</button>
</div>

CSS:




.particles-button {
  position: relative;
  width: 150px;
  height: 50px;
}
 
.btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
 
.particles-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff6e7f, #bfe9ff);
  z-index: 1;
  transition: opacity 0.5s ease;
  opacity: 0;
}
 
.particles-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 2;
  transition: background-size 0.5s ease;
  background-image: radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%);
  background-size: 10% 10%, 20% 20%;
  background-position: 0 0, 10px 10px;
}
 
.btn:hover + .particles-button:after {
  opacity: 1;
}
 
.btn:hover + .particles-button:before {
  background-size: 50% 50%, 100% 100%;
}

这段代码使用伪元素 :before 和 :after 来创建按钮的背景和动态效果。当鼠标悬停在按钮上时，这些伪元素的样式通过 CSS 过渡效果发生变化，从而形成粒子动效。

- 阅读更多 -
css 实现圆角渐变色效果
System
2024-08-09
所有,css

要使用CSS实现圆角渐变色效果，你可以使用border-radius属性来设定圆角的半径，然后使用background-image属性配合linear-gradient函数来创建渐变效果。以下是一个简单的例子：




.gradient-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 设置为50%，得到一个完美的圆形 */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

在HTML中，你可以这样使用这个类：




<div class="gradient-circle"></div>

这段代码会创建一个宽高为100像素的圆形div，其边缘是圆角的，并且背景色是从左到右由#ff7e5f到#feb47b的渐变色。

- 阅读更多 -
CSS进阶之形变与动画 ：transform、垂直居中总结、transition动画、animation动画、vertical-align
System
2024-08-09
所有,css



/* 水平居中 */
.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
/* 垂直居中 */
.center-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* 旋转 */
.rotate-90 {
  transform: rotate(90deg);
}
 
/* 动画：在5秒内将元素的透明度从0变为1 */
.fade-in {
  animation: fadeIn 5s forwards;
}
 
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 过渡效果：鼠标悬停时，元素背景色从当前颜色到黑色 */
.background-color-transition {
  transition: background-color 0.5s ease-in-out;
}
 
/* 使用flexbox实现水平垂直居中 */
.center-both {
  display: flex;
  align-items: center;
  justify-content: center;
}

这个代码示例展示了如何使用CSS进行形变、垂直居中、动画制作和过渡效果。代码中包含了水平居中、垂直居中、旋转以及动画和过渡的基本用法。

- 阅读更多 -
Vue3+Vite中使用SCSS
System
2024-08-09
所有,css

在Vue 3 + Vite项目中使用SCSS，首先确保你已经安装了相关的依赖。如果没有，可以通过以下命令安装：




npm install -D sass

然后，你可以在Vue组件中这样使用SCSS：

  1. 创建一个.scss文件，例如MyComponent.scss，并写入你的SCSS样式：



/* MyComponent.scss */
.my-component {
  color: blue;
  font-size: 16px;
 
  h1 {
    font-weight: bold;
  }
}
  1. 在Vue组件中引入这个SCSS文件，并在<style>标签中指定lang="scss"：



<template>
  <div class="my-component">
    <h1>Hello, SCSS!</h1>
  </div>
</template>
 
<script>
export default {
  name: 'MyComponent'
  // ...
}
</script>
 
<style lang="scss">
@import './MyComponent.scss';
</style>

确保你的Vite配置文件（vite.config.js或vite.config.ts）支持SCSS：




// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./path/to/variables.scss";`
      }
    }
  }
})

这样，你就可以在Vue 3 + Vite项目中使用SCSS了。

- 阅读更多 -
springboot项目前端ajax 07进阶优化，使用jQuery的ajax
System
2024-08-09
所有,ajax

在Spring Boot项目中，使用jQuery的ajax进行前后端交互，可以优化代码结构，减少重复的代码。以下是一个简化后的jQuery ajax请求示例：




$(document).ready(function() {
    // 当点击按钮时发送请求
    $('#myButton').click(function() {
        $.ajax({
            url: '/api/data', // 后端API接口
            type: 'POST', // 请求类型，根据需要可以是 'GET', 'POST', 'PUT', 'DELETE' 等
            contentType: 'application/json', // 发送信息至服务器时内容编码类型
            data: JSON.stringify({ key: 'value' }), // 将对象转换为JSON字符串作为请求体发送
            dataType: 'json', // 预期服务器返回的数据类型
            success: function(response) {
                // 请求成功后的回调函数
                console.log(response);
            },
            error: function(xhr, status, error) {
                // 请求失败后的回调函数
                console.log(xhr.responseText);
            }
        });
    });
});

这段代码首先确保文档加载完成后绑定点击事件，然后使用jQuery的ajax方法发送异步请求。通过contentType指定请求体的类型，并且使用JSON.stringify将JavaScript对象转换为JSON字符串。dataType用于指定预期的响应数据类型。成功时，在success回调中处理响应数据；失败时，在error回调中处理错误信息。这样的结构更加清晰，并且减少了重复的异步请求代码。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号