HTML5实现涂鸦板

最近闲的，看了看html5，强大的绘图功能让我惊奇，于是，写了个小玩意---涂鸦板，能实现功能有：画画，改色，调整画笔大小

html5的绘图可以分为点，线，面，圆，图片等，点和线，这可是所有平面效果的基点，有了这两个东西，没有画不出来的东西，只有想不到的算法。

先上代码了：

html

1 <body style="cursor:pointer">
2  <canvas id="mycavas" width="1024" height="400" style="border:solid 4px #000000"></canvas><!--画布-->
3         <input type="color" id="color1" name="color1"/><!--设色器-->
4         <output name="a" for="color1" onforminput="innerHTML=color1.value"></output>
5          <input type="range" name="points" id="size" min="5" max="20" /><!--拖动条-->
6 </body>

效果：

HTML5实现涂鸦板_第1张图片

好了，一个简陋的画图界面就搞好啦，

下面开始写一些画线的代码

 1 $.Draw = {};
 2 $.extend($.Draw, {
 3     D2: "",
 4     CX:"",
 5     Box: "mycavas",//画布id
 6     BoxObj:function(){//画布对象
 7         this.CX=document.getElementById(this.Box);
 8     },
 9     D2:function(){//2d绘图对象
10        this.D2 = this.CX.getContext("2d");
11     },
12     Cricle: function (x, y, r, color) {//画圆
13         if (this.D2) {
14             this.D2.beginPath();
15             this.D2.arc(x, y, r, 0, Math.PI * 2, true);
16             this.D2.closePath();
17             if (color) {
18                 this.D2.fillStyle = color;
19             }
20             this.D2.fill();
21         }
22     },
23     init: function () {//初始化
24         this.BoxObj();
25         this.D2();
26     }
27 
28 })

相信这里的简单代码大家都看得懂，主要就是创建了一个对象，包含创建画布，创建2d对象，画圆方法，和对象初始化方法。

接下里前台html页面来调用这个对象

看代码：

 1         var color = "#000000";//初始化颜色
 2         var size = 5;//初始化尺寸
 3         document.getElementById('color1').onchange = function () {
 4             color = this.value;
 5         };
 6         document.getElementById('size').onchange = function () {
 7             size = this.value;
 8         };
 9         $.Draw.init();//初始化
10         var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用
11         var current = {};//存储鼠标按下时候的点
12         document.onmousedown = function (option) {//鼠标按下事件
13             current.x = option.x;
14             current.y = option.y;
15             $.Draw.Cricle(option.x, option.y, size, color);
16             tag = true;
17         }
18         document.onmouseup = function () {//鼠标抬起事件
19             tag = false;
20         }
21         document.onmousemove = function (option) {//鼠标移动事件
22             if (tag) {
23                 if (size >= 0) {
24                     $.Draw.Cricle(option.x, option.y, size, color);
25                 } 
26             }
27         }

 

这段代码主要有如下几个意思

1.捕获颜色空间和拖动条控件的change事件，从而获取对应的颜色和尺寸的数值，存储下来供下面画线用

2.初始化画图对象

3.捕获鼠标的按下，抬起和移动事件，关键在一个开关可以控制油墨

好了，一个简单的涂鸦板就好了，上我的书法：

HTML5实现涂鸦板_第2张图片

是不是有点闲的蛋疼呢，呵呵！书法不如当年

你可能感兴趣的:(html5)

  • HTML5 vs HTML 和 CSS3 vs CSS：全面对比 @程序员ALMJ htmlcsshtml5css3
    HTML5与HTMLHTML概述HTML(HyperTextMarkupLanguage)是构建网页的标准标记语言。HTML经历了多个版本的发展：HTML2.0(1995年)：最早的标准化版本HTML4.01(1999年)：增加了样式表支持XHTML(2000年)：基于XML的更严格版本HTML5(2014年正式发布)：现代网页标准HTML5的主要特点语义化标签：引入了更具描述性的元素多媒体支持：
  • 浏览器本地存储-localStorage的介绍和使用 兴趣广泛的程序猿 javascript笔记javascripthtml5
    一、localStorage是什么？在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作本地存储来的，解决了cookie占用带宽和存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage的大小，一般浏览器支持的是5M，但在不同的浏览器中会有所不同。二、localStorage的优点和缺点优点1、localStorage突破了cooki
  • html5炫酷图片悬停效果实现详解 木木黄木木 html5前端html5前端html
    html5炫酷图片悬停效果实现详解这里写目录标题html5炫酷图片悬停效果实现详解项目介绍技术栈核心功能实现1.页面布局2.图片容器样式3.炫酷悬停效果缩放效果倾斜效果模糊效果旋转效果4.悬停文字效果5.性能优化6.响应式设计项目亮点总结项目介绍本文将详细介绍如何使用HTML5和CSS3技术实现一个具有炫酷悬停效果的图片展示组件。该组件包含多种动画效果，如缩放、倾斜、模糊和旋转等，并且具有良好的响
  • 498.大学生HTML5期末大作业 —【悬崖上的金鱼姬动漫主题网页(5页)】 Web前端网页制作 html5+css3 一只小小的眠羊 大学生期末大作业动漫前端html课程设计html5css3cssjavascript
    目录一、网页简介二、网页文件三、网页效果四、代码展示1.html2.CSS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客5000+网页案例完整代码，主题涵
  • 【前端】【React】第四章：深入理解 React Router 及前端路由管理 患得患失949 React从零学习前端react.js前端框架
    十一、ReactRouter及前端路由管理React是一个单页面应用（SPA）框架，通常使用ReactRouter进行路由管理。ReactRouter提供客户端路由，避免页面刷新，提高用户体验。（一）ReactRouter基本概念ReactRouter采用基于组件的路由，核心概念包括：术语作用BrowserRouter使应用支持HTML5HistoryAPI的路由Routes用于包裹所有Route
  • 解决方案：网页编辑器处理Word图片粘贴问题 2501_90699800 编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 实现word图片在wangEditor中的直接显示与编辑？ weixin_52041354 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：wangEditor前端：vue2,vue3,vue-cli,html5后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体：学生,个人用户,外包,自由职业者,中小型网站,博客,场景：数字门户,数字中台,站群,内网，外网，信创国产化环境，web截屏行业：医疗，教育，建筑，政府，党政，国
  • 【An】Animate 2024 动画设计制作 Alger_Hamlet 动画
    【An】Animate2024动画设计制作文章目录【An】Animate2024动画设计制作一、介绍二、效果三、下载一、介绍AdobeAnimate2024是一款动画设计制作软件。集成了诸多绘图工具、高级动画特效和灵活的交互设计功能，让用户能够轻松绘制出精美的角色与场景，并通过精细的时间轴控制实现流畅的动画效果。无论是二维动画、HTML5广告、互动网页、游戏元素还是教育课件，Animate2024
  • 基于HTML5和CSS3实现3D旋转相册效果 木木黄木木 html5css33d
    基于HTML5和CSS3实现3D旋转相册效果这里写目录标题基于HTML5和CSS3实现3D旋转相册效果项目介绍技术栈核心功能实现原理1.HTML结构2.CSS样式设计2.1基础样式设置2.2容器样式2.3图片样式3.JavaScript实现4.交互功能实现4.1触摸和鼠标拖拽4.2播放控制项目亮点技术难点解析项目总结项目介绍在这个项目中，我们将使用HTML5和CSS3的新特性来实现一个炫酷的3D旋
  • html跑酷代码 r67456 html前端
    HTML5简易版仿超级玛丽小游戏DEMO演示body{background:#222;}h2{color:#666;font-family:monospace;text-align:center;}.background{table-layout:fixed;border-spacing:0;}.backgroundtd{padding:0;}.lava,.actor{background:#e5
  • 基于Python+Django的计算机专业就业分析可视化系统 QQ79278590 javawebpythondjango开发语言
    基于Python+Django的计算机专业就业分析系统1.使用django-simpleui实现后端管理系统，使用requests爬取的数据2.使用django-allauth插件实现登录注册修改密码等，实现数据的搜索3.使用django框架实现的后端4.前端使用html5，css3，JavaScript，bootstrap2，使用echarts实现可视化
  • HTMl5-------新增属性 孙忠昊 前端
    (一)HTMLHTML5新增标签整理HTML5增加了主要增加了一些结构标签,媒体标签,表单标签以及一些功能性标签1,结构标签section定义文档中的节,如章节,页眉页脚等,可与和,h2等标签结合使用,表示文章结构article定义页面独立的内容区域,如一篇文章aside定义文档的头部区域header定义文档的头部区域hgroup对页面中一个内容区块的标题进行整合;标题组footer定义也叫,如作
  • 【大前端系列02】HTML5 Canvas绘图技术全解析：从入门到精通 秦若宸 大前端系列前端html5html
    HTML5Canvas绘图技术全解析系列:「全栈进化：大前端开发完全指南」系列第2篇（共5篇）核心:Canvas绘图技术的基本原理与高级应用技巧引言Canvas是HTML5引入的绘图API，提供可编程的矩形绘图区域，使用JavaScript动态生成图形、图表、动画效果和图像处理。Canvas的本质是一个位图画布，每个像素都可以被精确控制。为什么学习Canvas?创建复杂视觉效果和交互体验高性能图形
  • 「HTML5+Canvas实战」星际空战游戏开发 - 纯前端实现 & 源码即开即用【附演示视频】 果冻kk 前端html5小游戏
    纯前端实现星际空战游戏【简易版】博主上次分享的简易版飞机大战收到了不少建议，今天再给大家来一波福利！带来全新升级的飞机大战进阶版！不仅拥有更丰富的游戏机制和更精美的游戏画面，还加入了超燃的BOSS战斗系统。源码完全免费开放，拿来即用无门槛，欢迎感兴趣的小伙伴下载源码。源码已附文章末尾除了本文介绍的纯前端版本外，我们还开发了一个完整的后端版本，采用Java技术栈实现，包含用户登录注册（安全配置、认证
  • 面试的时候问到了HTML5的新特性有哪些 申朝先生 前端面试问题html5信息可视化前端
    HTML5是对HTML的重要更新，它引入了许多新特性和改进，使Web开发变得更加灵活和强大。以下是一些HTML5的关键新特性：1.新的文档结构元素HTML5引入了一些新的语义化元素，帮助开发者更清晰地结构化网页内容，改善了可访问性和SEO。：定义文档的头部区域，通常包含标题、导航等。：定义文档的底部区域，通常包含版权、联系信息等。：表示一个独立的内容块，通常可以被单独分发或重用（如博客文章、新闻报
  • Web编辑器与Word文档的无缝对接技巧 全武凌(荆门泽优) 前端编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 针对Word文档，百度编辑器提供了哪些便捷的上传与粘贴功能？ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 大厂 H5 开发实战手册 人工智能_SYBH 课程推荐2025年前后端实战项目1024程序员节大厂H5开发实战手册
    京东凹凸实验室(Aotu.io，英文简称O2)，创立于2015年10月，为掘金最早一批联合编辑，拥有数千关注者。O2对内负责京东PC端首页、多个频道页、小程序版本京东购物、微信手Q京东购物、M端京东、各类营销活动场景HTML5活动等多个业务模块的前端开发工作，对外作为京东的多终端技术品牌一直活跃于掘金、GitHub等知名知识共享平台。O2官网：Aotu.io小册介绍这本小册
  • Canvas 示例：4种超炫的网站动画背景效果 「已注销」 前端css3html5canvas
    今天，我们想分享一些动画背景的灵感。全屏背景图片的网站头部是最新的网页设计趋势，已经持续了一段时间。最近人们一直在转向动画添加更多的视觉兴趣到他们的网站中，在这里我们想向您分享几个使用JavaScript和Canvas创建不同页眉的动画示例。在线演示立即下载您可能感兴趣的相关文章网站开发中很有用的jQuery效果【附源码】分享35个让人惊讶的CSS3动画效果演示十分惊艳的8个HTML5&JavaS
  • Canvas渲染管线解析：从API调用到像素落地的全过程 沐土Arvin 信息可视化前端javascripthtmlcss
    1.Canvas基本定义★了解Canvas是HTML5提供的一个通过JavaScript来绘制图形的元素。它提供了一个空白的绘图区域，开发者可以使用JavaScript脚本在其中绘制各种图形、动画、游戏画面等。2.Canvas使用场景★了解数据可视化：绘制图表、图形等游戏开发：HTML5游戏图像处理：滤镜、像素操作动画效果：创建动态视觉效果交互式图形：绘图应用、设计工具教育演示：数学函数可视化等3
  • 分享一个让 uniapp 微信小程序支持 EventSource 的方法 魔众 uni-app微信小程序notepad++
    微信小程序不支持EventSource（SSE）是一种HTML5标准，旨在提供一种方式来在Web应用中实现异步通信和事件处理。然而，根据现有的信息，uni-app并没有直接支持EventSource，这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。尽管有些主流浏览器支持SSE，但小程序目前还不能兼容这个API，这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。一个替代实现方式c
  • java数据透视表插件_纯前端表格控件SpreadJS：新增数据透视表插件等，完美呈现强大的Excel数据分析能力... 天生双下巴 java数据透视表插件
    SpreadJS是一款基于HTML5的纯前端电子表格控件，兼容450种以上的Excel公式，凭借其“高性能、跨平台、与Excel高度兼容”的产品特性，备受以华为、苏宁易购、天弘基金等为代表的企业用户青睐。新版本特性:新增数据透视表插件，拥有强大的Excel数据分析能力在线表格编辑器(控件版)：更易嵌入、秒级加载、灵活定制新增迭代计算功能，可实现高精度计算支持渐进加载、HTML导出支持渐进填充、多列
  • 百度UE（编辑器）如何高效导入Word文档中的图片？ 2501_90699850 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • html初学 wgego html前端
    一.什么是HTMLHTML是用来描述网页的一种语言。HTML指的是超文本标记语言:HyperTextMarkupLanguageHTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页HTML文档包含了HTML标签及文本内容HTML文档也叫做web页面声明为HTML5文档元素是HTML页面的根元素元素包含了文档的元（meta）数据，如定义
  • HTML/CSS笔记 可能是小李吧 学习笔记csshtml
    思维导图HTML网页的基本结构文档声明，声明当前文档版本迭代网页的版本HTML4XHTML2.0HTML5...文档说明文档说明用来告诉浏览器当前的版本进制二进制十进制八进制十六进制字符编码所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。所以一段文字在存储到内存时，都需要转换为二进制编码当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读解码将二进制码转换为字符的过程称为解码
  • 22、web前端开发之html5（三） 跟着汪老师学编程 前端html5
    六.离线存储与缓存在网络环境不稳定或需要优化资源加载速度的场景下，离线存储与缓存技术显得尤为重要。HTML5引入了多种离线存储和缓存机制，帮助开发者提升用户体验。本节将详细介绍ApplicationCache、localStorage、sessionStorage以及IndexedDB等技术，帮助你理解如何在不同场景下选择合适的存储和缓存策略。1、ApplicationCacheApplicati
  • 如何在网页编辑器中使用KindEditor导入Excel文件？ 2501_90699640 编辑器excelumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入word
    要求：开源，免费，技术支持编辑器：KindEditor前端：vue2,vue3,react,vue-cli,html5,后端：java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows
  • “网页编辑器新技能：UMEDITOR的WORD、PDF导入解决方案？“ weixin_52041354 编辑器wordpdfumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度UM编辑器能否支持粘贴WORD文档并自动上传图片？“ 2501_90646763 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • “百度富文本编辑器（UMEDITOR）如何高效导入WORD内容？“ 2501_90646449 umeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片ueditor导入wordueditor导入pdfueditor导入ppt
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他