关于html5画布（canvas）

canvas:用于绘制图像（通过脚本，通常是 JavaScript）。元素本身并没有绘制能力（它仅仅是图形的容器） 您必须使用脚本来完成实际的绘图任务.

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

常用属性：

fillStyle： 设置或返回用于填充绘画的颜色、渐变或模式 

strokeStyle： 设置或返回用于笔触的颜色、渐变或模式 

shadowColor： 设置或返回用于阴影的颜色 

shadowBlur：设置或返回用于阴影的模糊级别 

font： 设置或返回文本内容的当前字体属性 

textAlign： 设置或返回文本内容的当前对齐方式 

 常用方法：

createLinearGradient() 创建线性渐变（用在画布内容上） 
createPattern() 在指定的方向上重复指定的元素 
lineWidth 设置或返回当前的线条宽度 
rect() 创建矩形 
fillRect() 绘制“被填充”的矩形 
strokeRect() 绘制矩形（无填充） 
clearRect() 在给定的矩形内清除指定的像素 
fill() 填充当前绘图（路径） 
stroke() 绘制已定义的路径 
beginPath() 起始一条路径，或重置当前路径 
moveTo() 把路径移动到画布中的指定点，不创建线条 
closePath() 创建从当前点回到起始点的路径 
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条 
quadraticCurveTo() 创建二次贝塞尔曲线 
bezierCurveTo() 创建三次方贝塞尔曲线 
arc() 创建弧/曲线（用于创建圆形或部分圆） 
scale() 缩放当前绘图至更大或更小 
rotate() 旋转当前绘图 
translate() 重新映射画布上的 (0,0) 位置 
fillText() 在画布上绘制“被填充的”文本 
strokeText() 在画布上绘制文本（无填充） 
createImageData() 创建新的、空白的 ImageData 对象 
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 
save() 保存当前环境的状态 
restore() 返回之前保存过的路径状态和属性 

-------------------
利用画布和javascript我们可以实现很多动画效果，虽然css+javascript也可以实现动画的效果，但是css+javascript执行效率没有画布和javascript高，由于css+javascript每执行一次，都会刷新一次页面，页面整个内容会加载一次。但是画布+javascript不会，每次都是从新加载画布的内容，真个页面的布局不会打乱。所以从执行效率来说，还是画布和javascript有优势。

下面是用画布和javascript结合做的一个动画效果：

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  *{margin: 0;padding: 0}
  body{
  text-align: center;
  }
  canvas{
  margin: 20px auto;
  border: 1px solid;
  }
  audio{
  position: absolute;
  top: 100px;
  left: 950px;
  }
  </style>
  </head>
  <body>
  <canvas id="myCanvas" width="900" height="600"></canvas>
  <audio src="12345.mp3" controls="controls" autoplay="autoplay">你的浏览器不支持音频播放</audio>
  </body>
  <script>
  var c=document.getElementById("myCanvas");
  var cxt=c.getContext("2d");
  back();
  id1=setTimeout("head()",10);
  id2=setTimeout("body()",1000);
  id3=setTimeout("hand()",2000);
  id4= setTimeout("foot()",3000);
  id5=setTimeout("feeler()",4000);
  id6=setTimeout("shan()",6000);
   
  function back(){
   
  cxt.fillStyle="black";
  cxt.beginPath();
  cxt.fillRect(250,50,400,500);
  cxt.closePath();
   
   
  }
  function head(){
   
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.arc(450,200,100,Math.PI,2*Math.PI);
  cxt.closePath();
  cxt.fill();
  cxt.fillStyle="black";
  cxt.beginPath();
  cxt.arc(410,150,12,0,2*Math.PI);
  cxt.arc(490,150,12,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
   
  }
  function body(){
   
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(350,220,200,180);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.fillRect(370,400,160,20);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(370,400,20,0,2*Math.PI);
  cxt.arc(530,400,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function hand(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(290,250,40,100);
  cxt.fillRect(570,250,40,100);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(310,250,20,0,2*Math.PI);
  cxt.arc(310,350,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  cxt.beginPath();
  cxt.arc(590,250,20,0,2*Math.PI);
  cxt.arc(590,350,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function foot(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.fillRect(380,419,40,80);
  cxt.fillRect(480,419,40,80);
  cxt.closePath();
   
  cxt.beginPath();
  cxt.arc(400,500,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  cxt.beginPath();
  cxt.arc(500,500,20,0,2*Math.PI);
  cxt.closePath();
  cxt.fill();
   
  }
   
  function feeler(){
  cxt.fillStyle="#5acc42";
  cxt.beginPath();
  cxt.save();
  cxt.translate(390,75);
  cxt.rotate(-30*Math.PI/180);
  cxt.fillRect(-20,0,8,40);
  cxt.closePath();
  cxt.beginPath();
  cxt.arc(-16,0,4,0,2*Math.PI);
  cxt.closePath();
  cxt.restore();
  cxt.fill();
   
  cxt.beginPath();
  cxt.save();
  cxt.translate(500,75);
  cxt.rotate(30*Math.PI/180);
  cxt.fillRect(20,-5,8,40);
  cxt.closePath();
  cxt.beginPath();
  cxt.arc(24,-5,4,0,2*Math.PI);
  cxt.closePath();
  cxt.restore();
  cxt.fill();
  }
   
  function shan(){
  cxt.clearRect(250,50,400,500);
  back();
  clearTimeout(id1);
  clearTimeout(id2);
  clearTimeout(id3);
  clearTimeout(id4);
  clearTimeout(id5);
  clearTimeout(id6);
  setTimeout("shan1()",500);
  }
  function shan1(){
  clearTimeout(id1);
  clearTimeout(id2);
  clearTimeout(id3);
  clearTimeout(id4);
  clearTimeout(id5);
  clearTimeout(id6);
  head();
  body();
  hand();
  foot();
  feeler();
   
  setTimeout("shan()",1000);
  }
   
   
  </script>
  </html>

 

你可能感兴趣的:(canvas)

  • 高仿一个echarts饼图 街角小林2
    开头饼图，很常见的一种图表，使用任何一个图表库都能轻松的渲染出来，但是，我司的交互想法千奇百怪，布局捉摸不透，本身饼图是没啥可变的，但是配套的图例千变万化，翻遍ECharts配置文档都还原不出来，那么有两条路可以选，一是跟交互说实现不了，说服交互按图表库的布局来，但是一般交互可能会对你灵魂拷问，为什么别人都能做出来，你做不出来？所以我选第二种，自己做一个得了。用canvas实现一个饼图很简单，所以
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • WPF绘图(基础图形：直线、矩形和椭圆) 未来无限 C#WPF程序设计wpf绘图直线矩形椭圆
    目录一、概述二、基本图形绘制2.1直线2.2矩形2.3椭圆一、概述与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3
  • 微信小程序使用canvas画图保存图片到手机相册 岩岩很哇塞！ 微信小程序微信小程序小程序canva可画
    微信小程序要实现使用canvas绘制一个图，然后保存到手机相册**最终效果：**实现生成以下图片一、初始化canvas//wxml页面设置canvas标签//js页面初始化canvasdata:{ctx:'',details:'',windowW:375*3,windowH:265*3,ratio:3,showCanvas:false},onLoad(options){this.setData({
  • vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2CanvasjsPDF导出PDF转换DOM操作
    1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如  这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){   downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
  • 微信小程序中实现类似于 ECharts 的图表渲染及优化 人工智能的苟富贵 前端小程序微信小程序echarts小程序
    文章目录前言一、微信小程序中使用ECharts概述二、ECharts在小程序中的集成步骤2.1在小程序项目的根目录下，运行以下命令安装echarts依赖：2.2在小程序的components文件夹中创建ec-canvas组件。2.3在需要展示图表的页面中，引用ec-canvas组件，并初始化ECharts图表：三、微信小程序中使用Canvas绘制图表基础示例：绘制一个简单的折线图四、动态数据更新的
  • 小程序将图片保存到本地 前端-文龙刚 小程序小程序javascript开发语言
    wx.downloadFile({//先将图片下载下来url:canvasToTempFilePath,//图片地址success:function(res){//图片保存本地操作wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,success:function(data){wx.hideLoading()wx.showToast({titl
  • vue前端根据接口返回的url 下载图片 爱心觉罗晓宇 java前端服务器
    downloadPicture(imgSrc,name){constimage=newImage();//解决跨域Canvas污染问题image.setAttribute("crossOrigin","anonymous");image.src=imgSrc;image.onload=()=>{constcanvas=document.createElement("canvas");canvas.
  • HTML5（六）canvas 矩形、路径、画板功能 祝名
    一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
  • vue+threeJS示例（001）: 不断翻转的立体箱体 还是大剑师兰特 #ThreeJS综合教程200+threejs入门threejs教程threejs示例大剑师
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示
  • Flutter 自绘组件 （CustomPaint与Canvas）绘制虚线、区域、直线（一） goodhighting 程序员flutter前端javascript
    有人也许会疑惑，方案1和方案二不都是采用的绘制吗，那可不一定。有的时候解决问题，我们不遵循常规也可以解决问题，满足一时之需了。1、解决问题奇葩方式一：为什么奇葩呢？我们采用多个Container进行竖直或者水平排列完成了效果，至于性能上我们后面慢慢验证了。_lineContainer(){returnContainer(margin:EdgeInsets.only(top:2.0),color:C
  • 纯js简易五子棋 敬@过往 javascript前端开发语言
    一、利用canvas绘制五子棋（代码较为简陋请见谅）这里单独拿出一个绘制好的黑色五子棋展示五子棋-------------人生如棋，落子无悔！！！constcanvas=document.createElement('canvas');canvas.width=900;canvas.height=900;document.body.append(canvas);constcontext=canva
  • 自定义控件实现类似于抖音加载动画效果 折翅鵬 Androidandroidkotlin
    最近做AI项目，设计师想实现类似于抖音那种加载动画效果，但是不是两个圆球交叉，而是两个三角形，其实可以用lottie动画的，但是我本人比较喜欢自定义控件，因此就自定义控件实现了。代码如下：importandroid.animation.ValueAnimatorimportandroid.content.Contextimportandroid.graphics.Canvasimportandro
  • 如何将dom转化为pdf Olivia小饼干 javascripthtmldom
    1.先局部打印方法一：通过id选择器来替换内容打印2.这样打印转化成PDF是调用浏览器默认的功能存在的问题就是echarts生成的canvas显示不出来这样就要到以下方法:3.htmljs打印图片不显示canvas将canvas转化成base64用img标签显示出来4.浏览器默认的打印可以转化成PDF,选中就行了
  • 通过前端实现导出生成pdf文件并下载 银河小铁皮 vue原生JS前端javascriptvue.js
    通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
  • 6. Fabric 拖拽元素到画布 Lanwarf-前端开发 Fabricfabric前端javascript
    监听元素是否被下放到画布上canvas.on('drop',elt=>{//画布元素距离浏览器左侧和顶部的距离letoffset={left:canvas.getSelectionElement().getBoundingClientRect().left,top:canvas.getSelectionElement().getBoundingClientRect().top}//鼠标坐标转换成画
  • 4. Fabric 动画和事件 Lanwarf-前端开发 Fabricfabricjavascript
    1.动画//添加文本lettext=newfabric.FabricText('helloworld',{left:100,top:100})canvas.add(text)text.animate({left:300,top:200,fontSize:48,fill:'blue'},{duration:2000,//设置动画的持续时间为2000毫秒onChange:canvas.renderAl
  • canvas插件 fabric.js 使用 lxw_powerfulCat 前端javascriptfabrichtml
    fabric.js使用fabric.js是常用的canvas插件1,在项目中使用2,特殊用法①,基本设置②,画板数据的导入导出③,遮罩Pattern(引用官网案例)④,多个对象合并,并设置为fabric背景(适用于变色和更多场景)⑤,把canvas对象或者fabric对象导出为图片⑥,位置的获取思路一:(计算法,没算出来)思路二(记录位置)补充:鼠标位移留痕不规则线条在如下代码中注意事项fabri
  • 3. Fabric 基本使用 Lanwarf-前端开发 Fabricfabric前端javascript
    1.画正方形letcanvas=newfabric.Canvas('canvas',{backgroundColor:'grey'})//画正方形letrect=newfabric.Rect({left:100,top:100,fill:'red',width:20,height:20,angle:45})canvas.add(rect)2.画圆letcanvas=newfabric.Canvas
  • 5. Fabric 设置画布大小 Lanwarf-前端开发 Fabricfabric
    1.设置宽度canvas.setWidth(width)2.设置高度canvas.setHeight(height)3.设置大小canvas.setDimensions({width,height})4.画布的缩放canvas.on('mouse:wheel',(opt)=>{constdelta=opt.e.deltaY//滚轮，向上滚一下是-100，向下滚一下是100letzoom=canva
  • 解决用canvas插入背景图片模糊的办法 每天瞎忙的农民工 前端canvas
    问题：用canvas绘制图片的时候会模糊，但是用img显示的时候就不会，canvas和img的大小是相同的至于为什么会变模糊，这和浏览器处理canvas的方式有关，相关的文章可以参考这篇HighDPICanvas，这里不作深入介绍。下面是相关的代码：[html]viewplaincopy[html]viewplaincopyfunctioninit(){varcanvas=document.que
  • 19-进阶：Canvas 画板续（兼容触屏设备） 格林姆大师
    本节知识点JS知识点touch事件触屏设备上，mouse事件已不适用，需转换为touch事件；检测是否为触屏设备方法1：//开始绘画if('ontouchstart'inwindow){touchDrawStart();}else{mouseDrawStart();}方法2：//开始绘画if('ontouchstart'inwindow){touchDrawStart();}else{mouseD
  • hiprint打印/jsPDF使用/html2canvas song854601134 javascriptnode.jsjs
    最初我知道hiprint.print是可以打印双模板的，于是查看hiprint.print的源码发现底层实现是this.getHtml(t).hiwprint,于是断点查看getHtm的实现，得知它是遍历我们对print传参的list，利用list中模板对象的getHtml()方法得到模板的dom对象，同时利用append将两个模板dom拼接到一个模板对象里然后返回。至此我们可以拿到一个合成的模板
  • 【前端面试】标记、绘画视频的某一帧 贾明恣 前端音视频
    搜寻三方库在前端开发中，Canvas是一个强大的工具，可以用来创建图形、动画和各种视觉效果。为了简化和增强Canvas的使用，社区中出现了许多库。以下是一些主流的Canvas库及其特性和性能对比：Fabric.js：概述：Fabric.js是一个基于对象的Canvas库，提供了丰富的API来操作和管理Canvas元素。它特别适合处理交互式和可编辑的图形应用，如在线图像编辑器、绘图工具等。优点：面向
  • Python -- GUI图形界面编程—GUI编程实例 博主也在持续学习中[ 持续更新中！！！ 欢迎白嫖 也求粉啊啊啊~ ] 梦茹^_^ Python_GUI编程python开发语言GUI经验分享前端框架前端组件
    本文继上篇文章http://t.csdnimg.cn/rrsIL继续介绍GUI的图形界面编程（相关视频是哔站上的应该搜这个题目就能找到），文章还是很基础的，目前博主处于有一点基础的状态。文章的主要介绍了依旧非常重要的结构tinkter库、重要组件简介（这个不用死记硬背用的时候再说）、Text（多行文本框）、Radiobutton、Checkbutton、Canvas画布，依旧是很多代码部分是重复的
  • 使用fabric.js简简单单实现一个画板 小草先森tyro 前端
    什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
  • 探索vue-fabric：强大的Vue图形编辑库 林浪其Geneva
    探索vue-fabric：强大的Vue图形编辑库vue-fabric基于canvasfabric.js库创建的vuefabric组件，定制画板，图片组合绘制项目地址:https://gitcode.com/gh_mirrors/vu/vue-fabric在现代Web开发中，图形编辑器的需求日益增长，无论是在线设计工具、教育应用还是企业内部的管理系统，一个灵活且功能丰富的图形编辑器都是不可或缺的。今
  • 探索 Fabric.js：前端开发的轻量级图形编辑框架 滑辰煦Marc
    探索Fabric.js：前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库，专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象，包括文本、形状、图像等，并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型，使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用，还是实现动态
  • uniapp 微信小程序 分享海报的实现 前端不加班 前端javascriptuniapp微信小程序海报
    主页面保存-->-->微信好友-->朋友圈-->保存图片-->-->importposterfrom"@/components/poster/index";import{saveImageToPhotosAlbum}from'@/utils/poster.js';exportdefault{components:{poster},data(){return{code:'',canvasImages
  • ASM系列四 利用Method 组件动态注入方法逻辑 lijingyao8206 字节码技术jvmAOP动态代理ASM
            这篇继续结合例子来深入了解下Method组件动态变更方法字节码的实现。通过前面一篇，知道ClassVisitor 的visitMethod()方法可以返回一个MethodVisitor的实例。那么我们也基本可以知道，同ClassVisitor改变类成员一样，MethodVIsistor如果需要改变方法成员，注入逻辑，也可以
  • java编程思想 --内部类 百合不是茶 java内部类匿名内部类
    内部类;了解外部类 并能与之通信 内部类写出来的代码更加整洁与优雅   1,内部类的创建  内部类是创建在类中的 package com.wj.InsideClass; /* * 内部类的创建 */ public class CreateInsideClass { public CreateInsideClass(
  • web.xml报错 crabdave web.xml
    web.xml报错   The content of element type "web-app" must match "(icon?,display-  name?,description?,distributable?,context-param*,filter*,filter-mapping*,listener*,servlet*,s
  • 泛型类的自定义 麦田的设计者 javaandroid泛型
       为什么要定义泛型类，当类中要操作的引用数据类型不确定的时候。 采用泛型类，完成扩展。   例如有一个学生类     Student{ Student(){ System.out.println("I'm a student....."); } }  有一个老师类  
  • CSS清除浮动的4中方法 IT独行者 JavaScriptUIcss
    清除浮动这个问题，做前端的应该再熟悉不过了，咱是个新人，所以还是记个笔记，做个积累，努力学习向大神靠近。CSS清除浮动的方法网上一搜，大概有N多种，用过几种，说下个人感受。 1、结尾处加空div标签 clear:both 1 2 3 4 .div 1 { background : #000080 ; border : 1px   s
  • Cygwin使用windows的jdk 配置方法 _wy_ jdkwindowscygwin
    1.[vim /etc/profile]    JAVA_HOME="/cgydrive/d/Java/jdk1.6.0_43"  (windows下jdk路径为D:\Java\jdk1.6.0_43)    PATH="$JAVA_HOME/bin:${PATH}"    CLAS
  • linux下安装maven 无量 mavenlinux安装
    Linux下安装maven(转) 1.首先到Maven官网 下载安装文件，目前最新版本为3.0.3，下载文件为 apache-maven-3.0.3-bin.tar.gz，下载可以使用wget命令； 2.进入下载文件夹，找到下载的文件，运行如下命令解压 tar -xvf  apache-maven-2.2.1-bin.tar.gz 解压后的文件夹
  • tomcat的https 配置,syslog-ng配置 aichenglong tomcathttp跳转到httpssyslong-ng配置syslog配置
    1) tomcat配置https,以及http自动跳转到https的配置     1)TOMCAT_HOME目录下生成密钥(keytool是jdk中的命令)      keytool -genkey -alias tomcat -keyalg RSA -keypass changeit -storepass changeit
  • 关于领号活动总结 alafqq 活动
    关于某彩票活动的总结 具体需求，每个用户进活动页面，领取一个号码，1000中的一个； 活动要求 1，随机性，一定要有随机性； 2，最少中奖概率，如果注数为3200注，则最多中4注 3，效率问题，（不能每个人来都产生一个随机数，这样效率不高）； 4，支持断电（仍然从下一个开始），重启服务；（存数据库有点大材小用，因此不能存放在数据库） 解决方案 1，事先产生随机数1000个，并打
  • java数据结构 冒泡排序的遍历与排序 百合不是茶 java
    java的冒泡排序是一种简单的排序规则   冒泡排序的原理：           比较两个相邻的数，首先将最大的排在第一个，第二次比较第二个 ，此后一样；         针对所有的元素重复以上的步骤，除了最后一个     例题；将int array[]
  • JS检查输入框输入的是否是数字的一种校验方法 bijian1013 js
    如下是JS检查输入框输入的是否是数字的一种校验方法： <form method=post target="_blank"> 数字：<input type="text" name=num onkeypress="checkNum(this.form)"><br> </form>
  • Test注解的两个属性：expected和timeout bijian1013 javaJUnitexpectedtimeout
    JUnit4：Test文档中的解释： 　　The Test annotation supports two optional parameters. 　　The first, expected, declares that a test method should throw an exception. 　　If it doesn't throw an exception or if it
  • [Gson二]继承关系的POJO的反序列化 bit1129 POJO
    父类     package inheritance.test2; import java.util.Map; public class Model { private String field1; private String field2; private Map<String, String> infoMap
  • 【Spark八十四】Spark零碎知识点记录 bit1129 spark
    1. ShuffleMapTask的shuffle数据在什么地方记录到MapOutputTracker中的 ShuffleMapTask的runTask方法负责写数据到shuffle map文件中。当任务执行完成成功，DAGScheduler会收到通知，在DAGScheduler的handleTaskCompletion方法中完成记录到MapOutputTracker中  
  • WAS各种脚本作用大全 ronin47 WAS 脚本
    　　　http://www.ibm.com/developerworks/cn/websphere/library/samples/SampleScripts.html 　　　无意中，在WAS官网上发现的各种脚本作用，感觉很有作用，先与各位分享一下 　　　 获取下载 这些示例 jacl 和 Jython 脚本可用于在 WebSphere Application Server 的不同版本中自
  • java-12.求 1+2+3+..n不能使用乘除法、 for 、 while 、 if 、 else 、 switch 、 case 等关键字以及条件判断语句 bylijinnan switch
    借鉴网上的思路，用java实现： public class NoIfWhile { /** * @param args * * find x=1+2+3+....n */ public static void main(String[] args) { int n=10; int re=find(n); System.o
  • Netty源码学习-ObjectEncoder和ObjectDecoder bylijinnan javanetty
    Netty中传递对象的思路很直观： Netty中数据的传递是基于ChannelBuffer（也就是byte[]）； 那把对象序列化为字节流，就可以在Netty中传递对象了 相应的从ChannelBuffer恢复对象，就是反序列化的过程 Netty已经封装好ObjectEncoder和ObjectDecoder 先看ObjectEncoder ObjectEncoder是往外发送
  • spring 定时任务中cronExpression表达式含义 chicony cronExpression
    一个cron表达式有6个必选的元素和一个可选的元素，各个元素之间是以空格分隔的，从左至右，这些元素的含义如下表所示： 代表含义            是否必须 允许的取值范围         &nb
  • Nutz配置Jndi ctrain JNDI
    1、使用JNDI获取指定资源： var ioc = { dao : { type :"org.nutz.dao.impl.NutDao", args : [ {jndi :"jdbc/dataSource"} ] } } 以上方法,仅需要在容器中配置好数据源,注入到NutDao即可.
  • 解决 /bin/sh^M: bad interpreter: No such file or directory daizj shell
    在Linux中执行.sh脚本，异常/bin/sh^M: bad interpreter: No such file or directory。   分析：这是不同系统编码格式引起的：在windows系统中编辑的.sh文件可能有不可见字符，所以在Linux系统下执行会报以上异常信息。 解决： 1）在windows下转换： 利用一些编辑器如UltraEdit或EditPlus等工具
  • [转]for 循环为何可恨？ dcj3sjt126com 程序员读书
      Java的闭包(Closure)特征最近成为了一个热门话题。 一些精英正在起草一份议案，要在Java将来的版本中加入闭包特征。 然而，提议中的闭包语法以及语言上的这种扩充受到了众多Java程序员的猛烈抨击。 不久前，出版过数十本编程书籍的大作家Elliotte Rusty Harold发表了对Java中闭包的价值的质疑。 尤其是他问道“for 循环为何可恨？”[http://ju
  • Android实用小技巧 dcj3sjt126com android
    1、去掉所有Activity界面的标题栏 　　修改AndroidManifest.xml 　　在application 标签中添加android:theme="@android:style/Theme.NoTitleBar"   2、去掉所有Activity界面的TitleBar 和StatusBar  　　修改AndroidManifes
  • Oracle 复习笔记之序列 eksliang Oracle 序列sequenceOracle sequence
    转载请出自出处：http://eksliang.iteye.com/blog/2098859 1.序列的作用 序列是用于生成唯一、连续序号的对象 一般用序列来充当数据库表的主键值 2.创建序列语法如下：   create sequence s_emp start with 1 --开始值 increment by 1 --増长值 maxval
  • 有“品”的程序员 gongmeitao 工作
    完美程序员的10种品质　　   完美程序员的每种品质都有一个范围，这个范围取决于具体的问题和背景。没有能解决所有问题的   完美程序员（至少在我们这个星球上），并且对于特定问题，完美程序员应该具有以下品质： 　　1. 才智非凡- 能够理解问题、能够用清晰可读的代码翻译并表达想法、善于分析并且逻辑思维能力强   （范围：用简单方式解决复杂问题）　　
  • 使用KeleyiSQLHelper类进行分页查询 hvt sql.netC#asp.nethovertree
    本文适用于sql server单主键表或者视图进行分页查询，支持多字段排序。KeleyiSQLHelper类的最新代码请到http://hovertree.codeplex.com/SourceControl/latest下载整个解决方案源代码查看。或者直接在线查看类的代码：http://hovertree.codeplex.com/SourceControl/latest#HoverTree.D
  • SVG 教程 （三）圆形，椭圆，直线 天梯梦 svg
    SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆： 下面是SVG代码： <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" c
  • 链表栈 luyulong java数据结构
    public class Node { private Object object; private Node next; public Node() { this.next = null; this.object = null; } public Object getObject() { return object; } public
  • 基础数据结构和算法十：2-3 search tree sunwinner Algorithm2-3 search tree
      Binary search tree works well for a wide variety of applications, but they have poor worst-case performance. Now we introduce a type of binary search tree where costs are guaranteed to be loga
  • spring配置定时任务 stunizhengjia springtimer
    最近因工作的需要，用到了spring的定时任务的功能,觉得spring还是很智能化的,只需要配置一下配置文件就可以了,在此记录一下，以便以后用到：     //------------------------定时任务调用的方法------------------------------ /** * 存储过程定时器 */ publi
  • ITeye 8月技术图书有奖试读获奖名单公布 ITeye管理员 活动
    ITeye携手博文视点举办的8月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 8月试读活动回顾： http://webmaster.iteye.com/blog/2102830 本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 《跨终端Web》 gleams：http
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他