动画原理——曲线

书籍名称：HTML5-Animation-with-JavaScript

书籍源码：https://github.com/lamberta/html5-animation


1.使用quadraticCurveTo，

  • 开始点：moveTo(20,20)
  • 控制点：quadraticCurveTo(20,100,200,20)的前两个参数，
  • 结束点：quadraticCurveTo(20,100,200,20)的后两个参数

图示如下：

动画原理——曲线

2.曲线经过的点

如果你想让曲线经过一个点，可以利用下面这个公式来计算。其中xt，yt是我们希望曲线经过的目标点，而x0,y0,x2,y2分别为两个端点。通过这个公式可以计算出控制点x1，y1

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;

03-curve-through-point.html代码：

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Curve Through Point</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Move mouse on canvas element.</aside>

    

    <script src="../include/utils.js"></script>

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          mouse = utils.captureMouse(canvas),

          x0 = 100,

          y0 = 200,

          x2 = 300,

          y2 = 200;

        

      canvas.addEventListener('mousemove', function () {

        context.clearRect(0, 0, canvas.width, canvas.height);



        var x1 = mouse.x * 2 - (x0 + x2) / 2,

            y1 = mouse.y * 2 - (y0 + y2) / 2;



        //curve through mouse

        context.beginPath();

        context.moveTo(x0, y0);

        context.quadraticCurveTo(x1, y1, x2, y2);

        context.stroke();

      }, false);

    };

    </script>

  </body>

</html>
View Code

3.多重平滑曲线

一，作为首次尝试，先讲一个容易写的一个错的方法，从每个点依次画曲线。

根据图示可以看出，红色圈出的地方是尖角，而并非平滑曲线。

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Multi Curve 1</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Refresh page for random curves.</aside>

    

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          points = [],

          numPoints = 9;

        

      //array of random point objects

      for (var i = 0; i < numPoints; i++) {

        points.push({

          x: Math.random() * canvas.width,

          y: Math.random() * canvas.height

        });

      }



      //move to the first point

      context.beginPath();

      context.moveTo(points[0].x, points[0].y);

      //and loop through each successive pair

      for (i = 1; i < numPoints; i += 2) {

        context.quadraticCurveTo(points[i].x, points[i].y,

                                 points[i+1].x, points[i+1].y);

      }

      context.stroke();

    };

    </script>

  </body>

</html>
View Code

动画原理——曲线

二，平滑多重曲线

先来分析下图，白色的为控制点，黑色为中点，除首位两个中点不在曲线上，其余都在曲线上。鉴于此可以绘画平滑的曲线。

动画原理——曲线

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Multi Curve 3</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Refresh page for random curves.</aside>

    

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          points = [],

          numPoints = 9,

          ctrlPoint = {},

          ctrlPoint1 = {};



      for (var i = 0; i < numPoints; i++) {

        points.push({

          x: Math.random() * canvas.width,

          y: Math.random() * canvas.height

        });

      }



      //find the first midpoint and move to it

      ctrlPoint1.x = (points[0].x + points[numPoints-1].x) / 2;

      ctrlPoint1.y = (points[0].y + points[numPoints-1].y) / 2;

      context.beginPath();

      context.moveTo(ctrlPoint1.x, ctrlPoint1.y);



      //curve through the rest, stopping at each midpoint

      for (i = 0; i < numPoints - 1; i++) {

        ctrlPoint.x = (points[i].x + points[i+1].x) / 2;

        ctrlPoint.y = (points[i].y + points[i+1].y) / 2;

        context.quadraticCurveTo(points[i].x, points[i].y,

                                 ctrlPoint.x, ctrlPoint.y);

      }

      //curve through the last point, back to the first midpoint

      context.quadraticCurveTo(points[i].x, points[i].y,

                               ctrlPoint1.x, ctrlPoint1.y);

      context.stroke();

    };

    </script>

  </body>

</html>
View Code

三，首尾相连的平滑曲线

和之间的方法一样，只是连端点也要作为两个控制点的中点。

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Multi Curve 3</title>

    <link rel="stylesheet" href="../include/style.css">

  </head>

  <body>

    <header>

      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>

    </header>

    <canvas id="canvas" width="400" height="400"></canvas>

    <aside>Refresh page for random curves.</aside>

    

    <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas'),

          context = canvas.getContext('2d'),

          points = [],

          numPoints = 9,

          ctrlPoint = {},

          ctrlPoint1 = {};



      for (var i = 0; i < numPoints; i++) {

        points.push({

          x: Math.random() * canvas.width,

          y: Math.random() * canvas.height

        });

      }



      //find the first midpoint and move to it

      ctrlPoint1.x = (points[0].x + points[numPoints-1].x) / 2;

      ctrlPoint1.y = (points[0].y + points[numPoints-1].y) / 2;

      context.beginPath();

      context.moveTo(ctrlPoint1.x, ctrlPoint1.y);



      //curve through the rest, stopping at each midpoint

      for (i = 0; i < numPoints - 1; i++) {

        ctrlPoint.x = (points[i].x + points[i+1].x) / 2;

        ctrlPoint.y = (points[i].y + points[i+1].y) / 2;

        context.quadraticCurveTo(points[i].x, points[i].y,

                                 ctrlPoint.x, ctrlPoint.y);

      }

      //curve through the last point, back to the first midpoint

      context.quadraticCurveTo(points[i].x, points[i].y,

                               ctrlPoint1.x, ctrlPoint1.y);

      context.stroke();

    };

    </script>

  </body>

</html>
View Code

 

你可能感兴趣的:(动画)

  • 学习三维动画心得 2501_92205961 开发语言青少年编程
    在大二学年的三维动画设计学习进程中，我围绕3dsMax和Blender两大核心软件展开深入钻研，并在此基础上探索技术应用与创新。不仅熟练掌握了基础操作，还深入到代码编写与复杂技术问题解决领域，逐步构建起系统的三维动画设计知识与技能体系，以下是详细的学习总结。一、3dsMax的深度学习与技术实践（一）高级建模与脚本优化在3dsMax的学习中，基础建模掌握后，我开始挑战高级建模技术。利用NURBS建模
  • 我的世界1.20.1forge模组开发进阶教程——Geckolib动画实体（3） lemon_sjdk java我的世界模组开发
    注意：本章涉及大量的geckolib底层代码，补充讲解了上一节没讲的，如果看不懂请去学习JavaGeoEntity////Sourcecoderecreatedfroma.classfilebyIntelliJIDEA//(poweredbyFernFlowerdecompiler)//packagesoftware.bernie.geckolib.animatable;importjavax
  • 鸿蒙 Swiper 组件解析：轮播交互与动画效果全指南 谢道韫689 鸿蒙自定义组件harmonyos交互华为
    一、引言：Swiper——动态轮播场景的核心解决方案在鸿蒙应用开发中，Swiper组件作为构建滑动轮播界面的核心容器，广泛应用于图片轮播、广告展示、多页内容切换等高频交互场景。自API7版本引入以来，其通过标准化的属性配置、丰富的动画效果及跨设备适配能力，成为开发者实现丝滑轮播体验的首选方案。从电商平台的首页Banner到新闻客户端的头条轮播，Swiper以简洁的接口实现了复杂的轮播逻辑，本文将系
  • 鸿蒙应用动画优化：流畅交互的实现方法 操作系统内核探秘 操作系统内核揭秘harmonyos交互华为ai
    鸿蒙应用动画优化：流畅交互的实现方法关键词：鸿蒙应用开发、动画优化、流畅交互、图形渲染、性能分析、VSYNC、GPU加速摘要：本文深入解析鸿蒙系统动画优化的核心技术，从动画渲染原理、性能瓶颈分析到具体优化策略，结合实战案例演示如何实现60FPS的流畅交互体验。通过剖析鸿蒙动画架构、输入处理机制和渲染管线，详细讲解帧率同步、资源调度、内存优化等关键技术，并提供基于ArkUI的代码实现和DevEcoP
  • 全局加载 loading-page 封装
    当窗口卡顿的或白屏的时候可以渲染一个loading动画，当页面恢复结束loading动画/***utils/loading-page.ts*全局加载loading-page*@methodstart创建loading*@methoddone移除loading*/exportconstloadingPage={//开始渲染loadingstart:()=>{//获取顶层body//将新创建的dc-l
  • 告别UI烦恼，效率飙升！Android UI宝藏库深度解析，让你的APP瞬间惊艳 wylee uiandroid
    前言：AndroidUI开发，你的痛点我懂！各位Android开发路上的朋友们，你们是否也曾被UI开发所困扰？重复造轮子？每次新项目，那些经典的加载动画、弹窗、导航栏，是不是都要从头开始写，或者在旧项目中翻箱倒柜？UI丑陋，缺乏美感？辛辛苦苦实现的功能，却因为UI不够精致，导致用户体验大打折扣，甚至被吐槽“像上个世纪的应用”？效率低下？为了实现一个酷炫的动画效果，不得不投入大量时间去学习复杂的动画
  • gsap动画库 请叫我斌哥哥 工具动画
    gsap动画库GSAP文档首先导入gsap动画库npmigsap-S安装好了在项目中引用importgsapfrom"gsap"普通的页面使用gsap.to('类名',{动画属性})//我们也可以使用时间线来写动画//创建一个时间线，然后再使用链式语法,做过视频剪辑的同学可能理解的更深vartl=gsap.timeline();tl.to(".box1",{rotation:27,x:100,du
  • 【高频考点精讲】前端动画库对比：GSAP、Anime.js和Motion One选型 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    前端动画库三剑客：GSAP、Anime.js和MotionOne选型指南‍作者：全栈老李更新时间：2025年5月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。今天咱们聊聊前端动画库这个事儿。作为"全栈老李"，我在项目里用过不少动画库，踩过坑也尝过甜头。现在市面上动画库五花八门，但真正能打的就那几个。今天重点说说GSAP、Anime.js和MotionOne这三个，帮你
  • react gsap动画库使用详解之scroll滑动动画 伍哥的传说 前端源码分享react.js前端前端框架vue.jsvue动画javascript
    简介gsap高性能的JavaScript动画库，在现代网页设计和开发中运用。安装npminstallgsapReact框架中使用可以考滤使用react-gsap-enhancer库，或者@gasp/react。类组件使用react-gsap-enhancer高阶组件，函数组件使用@gasp/react自定义Hook。npminstallreact-gsap-enhancer#oryarnaddre
  • Flutter 中封装 Dio 网络请求的详细步骤 Larry_zhang双栖 flutter
    在Flutter中，通过封装Dio网络请求，可以将请求、响应处理和错误处理的逻辑集中在一起，减少代码重复并提升代码的可维护性。我们将在RequestClient类中创建一个通用的请求方法，支持GET和POST请求，并结合EasyLoading和Lottie动画，实现更好的用户体验。步骤1：创建RequestConfig基础配置类首先定义请求的基本配置。RequestConfig类负责存放API的b
  • Python 运用 Matplotlib 绘制动画图的流程 Python编程之道 Python人工智能与大数据Python编程之道pythonmatplotlib开发语言ai
    Python运用Matplotlib绘制动画图的流程关键词：Python、Matplotlib、动画图、绘制流程、动画原理摘要：本文详细介绍了使用Python的Matplotlib库绘制动画图的完整流程。从背景知识入手，阐述了Matplotlib动画绘制的目的和适用读者群体，接着深入剖析了核心概念，包括动画的基本原理和架构。通过核心算法原理的讲解和Python源代码示例，展示了如何实现动画绘制。同
  • 使用CSS和HTML实现3D图片环绕效果 码力无边-OEC csshtml3dweb前端
    使用CSS和HTML实现3D图片环绕效果在本篇博客中，将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力，而且具有高度的互动性，鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。1.效果2.页面结构与布局首先，我们来看一下HTML的基本结构。该效果的核心是一个元素，它包含了多个图片的，每个div中都设置了不同的背景图片。HTML代码：3D图片环绕效果</
  • css同心圆扩散 weixin_43966308 css布局
    同心圆扩散要点：定位：每个圆形定位要相同，因为为了达到同心圆扩散的效果有一个定宽定高的圆形，剩下的圆形通过缩放和透明的改变而改变，因此必须保证定位的位置相同为了达到垂直居中的效果，可以通过transfrom(-50%,-50%),但是因为需要通过transfrom的缩放来达到扩散的效果，因此会发现之前水平垂直的效果没有达到，因为被动画中的trasnfrom缩放的语句覆盖了可以通过margin负值宽
  • css3 圆形水波纹特效 程序媛之博客 css3前端css
    需求描述：需要制作一个动画，特效从圆心开始往外扩散，然后又往回收。效果图：实现代码：.circle{width:100rpx;height:100rpx;background-color:#FF4C4C;border-radius:50%;/*圆形*/box-shadow:inset00010rpxrgba(255,255,255,0.5),/*内阴影，初始半透明圆*/inset00020rpxr
  • CSS实标题现同心圆的缩放 做一个暴躁的开发 css3html
    CSS实标题现同心圆的缩放最近学习了css动画效果，记录一下同心圆的缩放问题问题描述我先设置了两个div，外圈是class=“one”，内圈是class=“two”,代码如下：分别设置他们的div，给他们边框，并且设置成圆形.one{width:500px;height:500px;border:20pxsolidlightcoral;border-radius:50%;overflow:hidd
  • 创意Python爱心代码 卖血买老婆 Python专栏python开发语言
    目录一、用字符在控制台打印爱心图案1.1方法1：简单星号爱心说明1.2方法2：调整字符和形状二、turtle绘制爱心2.1turtle画心形及写字说明2.2动态跳动爱心三、用Matplotlib画心形曲线3.1标准心形曲线3.2LOVE动画心形（进阶）四、参数方程自定义爱心（数学美）心形参数方程公式五、更多创意：二维码嵌入、爱心表白墙六、总结完整参考目录用Python创意绘制爱心（Heart）的多
  • 鸿蒙开发：loading动画的几种实现方式
    前言本文基于Api13这两天在优化一些功能，发现之前网路库中的oading动画是通过帧动画实现的，而刷新库中的动画却是直接使用的GIF，而到了另一个项目中则又是通过属性动画的方式实现的，索性就针对这几种实现方式简单总结一下，希望可以帮助到有需要的朋友。首先，我们要知道一点，想要实现一个动态的图片，不仅仅是以上的几种方式，使用lottie也可以实现，所以在实际的开发中，应当根据自身需求需要，选择一种
  • Android 音乐播放器实现底部播放器、全屏播放器一体化（Fragment+ BottomSheet实现）
    一个基础的一体化播放控制器，用于提升用户体验，减少界面切换带来的不便，以及提高开发效率和性能。依赖添加implementation'com.github.bumptech.glide:glide:4.16.0'implementation'androidx.cardview:cardview:1.0.0'最终效果，底部控制器、过渡动画、全屏控制器一整体思路项目已上传至github，musicpla
  • Android 13.0 第三方app设置默认Launcher快速进去桌面去掉android正在启动提示功能 安卓兼职framework应用工程师 android13.0Rom定制化高级进阶androidromframeworkdirectBootProtect
    1.前言在13.0的系统rom定制化开发中，在有多个app的时候当设置为默认Launcher的时候，在进入系统中，在播放完开机动画的时候，这时候在系统未解锁的时候，这时候会由于在7.0后的fallbackhome机制的原因，导致会弹出Settings中的android正在启动弹窗，接下来看下如何快速启动第三方app,而不弹出android正在启动弹窗第一时间直接进入默认的Launcher桌面，接下
  • 【高频考点精讲】CSS动画性能优化：为什么你的动画卡顿？这些技巧让你的页面丝般顺滑 全栈老李技术面试 前端高频考点精讲前端javascripthtmlcss面试题reactvue
    CSS动画性能优化：为什么你的动画卡顿？这些技巧让你的页面丝般顺滑‍作者：全栈老李更新时间：2025年6月‍适合人群：前端初学者、进阶开发者版权：本文由全栈老李原创，转载请注明出处。最近在项目review时，发现不少同学写的CSS动画总是一卡一卡的，像极了老式DVD播放器卡碟的样子。今天全栈老李就来聊聊，如何让你的CSS动画像德芙巧克力广告那样——纵享丝滑。为什么你的动画会卡成PPT？浏览器渲染一
  • Android常用内存优化方式整理 Lee·陈 笔记-Android笔记-RNandroid内存优化
    Android常用内存优化方式整理1、减小对象内存占用基本数据类型与包装类型枚举Bitmap图片代码混淆序列化2、对象复用对象池ListView/GridView/RecyclerViewBitmap复用3、内存泄漏静态变量单例属性动画非静态内部类异步线程/任务Handler资源未关闭全局集合对象WebViewEditText4、内存使用策略优化优化布局，减少布局层次StringBuffer/St
  • 8、掌握Adobe After Effects中的变形与角色动画技术 weixin_42668301 探索AfterEffectsCC的奥秘AdobeAfterEffects变形工具角色动画
    掌握AdobeAfterEffects中的变形与角色动画技术1.引言AdobeAfterEffects是一款强大的视频合成和动画制作软件，广泛应用于影视后期制作、广告设计等领域。在掌握基本操作后，深入了解一些高级功能和技术将有助于提升作品质量。本篇文章将聚焦于如何使用AdobeAfterEffects中的变形工具（Deform）和角色动画技术（PuppetTools），帮助读者更好地理解和应用这些
  • BVH 文件是一种用于记录 3D 动画数据的文件格式，常用于 3D 建模和动画制作。以下是对这个 BVH 文件的逐行解读 zhangfeng1133 3d机器人机器学习
    BVH文件是一种用于记录3D动画数据的文件格式，常用于3D建模和动画制作。以下是对这个BVH文件的逐行解读：HIERARCHYROOTHips{OFFSET000CHANNELS6XpositionYpositionZpositionZrotationXrotationYrotationJOINTLeftUpLeg{OFFSET0.100CHANNELS3ZrotationXrotationYro
  • 《Vue3+ECharts 大屏性能优化全攻略：从加载到交互的极致体验》 前端极客探险家 vue数据可视化性能优化大屏端echarts
    1.大屏项目痛点分析与优化目标典型性能问题：首屏白屏时间过长大数据量下的渲染卡顿复杂动画导致的掉帧优化目标设定：首屏加载{config.splitChunks({chunks:'all',minSize:20000,maxSize:250000,minChunks:1,automaticNameDelimiter:'~',cacheGroups:{echarts:{test:/[\\/]node_
  • 自用 SVG动态 渐变背景 动画效果无水印 A5资源网 A5资源网性能优化wordpress
    这是一个使用SVG制作的动态渐变背景动画效果，具有流畅的动画过渡和优美的色彩变化。效果预览（附原文件下载）SVG动态渐变背景动画效果-A5资源网body{margin:0;padding:0;overflow:hidden;}svg{width:100vw;height:100vh;}A5资源动态渐变背景效果A5资源网www.A5.org.cnCopyright©2024A5资源网.Allrigh
  • React native 使用Animated 优化连续setState 性能问题 _ZHANGJUNPING ReactNativereactnativereact.jsjavascript
    再部分场景下我们需要连续更新state刷新页面。一般情况刷新使用setstate没有问题，当需要连续刷新的情况会有明显的性能问题。场景：自定义可拖动抽屉组件新增需求在抽屉活动是更新主页面组件样式，此时需要动态传递抽屉高度修改主页组件属性。实现：在原有组件增加动画属性的监听：/***监听参数变化*/this.watcher=this.animatedViewHeight.addListener((v
  • C#按钮控件美化：自定义样式与动画效果 谛听汪
    本文还有配套的精品资源，点击获取简介：C#中的按钮控件是用户交互的关键元素，通过美化其外观可以显著提升应用体验。文章展示了多种按钮美化技术，包括自定义背景、边框样式、文字样式、形状变化、动画效果、事件处理、模板样式、利用第三方库和响应式设计。封装这些技术的类文件可以被开发者引用，以便于快速实现美观且一致的按钮设计。1.C#按钮控件美化概述在当今的软件开发中，用户界面(UI)的美观性和用户交互体验(
  • 线程池中的线程数量设置为多少比较合适？ Mutig_s java后端面试
    影响因素影响线程数设定的因素，主要有CPU核心数、以及应用类型。CPU密集型应用CPU密集型应用主要是指需要大量计算资源的应用，常见类型包括：科学计算：气象模拟、流体动力学模拟。图形渲染：3D动画制作、电影特效渲染。密码学运算：区块链挖矿、数据加密。机器学习和人工智能：神经网络训练、深度学习。金融分析：量化分析、高频交易。图像和视频处理：视频编辑、编码解码。编译器和代码分析：代码编译、大型软件项目
  • css点击按钮出现水波纹效果 ＆白帝＆ csscss前端
    按钮水波纹动画效果示例.ripple-button{position:relative;overflow:hidden;padding:12px24px;background-color:#6200ee;color:white;border:none;border-radius:4px;cursor:pointer;outline:none;}.ripple-button::after{conte
  • Flutter基建 - Hero动画有多英雄 Taonce Flutter知识归档flutter安卓前端
    本篇基于Flutter3.16.4，Dart3.2.3版本Flutter3.16.4•channelstable•https://github.com/flutter/flutter.gitFramework•revision2e9cb0aa71(3daysago)•2023-12-1114:35:13-0700Engine•revision54a7145303Tools•Dart3.2.3•De
  • 基本数据类型和引用类型的初始值 3213213333332132 java基础
    package com.array; /** * @Description 测试初始值 * @author FuJianyong * 2015-1-22上午10:31:53 */ public class ArrayTest { ArrayTest at; String str; byte bt; short s; int i; long
  • 摘抄笔记--《编写高质量代码：改善Java程序的151个建议》 白糖_ 高质量代码
            记得3年前刚到公司，同桌同事见我无事可做就借我看《编写高质量代码：改善Java程序的151个建议》这本书，当时看了几页没上心就没研究了。到上个月在公司偶然看到，于是乎又找来看看，我的天，真是非常多的干货，对于我这种静不下心的人真是帮助莫大呀。           看完整本书，也记了不少笔记
  • 【备忘】Django 常用命令及最佳实践 dongwei_6688 django
    注意：本文基于 Django 1.8.2 版本   生成数据库迁移脚本（python 脚本） python manage.py makemigrations polls  说明：polls 是你的应用名字，运行该命令时需要根据你的应用名字进行调整   查看该次迁移需要执行的 SQL 语句（只查看语句，并不应用到数据库上）： python manage.p
  • 阶乘算法之一N! 末尾有多少个零 周凡杨 java算法阶乘面试效率
                                     &n
  • spring注入servlet g21121 Spring注入
    传统的配置方法是无法将bean或属性直接注入到servlet中的，配置代理servlet亦比较麻烦，这里其实有比较简单的方法，其实就是在servlet的init()方法中加入要注入的内容： ServletContext application = getServletContext(); WebApplicationContext wac = WebApplicationContextUtil
  • Jenkins 命令行操作说明文档 510888780 centos
    假设Jenkins的URL为http://22.11.140.38:9080/jenkins/ 基本的格式为 java 基本的格式为 java -jar jenkins-cli.jar [-s JENKINS_URL] command [options][args] 下面具体介绍各个命令的作用及基本使用方法 1. &nb
  • UnicodeBlock检测中文用法 布衣凌宇 UnicodeBlock
    /**  * 判断输入的是汉字  */ public static boolean isChinese(char c) {        Character.UnicodeBlock ub = Character.UnicodeBlock.of(c);    
  • java下实现调用oracle的存储过程和函数 aijuans javaorale
    1.创建表：STOCK_PRICES     2.插入测试数据：     3.建立一个返回游标：  PKG_PUB_UTILS   4.创建和存储过程：P_GET_PRICE     5.创建函数：   6.JAVA调用存储过程返回结果集 JDBCoracle10G_INVO
  • Velocity Toolbox antlove 模板toolboxvelocity
    velocity.VelocityUtil package velocity; import org.apache.velocity.Template; import org.apache.velocity.app.Velocity; import org.apache.velocity.app.VelocityEngine; import org.apache.velocity.c
  • JAVA正则表达式匹配基础 百合不是茶 java正则表达式的匹配
      正则表达式;提高程序的性能,简化代码,提高代码的可读性,简化对字符串的操作   正则表达式的用途; 字符串的匹配 字符串的分割 字符串的查找 字符串的替换       正则表达式的验证语法     [a] //[]表示这个字符只出现一次 ,[a] 表示a只出现一
  • 是否使用EL表达式的配置 bijian1013 jspweb.xmlELEasyTemplate
            今天在开发过程中发现一个细节问题，由于前端采用EasyTemplate模板方法实现数据展示，但老是不能正常显示出来。后来发现竟是EL将我的EasyTemplate的${...}解释执行了，导致我的模板不能正常展示后台数据。         网
  • 精通Oracle10编程SQL(1-3)PLSQL基础 bijian1013 oracle数据库plsql
    --只包含执行部分的PL/SQL块 --set serveroutput off begin dbms_output.put_line('Hello,everyone!'); end; select * from emp; --包含定义部分和执行部分的PL/SQL块 declare v_ename varchar2(5); begin select
  • 【Nginx三】Nginx作为反向代理服务器 bit1129 nginx
    Nginx一个常用的功能是作为代理服务器。代理服务器通常完成如下的功能：   接受客户端请求 将请求转发给被代理的服务器 从被代理的服务器获得响应结果 把响应结果返回给客户端 实例 本文把Nginx配置成一个简单的代理服务器 对于静态的html和图片，直接从Nginx获取 对于动态的页面，例如JSP或者Servlet，Nginx则将请求转发给Res
  • Plugin execution not covered by lifecycle configuration: org.apache.maven.plugin blackproof maven报错
    转：http://stackoverflow.com/questions/6352208/how-to-solve-plugin-execution-not-covered-by-lifecycle-configuration-for-sprin   maven报错： Plugin execution not covered by lifecycle configuration:
  • 发布docker程序到marathon ronin47 docker 发布应用
    1 发布docker程序到marathon 1.1 搭建私有docker registry 1.1.1 安装docker regisry docker pull docker-registry docker run -t -p 5000:5000 docker-registry 下载docker镜像并发布到私有registry docker pull consol/tomcat-8.0
  • java-57-用两个栈实现队列&&用两个队列实现一个栈 bylijinnan java
    import java.util.ArrayList; import java.util.List; import java.util.Stack; /* * Q 57 用两个栈实现队列 */ public class QueueImplementByTwoStacks { private Stack<Integer> stack1; pr
  • Nginx配置性能优化 cfyme nginx
    转载地址：http://blog.csdn.net/xifeijian/article/details/20956605   大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装，修改这里或那里的几行配置，好了，你已经有了一个Web服务器了。而且，在大多数情况下，一个常规安装的nginx对你的网站来说已经能很好地工作了。然而，如果你真的想挤压出Nginx的性能，你必
  • [JAVA图形图像]JAVA体系需要稳扎稳打,逐步推进图像图形处理技术 comsci java
         对图形图像进行精确处理，需要大量的数学工具，即使是从底层硬件模拟层开始设计，也离不开大量的数学工具包，因为我认为，JAVA语言体系在图形图像处理模块上面的研发工作，需要从开发一些基础的，类似实时数学函数构造器和解析器的软件包入手，而不是急于利用第三方代码工具来实现一个不严格的图形图像处理软件......   &nb
  • MonkeyRunner的使用 dai_lm androidMonkeyRunner
    要使用MonkeyRunner，就要学习使用Python，哎 先抄一段官方doc里的代码 作用是启动一个程序（应该是启动程序默认的Activity），然后按MENU键，并截屏 # Imports the monkeyrunner modules used by this program from com.android.monkeyrunner import MonkeyRun
  • Hadoop-- 海量文件的分布式计算处理方案 datamachine mapreducehadoop分布式计算
    csdn的一个关于hadoop的分布式处理方案，存档。 原帖：http://blog.csdn.net/calvinxiu/article/details/1506112。     Hadoop 是Google MapReduce的一个Java实现。MapReduce是一种简化的分布式编程模式，让程序自动分布到一个由普通机器组成的超大集群上并发执行。就如同ja
  • 以資料庫驗證登入 dcj3sjt126com yii
    以資料庫驗證登入 由於 Yii 內定的原始框架程式, 採用綁定在UserIdentity.php 的 demo 與 admin 帳號密碼:    public function authenticate()    {        $users=array( &nbs
  • github做webhooks：[2]php版本自动触发更新 dcj3sjt126com githubgitwebhooks
    上次已经说过了如何在github控制面板做查看url的返回信息了。这次就到了直接贴钩子代码的时候了。 工具/原料 git github 方法/步骤   在github的setting里面的webhooks里把我们的url地址填进去。   钩子更新的代码如下： error_reportin
  • Eos开发常用表达式 蕃薯耀 Eos开发Eos入门Eos开发常用表达式
    Eos开发常用表达式 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2014年8月18日 15:03:35 星期一     &
  • SpringSecurity3.X--SpEL 表达式 hanqunfeng SpringSecurity
    使用 Spring 表达式语言配置访问控制，要实现这一功能的直接方式是在<http>配置元素上添加 use-expressions 属性：   <http auto-config="true" use-expressions="true"> 这样就会在投票器中自动增加一个投票器：org.springframework
  • Redis vs Memcache IXHONG redis
    1. Redis中，并不是所有的数据都一直存储在内存中的，这是和Memcached相比一个最大的区别。 2. Redis不仅仅支持简单的k/v类型的数据，同时还提供list，set，hash等数据结构的存储。 3. Redis支持数据的备份，即master-slave模式的数据备份。 4. Redis支持数据的持久化，可以将内存中的数据保持在磁盘中，重启的时候可以再次加载进行使用。 Red
  • Python - 装饰器使用过程中的误区解读 kvhur JavaScriptjqueryhtml5css
    大家都知道装饰器是一个很著名的设计模式，经常被用于AOP(面向切面编程)的场景，较为经典的有插入日志，性能测试，事务处理，Web权限校验， Cache等。 原文链接：http://www.gbtags.com/gb/share/5563.htm Python语言本身提供了装饰器语法（@），典型的装饰器实现如下：   @function_wrapper de
  • 架构师之mybatis-----update 带case when 针对多种情况更新 nannan408 case when
    1.前言.    如题. 2. 代码.   <update id="batchUpdate" parameterType="java.util.List"> <foreach collection="list" item="list" index=&
  • Algorithm算法视频教程 栏目记者 Algorithm算法
    课程：Algorithm算法视频教程 百度网盘下载地址： http://pan.baidu.com/s/1qWFjjQW 密码: 2mji 程序写的好不好,还得看算法屌不屌！Algorithm算法博大精深。 一、课程内容： 课时1、算法的基本概念 + Sequential search 课时2、Binary search 课时3、Hash table 课时4、Algor
  • C语言算法之冒泡排序 qiufeihu c算法
    任意输入10个数字由小到大进行排序。 代码： #include <stdio.h> int main() { int i,j,t,a[11]; /*定义变量及数组为基本类型*/ for(i = 1;i < 11;i++){ scanf("%d",&a[i]); /*从键盘中输入10个数*/ } for
  • JSP异常处理 wyzuomumu Webjsp
    1.在可能发生异常的网页中通过指令将HTTP请求转发给另一个专门处理异常的网页中: <%@ page errorPage="errors.jsp"%>   2.在处理异常的网页中做如下声明： errors.jsp: <%@ page isErrorPage="true"%>，这样设置完后就可以在网页中直接访问exc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他