分类前端技术下的文章

前端提高篇：HTML进阶9：canvas画布基本知识操作图形：坐标轴保存恢复，变换，擦除，组合

2024-08-06




<!DOCTYPE html>
<html>
<head>
  <title>Canvas 画布操作图形：坐标轴保存与恢复</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
  <script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
 
    // 绘制一个红色的矩形
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 70, 150, 100);
 
    // 保存当前坐标轴的状态
    ctx.save();
 
    // 进行坐标轴的旋转和平移
    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 4);
 
    // 绘制一个蓝色的矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(0, 0, 150, 100);
 
    // 恢复之前保存的坐标轴状态
    ctx.restore();
 
    // 绘制一个绿色的矩形，此时坐标轴恢复到了之前的状态
    ctx.fillStyle = 'green';
    ctx.fillRect(150, 170, 150, 100);
  </script>
</body>
</html>

这段代码首先在画布上绘制了一个红色的矩形，然后保存了当前的坐标轴状态。接着进行了旋转和平移坐标轴操作，并绘制了一个蓝色的矩形。最后，使用restore()方法恢复了之前保存的坐标轴状态，然后绘制了一个绿色的矩形以验证坐标轴状态的恢复。这个例子展示了如何在操作图形时保存和恢复坐标轴的状态，这对于复杂的绘图操作是非常有用的。

- 阅读更多 -

HTML/JS实现漂亮的时钟效果

System

2024-08-06

所有,html

以下是实现上述时钟效果的核心JavaScript代码：




function updateClock() {
    var now = new Date();
    var ctx = document.getElementById('clock').getContext('2d');
 
    ctx.clearRect(0, 0, 300, 300);
 
    ctx.save();
    ctx.translate(150, 150);
 
    // 绘制表盘
    ctx.beginPath();
    ctx.arc(0, 0, 140, 0, 2 * Math.PI);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 10;
    ctx.stroke();
 
    // 绘制时针分针秒针
    drawHand(ctx, now.getSeconds() * 6, 130); // 秒针
    drawHand(ctx, now.getMinutes() * 6 + now.getSeconds() / 10, 110); // 分针
    drawHand(ctx, now.getHours() * 30 + now.getMinutes() / 2, 90); // 时针
 
    ctx.restore();
}
 
function drawHand(ctx, length, width) {
    ctx.save();
    ctx.beginPath();
    ctx.translate(150, 150);
    ctx.rotate(length * Math.PI / 180);
    ctx.moveTo(-5, 0);
    ctx.lineTo(width, 0);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 7;
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.restore();
}
 
// 初始化时钟
updateClock();
setInterval(updateClock, 1000);

这段代码首先定义了updateClock函数，它会创建一个新的Date对象来获取当前的时间，并使用HTML5 Canvas API来绘制一个简单的时钟。每秒钟调用updateClock函数来更新时钟指针。drawHand函数用于绘制时针、分针和秒针。

- 阅读更多 -

【uniapp】uniapp的App端web-view加载本地html

System

2024-08-06

所有,html

在uniapp中，如果你想在App端使用web-view组件加载本地的HTML文件，你需要先将HTML文件打包到应用资源中，然后通过本地服务器或者直接通过文件路径来加载。

将HTML文件放置在项目的static目录下。
使用web-view组件并通过file协议指定HTML文件的路径。

示例代码：




<template>
  <view>
    <!-- 假设你的HTML文件名为local-page.html，位于static目录下 -->
    <web-view src="file:///android_asset/static/local-page.html"></web-view>
  </view>
</template>

请注意，由于uniapp的web-view组件在App端使用的是Android的WebView，因此路径应该是以file:///android_asset/开头，这表示你的HTML文件应该打包在应用资源中。

如果你的HTML文件是动态生成的，你可能需要先将其内容写入文件系统，然后再通过web-view加载。




// 假设htmlContent是你动态生成的HTML内容
const fs = uni.getFileSystemManager();
const filePath = `${uni.env.USER_DATA_PATH}/local-page.html`;
 
fs.writeFile({
  filePath: filePath,
  data: htmlContent,
  encoding: 'utf8',
  success: function () {
    // 文件写入成功后，更新web-view的src属性
  }
});

在写入文件成功后，更新web-view组件的src属性为刚才写入的文件路径。




<template>
  <view>
    <web-view :src="webViewSrc"></web-view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      webViewSrc: ''
    }
  },
  methods: {
    writeHtmlToLocal(htmlContent) {
      const fs = uni.getFileSystemManager();
      const filePath = `${uni.env.USER_DATA_PATH}/local-page.html`;
 
      fs.writeFile({
        filePath: filePath,
        data: htmlContent,
        encoding: 'utf8',
        success: () => {
          this.webViewSrc = `file:///android_asset/${filePath}`;
        }
      });
    }
  }
}
</script>

在上面的代码中，writeHtmlToLocal方法负责将HTML内容写入本地文件，并更新webViewSrc变量，其中包含了加载本地HTML文件的路径。这样，web-view组件就可以通过这个路径加载并显示你的HTML内容。

- 阅读更多 -

使用 CSS 实现多立方体悬停颜色效果实现

System

2024-08-06

所有,css

以下是一个使用CSS实现的简单的多立方体悬停颜色变化的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cube Hover Effect</title>
<style>
  .cube {
    width: 150px;
    height: 150px;
    background-color: #555;
    margin: 50px;
    float: left;
    transition: 0.3s;
  }
 
  .cube:hover {
    background-color: #333;
    cursor: pointer;
  }
 
  .cube1 {
    transform: translateZ(75px);
  }
 
  .cube2 {
    transform: rotateX(90deg) translateZ(75px);
  }
 
  .cube3 {
    transform: rotateY(90deg) translateZ(75px);
  }
 
  .cube4 {
    transform: rotateX(90deg) rotateY(90deg) translateZ(75px);
  }
 
  .cube5 {
    transform: rotateX(-90deg) translateZ(75px);
  }
 
  .cube6 {
    transform: rotateY(-90deg) translateZ(75px);
  }
 
  .cube7 {
    transform: rotateX(-90deg) rotateY(-90deg) translateZ(75px);
  }
</style>
</head>
<body>
<div class="cube cube1"></div>
<div class="cube cube2"></div>
<div class="cube cube3"></div>
<div class="cube cube4"></div>
<div class="cube cube5"></div>
<div class="cube cube6"></div>
<div class="cube cube7"></div>
</body>
</html>

这段代码定义了七个立方体，每个立方体都有不同的旋转角度，并且在悬停时改变颜色。这是一个简单的3D空间效果，展示了如何使用CSS的transform和transition属性来创建交互式的视觉效果。

- 阅读更多 -

Tailwind CSS从零开始

System

2024-08-06

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS 示例</title>
    <!-- 引入Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="text-center">
        <h1 class="text-4xl text-blue-500">欢迎来到Tailwind CSS世界</h1>
        <p class="text-2xl">这是一个简单的示例，展示如何使用Tailwind CSS构建页面。</p>
    </div>
</body>
</html>

这个HTML代码示例展示了如何在一个HTML页面中引入Tailwind CSS。通过给元素添加Tailwind CSS提供的类，我们可以快速地设置元素的样式，而不用写大量的CSS代码。在这个例子中，我们设置了标题的字体大小为4XL，颜色为蓝色500，并且文本内容居中。同时，我们还对段落文本设置了更大的字体和颜色。这个简单的示例展示了Tailwind CSS的基本用法。

System

2024-08-06

所有,css

为了搭建一个使用了上述技术的Vue 3项目，你可以使用Vue CLI来创建一个新项目并配置所需的依赖。以下是步骤和示例配置：

确保你已经安装了Vue CLI。如果没有，可以通过以下命令安装：




npm install -g @vue/cli
# or
yarn global add @vue/cli

创建一个新的Vue 3项目：




vue create my-project

在创建项目时，选择Vue 3并且配置TypeScript支持。
进入项目目录：




cd my-project

安装所需依赖：




npm install pinia scss element-plus axios echarts vue-router babylon
# or
yarn add pinia scss element-plus axios echarts vue-router babylon

在src目录下创建一个store文件夹，并初始化Pinia：




// src/store/index.ts
import { createPinia } from 'pinia'
 
const store = createPinia()
 
export default store

在main.ts中安装Pinia：




import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
 
const app = createApp(App)
app.use(store)
app.mount('#app')

在vue.config.js中配置SCSS和Element Plus：




module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .use('sass-loader')
      .tap(options => {
        return {
          ...options,
          additionalData: `@import "@/styles/variables.scss";`
        }
      })
  },
  configureWebpack: {
    plugins: [
      // Element Plus 相关插件
    ]
  }
}

配置路由和ECharts：




// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  // 定义路由
]
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
 
export default router

初始化ECharts：




// src/plugins/echarts.ts
import * as echarts from 'echarts'
 
export default () => {
  const app = {
    config: (options) => {
      echarts.init(options.el).setOption(options.option)
    }
  }
  return app
}

配置axios：




// src/plugins/axios.ts
import axios from 'axios'
 
const http = axios.create({
  baseURL: 'http://your-api-url',
  // 其他配置
})
 
export default http

配置Babylon.js：




// src/plugins/babylon.

- 阅读更多 -

Vue给接口传x-www-form-urlencoded类型参数

System

2024-08-06

所有,ajax

在Vue中，如果你需要以application/x-www-form-urlencoded格式发送数据，你可以使用axios这样的HTTP客户端库来构建并发送这种格式的请求。以下是一个简单的例子：

首先，确保你已经安装了axios。如果还没有安装，可以通过npm或yarn来安装：




npm install axios
# 或者
yarn add axios

然后，你可以使用axios来发送x-www-form-urlencoded格式的数据，如下所示：




import axios from 'axios';
 
// 构建你的数据对象
const data = {
  key1: 'value1',
  key2: 'value2'
};
 
// 将数据转换为查询字符串
const formData = new URLSearchParams();
for (let key in data) {
  formData.append(key, data[key]);
}
 
// 发送请求
axios({
  method: 'post',
  url: '你的接口URL',
  data: formData,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})
.then(response => {
  // 处理响应
  console.log(response.data);
})
.catch(error => {
  // 处理错误
  console.error(error);
});

在这个例子中，我们首先创建了一个URLSearchParams实例，然后通过遍历你的数据对象，将其添加到formData中。最后，我们使用axios发送了一个POST请求，其中包含了转换后的数据和正确的Content-Type头信息。

System

2024-08-06

所有,ajax

在Web前端开发项目中，如果使用了代理服务器（如proxy）来连接后端API接口，在构建发布到生产环境后修改API接口通常涉及到以下几个步骤：

修改前端项目中的代理配置：通常在开发环境中，代理配置是写在如env.development的环境配置文件中的。你需要找到这些配置并修改目标API服务器的URL。
如果使用了环境变量来管理API端点，则需要在生产环境中设置正确的API URL。
重新构建并部署前端项目到生产环境。

例如，如果你使用的是create-react-app，你可能需要修改package.json中的代理设置，如下所示：




"proxy": "http://api.production.com"

如果你使用的是vue-cli，则需要修改vue.config.js中的代理配置：




module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.production.com',
        changeOrigin: true
      }
    }
  }
}

如果API URL是通过环境变量管理的，你可能需要在生产环境的服务器配置中设置环境变量，例如在.env文件中：




REACT_APP_API_URL=http://api.production.com

然后在代码中使用这个环境变量：




const apiUrl = process.env.REACT_APP_API_URL;

在修改完成后，重新构建并部署前端项目：




npm run build
# 然后将构建结果部署到生产服务器

确保在部署到生产环境之前，所有的配置都已经是最新的，并且测试通过以确保API接口的正确性。

- 阅读更多 -

“探索AJAX：前端与后端数据交互的利器“

System

2024-08-06

所有,ajax




// 假设我们有一个名为getData()的函数，它使用AJAX调用远程API来获取数据
function getData() {
    $.ajax({
        url: 'https://api.example.com/data', // 远程API的URL
        type: 'GET', // HTTP请求类型
        dataType: 'json', // 预期的响应数据类型
        success: function(response) {
            // 请求成功时的回调函数
            console.log('数据获取成功:', response);
            // 处理或显示数据
        },
        error: function(xhr, status, error) {
            // 请求失败时的回调函数
            console.error('数据获取失败:', error);
        }
    });
}
 
// 调用getData()函数
getData();

这段代码使用了jQuery框架的$.ajax()函数来发送一个GET请求到一个示例远程API（'https://api.example.com/data'），并预期返回JSON格式的数据。成功获取数据后，它会在控制台中输出数据；如果请求失败，它会输出错误信息。这是一个简单的AJAX使用案例，展示了如何在前端与后端之间建立数据交互。

- 阅读更多 -

基于Babylon.js的简易3D模型网页展示

System

2024-08-06

所有,javascript




// 引入Babylon.js库
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
 
<!-- 为Babylon.js准备一个HTML元素作为容器 -->
<canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas>
 
<script>
    const canvas = document.getElementById('renderCanvas');
    const engine = new BABYLON.Engine(canvas, true);
 
    // 当浏览器窗口大小变化时，相应调整Babylon.js引擎的大小
    window.addEventListener('resize', function () {
        engine.resize();
    });
 
    // 创建一个新的场景
    const createScene = function () {
        const scene = new BABYLON.Scene(engine);
 
        // 添加相机和光源
        const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
        const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);
        camera.attachControl(canvas, false);
 
        // 加载3D模型
        BABYLON.SceneLoader.Append('./', 'model.babylon', scene);
 
        return scene;
    };
 
    // 创建并启动场景
    const scene = createScene();
    engine.runRenderLoop(function () {
        scene.render();
    });
</script>

这段代码展示了如何在网页中嵌入一个简易的3D模型展示。首先，我们引入了Babylon.js库和对应的模型加载器。然后，我们创建了一个canvas元素作为渲染的容器，并初始化了Babylon.js引擎。接着，我们创建了一个新的场景，并添加了一个旋转相机和一个半球光源。最后，我们使用SceneLoader.Append方法加载了一个名为'model.babylon'的3D模型，并启动了渲染循环。这个简易示例展示了如何在网页中集成基于Babylon.js的3D内容。

- 阅读更多 -