小天狼星tyx
小天狼星tyx

HTML5学习笔记--Canvas

canvas

基本语法结构

其中标签的id属性为必填内容，使用JavaScript进行绘图时可根据id找到需要绘图的画布，该名称可自定义。width和height属性分别表示画布的宽度和高度，可填入长度数值，其默认单位均为像素（px）。

在HTML5中，元素本身没有绘图能力，所有的绘图代码需要使用JavaScript完成。首先需要在JavaScript中创建context对象，然后用该对象动态的绘制画布内容。

其语法结构如下：

绘制路径

绘制路径主要有以下4种方法： beginPath()：用于新建一条路径，也是图形绘制的起点。 closePath()：该方法用于闭合路径。当执行该方法时会从画笔的当前坐标位置绘制一条线段到初始坐标位置来闭合图形。 stroke()：在图形轮廓勾勒完毕后需要执行该方法才能正式将路径渲染到画布上。 fill()：可以使用该方法为图形填充颜色，生成实心的图形。

实战项目

 HTML5学习笔记--Canvas_第1张图片

 

 

DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>手绘时钟title>
    head>
    <body onload="drawClock()">
        <h3>手绘时钟h3>
        <hr />
        <canvas id="clockCanvas" width="300" height="300" style="border:1px solid">
            对不起，您的浏览器不支持HTML5画布API。
        canvas>
        <script>
            //根据id找到指定的画布
            var c = document.getElementById("clockCanvas");
            //创建2D的context对象
            var ctx = c.getContext("2d");
            //绘制时钟
            function drawClock() {
                //保存画布初始绘制状态
                ctx.save();
                //清空画布
                ctx.clearRect(0, 0, 300, 300);

                /*（1）设置画笔样式和位置*/
                //设置画布中心为参照点
                ctx.translate(150, 150);
                //以画布中心为参照点逆时针旋转90度
                ctx.rotate(-Math.PI / 2);
                //设置画笔线条宽度为6
                ctx.lineWidth = 6;
                //设置画笔线条的末端为圆形
                ctx.lineCap = "round";

                /*（2）画12个小时的刻度*/
                //循环12次，每次绘制一条刻度
                for (var i = 0; i < 12; i++) {
                    ctx.beginPath();
                    //每次顺时针旋转60度
                    ctx.rotate(Math.PI / 6);
                    //绘制刻度线段的路径
                    ctx.moveTo(100, 0);
                    ctx.lineTo(120, 0);
                    //描线路径
                    ctx.stroke();
                }

                /*（3）画60分钟对应的刻度*/
                ctx.lineWidth = 5;
                for ( i = 0; i < 60; i++) {
                    ctx.beginPath();
                    ctx.moveTo(118, 0);
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                    ctx.rotate(Math.PI / 30);
                }

                /*（4）获取当前的时间*/

                //获取当前时间
                var now = new Date();
                //获取当前第几秒
                var s = now.getSeconds();
                //获取当前第几分钟
                var m = now.getMinutes();
                //获取当前是几小时（24小时制）
                var h = now.getHours();
                //将小时换算成12小时制的数值
                if (h > 12)
                    h -= 12;

                /*（5）绘制时针*/
                //保存当前绘图状态
                ctx.save();
                //旋转角度
                ctx.rotate(h * (Math.PI / 6) + (Math.PI / 360) * m + (Math.PI / 21600) * s);
                //设置时针样式
                ctx.lineWidth = 12;
                //开始绘制时针路径
                ctx.beginPath();
                ctx.moveTo(-20, 0);
                ctx.lineTo(80, 0);
                //描线路径
                ctx.stroke();
                //恢复之前的绘图样式
                ctx.restore();

                /*（6）绘制分针*/
                //保存当前绘图状态
                ctx.save();
                //旋转角度
                ctx.rotate((Math.PI / 30) * m + (Math.PI / 1800) * s);
                //设置时针样式
                ctx.lineWidth = 8;
                //开始绘制时针路径
                ctx.beginPath();
                ctx.moveTo(-20, 0);
                ctx.lineTo(112, 0);
                //描线路径
                ctx.stroke();
                //恢复之前的绘图样式
                ctx.restore();

                /*（7）绘制秒针*/
                //保存当前绘图状态
                ctx.save();
                //设置当前旋转的角度
                ctx.rotate(s * Math.PI / 30);
                //设置描边颜色为红色
                ctx.strokeStyle = "red";
                //设置线条粗细为6
                ctx.lineWidth = 6;
                ctx.beginPath();
                ctx.moveTo(-30, 0);
                ctx.lineTo(120, 0);
                ctx.stroke();
                //设置填充颜色为红色
                ctx.fillStyle = "red";
                //绘制画布中心的圆点
                ctx.beginPath();
                ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
                //填充圆点为红色
                ctx.fill();
                //恢复之前的绘图样式
                ctx.restore();
                /*
                /*（8）绘制表盘*/
                //设置样式
                ctx.lineWidth = 12;
                ctx.strokeStyle = "gray";
                //开始绘制表盘路径
                ctx.beginPath();
                ctx.arc(0, 0, 140, 0, Math.PI * 2, true);
                //描边路径
                ctx.stroke();
                //恢复最开始的绘图状态
                ctx.restore();
            }
            setInterval("drawClock()", 1000);
        script>
    body>
html>

你可能感兴趣的:(HTML5学习笔记--Canvas)

  • 保存画布到本地出现的bug和画布的隐藏 小旋风01234 css小程序
    和隔壁画布隐藏一起，卡了我几个小时…保存相册失败后，再次授权//下载btn(){uni.canvasToTempFilePath({//x:100,//y:200,//width:50,//height:50,//destWidth:100,//destHeight:100,fileType:'jpg',canvasId:'myCanvas',success:function(res){//在H5
  • Unity中WolrdSpace下的UI展示在上层 程序员也有头发 Unity开发unityui游戏引擎
    一、问题描述Unity中Canvas使用WorldSpace布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在UI的材质中禁用深度测试（ZTest），强制UI始终渲染在最上层。Shader"Custom/UI_NoDepthTest"{Properties{...}SubShader{Tags{"Queue"="Transparent+1000"//设置高优先级
  • Akamai 与 AWS 风控分析与绕过技术探讨 qq_33253945 aws云计算爬虫网络爬虫算法安全
    1.引言本文将深入探讨Akamai风控和AWS签名算法的技术细节。请注意，文中内容仅供技术研究和学习交流使用。2.Akamai风控核心要素Akamai的主要风控机制包含以下几个关键点：Canvas指纹识别每个浏览器环境都有其独特的Canvas指纹这是风控系统的核心识别方式之一用户行为分析鼠标移动轨迹检测操作行为模式识别相关参数的实时计算与验证JA3指纹TLS握手特征识别客户端环境特征分析代码执行流
  • uniapp，自绘仪表盘组件（基础篇） 智驾 uniapp项目实战uni-app仪表
    文章目录一、为什么需要自绘仪表盘？二、准备知识三、实现基础仪表盘1.组件模板结构2.核心绘制逻辑3.样式优化四、使用示例五、核心实现原理六、扩展方向七、常见问题一、为什么需要自绘仪表盘？在物联网、数据监控等场景中，仪表盘是常见的数据可视化组件。uniapp的组件市场虽然有许多现成方案，但自绘组件具有以下优势：完全掌控视觉效果无依赖零冗余高性能Canvas渲染轻松适配多端二、准备知识基础Canvas
  • 指纹浏览器与代理IP的协同技术解析：从匿名性到防关联实现 Hotlogin 火云指纹浏览器指纹浏览器tcp/ip网络协议网络
    一、技术背景与核心需求指纹浏览器通过模拟独立浏览器环境（包括User-Agent、Canvas指纹、WebGL参数等）实现多账号防关联，而代理IP通过隐藏真实IP地址提供网络匿名性。两者结合可解决以下技术痛点：双重身份隔离：单一指纹修改无法完全规避IP关联风险；动态环境模拟：代理IP支持地理位置切换，增强指纹浏览器模拟真实用户行为的能力；反检测能力提升：对抗网站基于IP黑名单或指纹追踪的风控策略。
  • QML ＜ 画布元素＞之画布绘制 ly_zszcyx 学习QmlQt
    绘制四个色块，使用鼠标选择颜色，按下鼠标，在画布上随意绘制绘制四个色块：当鼠标位置改变时，canvas的requestPaint函数用于请求重新绘制画布。函数不会立即触发重绘，而是向事件循环发送一个信号，表明画布需要更新。当事件进入下一次有机会处理时。它会调用onPaint回调函数来执行实际的绘图操作矩形框代码：importQtQuick2.15Item{id:rootpropertycolors
  • Android自定义视图绘制：Canvas实战案例解析 Ramaswamy
    本文还有配套的精品资源，点击获取简介：Android的Canvas工具允许开发者在屏幕上绘制图形，创建丰富视觉效果和交互体验。本案例"DrawDialDemo"深入解析了如何通过Canvas实现自定义画图，从创建画布到使用onDraw()方法，再到旋转图形和动态更新UI等高级技巧。通过实例演示，本案例详细讲解了仪表盘绘制的整个过程，包括指针、刻度线和数字等元素的绘制，以及如何在非UI线程中更新画布
  • 14道web前端工程师面试题及答案解析 蚂蚁小搬运工 web前端
    1.什么是HTML5？它有哪些新特性？答案：HTML5是HTML的第五个版本，引入了很多新的语法和特性，如语义化标签、多媒体支持、Canvas、地理定位、离线存储等。2.什么是WebGL？它有什么作用？答案：WebGL是一种用于在浏览器中渲染3D图形的API。它可以在浏览器中展示流畅和高质量的3D游戏和应用程序。3.什么是Canvas？它有什么作用？答案：Canvas是一种HTML5标签，用于在浏
  • Android自定义View全解析：从基础绘制到复杂交互，实战多种自定义View实现 tangweiguo03051987 android交互
    在Android开发中，自定义View的应用场景非常广泛。根据不同的需求，开发者可以创建各种类型的自定义View。以下是几种常见的自定义View类型及其实现思路和示例。1.自定义绘制View自定义绘制View是最基础的自定义View类型，通常用于绘制图形、文本、图像等内容。开发者通过重写onDraw()方法，使用Canvas和Paint来实现绘制。示例：自定义圆形ViewpublicclassCi
  • 实现全局水印鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例使用组件默认属性overlay实现组件级水印效果。实现全局水印源码链接效果预览使用说明水印效果，只需要在组件加上默认属性overlay即可每一个页面都加上，即可实现全局水印实现思路通过canvas绘制水印在用到的页面，在组件加上默认属性overlay核心代码如下：Canvas(this.context).width('100%').height('100%'
  • HTML5 Canvas制作雪花飘落动画 坚持坚持那些年
    本文还有配套的精品资源，点击获取简介：HTML5引入了Canvas元素，它赋予网页设计师丰富的绘图能力，允许通过JavaScript实现复杂的动画效果。本文将介绍如何结合HTML5的Canvas元素和JavaScript创建一个全屏的雪花飘落背景动画。通过定义雪花对象、创建雪花数组、编写主循环并利用requestAnimationFrame来绘制和更新雪花位置，我们能够实现一个逼真的雪花飘落动画效
  • Canvas资源宝典：全面探索HTML5 Canvas技术 支然苹
    Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor
  • 探索创新：CanvasParticles - 点燃你的网页动态效果 柏赢安Simona
    探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够
  • 探索CoreHTML5Canvas：创作动态Web图形的新工具 郁英忆
    探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特
  • H5基于Canvas实现电子签名并生成PDF文档 2401_85156853 程序员pdf前端java
    3.注册监听事件letbeginX:number,beginY:number;constcanvas:HTMLCanvasElement=canvasDom.current;constctx=canvas.getContext(‘2d’);ctx.fillStyle=‘#fff’;ctx.fillRect(0,0,canvas.width,canvas.height);canvas.addEven
  • 【Javascript网页设计】在线图片画板案例 Netsuite + 影刀 Javascript案例javascript
    代码如下：在线画板body{text-align:center;font-family:Arial,sans-serif;margin:20px;}.toolbar{margin-bottom:10px;}canvas{border:2pxsolid#000;cursor:crosshair;}button{margin:5px;padding:8px15px;border:none;backgr
  • 写给女朋友的动态爱心代码html（可修改名字） 不太会写 html动画css
    写给女朋友的爱心代码html（可修改名字）桌面新建一个txt文件，把代码复制进去，再把后缀改成.htmlhtml,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;height:100%;animation:anim1.5sease-in-outinfinite;-web
  • H5之webcoekt播放JPEG图片流 视频处理html5
    一、简介既然webcoekt是基于tcp连接的，理论上讲所有的浏览器是可以私有协议处理二进制的，如果我们需要播放视频，我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端，然后前端通过websocket接收图片然后将图片显示到img或canvas中即可，当然这个是我自己设想的，也是应该可以做的到了，做到如下需要以下技术支持：后端直接ffmpeg转码为jpeg图片流后端定制播放协议包括
  • 【uniapp】图片添加canvas水印 sailven uni-appvue拍照图片水印canvas
    目录需求&背景实现地理位置添加水印ios补充需求&背景需求：拍照后给图片添加水印,水印包含经纬度、用户信息、公司logo等信息。效果图：方案：使用canvas添加水印。具体实现：上传图片组件是项目里现有的，主要还是使用uni.chooseImage，这里不做赘述。在上传图片组件中增加一个参数判断是否添加水印，在获取到图片、上传到后端之前对图片进行加工。实现在模板中添加canvas。template
  • Godot4.3 显示像素风格图片模糊如何设置？ 松树戈 Godotgodot
    Godot4.3显示像素风格图片模糊如何设置？使用Godot4.3显示低分辨率像素风图片时比较模糊在ProjectSettings>Rendering>Textures>CanvasTextures设置`Nearest`（或`NearestMipmap`）解决效果使用Godot4.3显示低分辨率像素风图片时比较模糊在ProjectSettings>Rendering>Textures>Canvas
  • Laya2.x游戏引擎入门系列（二）：UI界面开发 安也 i 游戏
    前端开发和游戏开发相信选择laya游戏引擎这类h5游戏引擎的开发者或多或少都有一些前端的开发经验，在开始开发小游戏之后会努力寻找和过往开发经历相似的地方。最后会发现二者之间的关系类似于网页开发和node.js服务端开发之间的关系，虽然都是使用了前端的开发语言（JS或TS），但是背后涉及的知识点却完全不同。小游戏全部是通过canvas或者webgl画在页面中，而网页开发是通过浏览器去做的渲染。我们在
  • vue2 使用 html2canvas 将页面 dom 转为图片并下载记录 TangAcrab 工具dom转图片html转图片
    1、安装html2canvas依赖npminstallhtml2canvas-S2、页面中使用importHtml2Canvasfrom'html2canvas'//下载为png图片asyncdownFileByImg(imgName){//{分项名称}+{统计时段}+“能耗报表”+{导出时间（YYMMDDMMSS）}.pngtry{//文件名称constnowTime=formatDate(ne
  • vite：初学 p5.js demo 画圆圈 belldeep javascriptjavascriptp5.jsvitecircleellipse
    p5.js是一个JavaScript的函数库，它在制作之初就和Processing有同样的目标。就是让艺术家，设计师，教育工作者和编程初学者能够很容易，很轻松地学习和使用程序设计。实际上就是对canvas等代码的封装，简化了在Web中绘图的代码。为了方便，我将使用vite搭建一个原生js项目。1.创建项目npmcreatevite@latestp5-demo选：Vanilla选：JavaScrip
  • npm下载canvas报错 zzzll30 npm前端node.js
    npm下个canvas报错了，网上说的一堆方法都无效。特来记录下。canvas库说是要本地编译，需要本地的一些环境。跑canvas脚本报错。提示是需要安装python大于3.6.0的版本。根本原因是canvas下载完成后需要执行这句话node-pre-gypinstall--fallback-to-build--update-binary一般有两种解决方法第一种是下载编译好的适合自己操作系统的二进
  • 计算机编程 英语词汇 ZhangJiQun&MXP 2020c数据结构
    radius：半径Slate：石板，写字板Canvas：画布Airbrush：气笔，喷枪fountain：found：建立，从下向上：喷泉。压力值：PressurevalueBrushesPlotter：刷子，绘图仪画板。Stroke:(打、击等的)一下Strokes:笔画platform---平台version---版本project---项目existing---存在的checkout---检
  • 解决uniapp生成自定义海报/邀请名片，保存图片到本地
    本代码片段使用插件《qs-canvas》，支持Node、web、uni-app的canvas绘图工具。效果图安装npm包npminstallqs-canvas-S代码片段//index.vue保存图片到本地import{reactive,ref,computed,onMounted,getCurrentInstance}from'vue';import{getQrCode}from'./api/i
  • 可视化学习：WebGL实现简易的局部“马赛克”
    前言接触过Canvas的小伙伴应该都知道，在Canvas2D中我们要加载一个图片很简单，通过调用drawImageAPI就能将图像绘制到画布上，当然在WebGL中我们也可以绘制图像，在绘制时我们需要用到WebGL中的纹理对象，在之前WebGL实现网格背景的文章中，我使用了一个叫做纹理坐标的配置，现在要完成纹理的加载我们也需要用到纹理坐标，并且我们可以通过对纹理坐标处理实现简单的”马赛克“效果。通过
  • 可视化学习：使用WebGL绘制圆形，实现色盘
    前言在Canvas2D中实现圆形的绘制比较简单，只要调用arc指令就能在Canvas画布上绘制出一个圆形，类似的，在SVG中我们也只需要一个标签就能在页面上绘制一个圆形。那么在WebGL中我们要怎么去绘制呢？WebGL只能绘制三种形状：点、线段和三角形，它没有提供直接绘制圆形的功能，当然也无法像SVG一样使用标签，所以我们是无法直接绘制圆形曲线的，这个时候我们可以借助相关的数学知识，来实现圆形的绘
  • 为啥图片会模糊，canvas显示优化
    图片的原始尺寸，就是图片原始的拍摄或者生成出来的大小naturalWidth,原始宽度naturalHeight,原始高度样式尺寸img标签上的width，height缩放倍率，受浏览器缩放影响大小，跟操作系统设置也有关系，反正最后就是个值window.devicePixelRatio清晰度高满足如下公式原始尺寸=样式尺寸*缩放倍率画一个canvas来试试/*样式尺寸*/.canvas{width
  • uniapp微信小程序canvas隐藏 Ann_R uni-app微信小程序小程序
    亲测好用~HTML我是把canvas嵌套在view里并被view设置idCSS把它给顶出去#canvas{position:fixed;top:-9999999999999rpx;}本文作者：小泽沐优声本文链接：https://www.cnblogs.com/ooo51o/p/12956678.html版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎2.5中国大陆许可协议进行许可。
  • iOS http封装 374016526 ios服务器交互http网络请求
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。   内置一个basehttp，当我们创建自己的service可以继承实现。   KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; [baseHttp setDelegate:self]; [baseHttp
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具 brotherlamp linuxlinux教程linux视频linux自学linux资料
      那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 何为 lolcat ? Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
  • MongoDB索引管理（1）——[九] eksliang mongodbMongoDB管理索引
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述       数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。       不使用索引的查询称
  • Informatica参数及变量 18289753290 Informatica参数变量
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 [GLOBAL] $Par
  • python 解析unicode字符串为utf8编码字符串 酷的飞上天空 unicode
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。   转换方式如下   >>> import json >>> q = '{"text":"\u4
  • Hibernate的总结 永夜-极光 Hibernate
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道   做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
  • SyntaxError: Non-UTF-8 code starting with '\xc4' 随便小屋 python
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 ''' Created on 2014年10月27日 @author: Logic ''' print("Hello World!");  运行结果 SyntaxError: Non-UTF-8
  • 学会敬酒礼仪 不做酒席菜鸟 aijuans 菜鸟
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。 细节四：自己敬别人，如果碰杯，一
  • 《创新者的基因》读书笔记 aoyouzi 读书笔记《创新者的基因》
    创新者的基因   创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。   第一部分破坏性创新，从你开始 第一章破坏性创新者的基因 如何获得启示： 发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
  • 表单验证技术 百合不是茶 JavaScriptDOM对象String对象事件
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数   一:String对象;通常是对字符串的操作;   1,String的属性;   字符串.length;表示该字符串的长度; var str= "java"
  • web.xml配置详解之context-param bijian1013 javaservletweb.xmlcontext-param
    一.格式定义： <context-param> <param-name>contextConfigLocation</param-name> <param-value>contextConfigLocationValue></param-value> </context-param> 作用：该元
  • Web系统常见编码漏洞（开发工程师知晓） Bill_chen sqlPHPWebfckeditor脚本
    1.头号大敌：SQL Injection 原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 本质: 对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 示例： String query = "SELECT id FROM users
  • 【MongoDB学习笔记六】MongoDB修改器 bit1129 mongodb
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作  MongoDB的主要操作 show dbs 显示当前用户能看到哪些数据库 use foobar 将数据库切换到foobar show collections 显示当前数据库有哪些集合 db.people.update，update不带参数，可
  • 提高职业素养，做好人生规划 白糖_ 人生
      培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。   1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。  
  • 国外的网站你都到哪边看？ bozch 技术网站国外
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
  • 编程之美-光影切割问题 bylijinnan 编程之美
    package a; public class DisorderCount { /**《编程之美》“光影切割问题” * 主要是两个问题： * 1.数学公式（设定没有三条以上的直线交于同一点）： * 两条直线最多一个交点，将平面分成了4个区域； * 三条直线最多三个交点，将平面分成了7个区域； * 可以推出：N条直线 M个交点，区域数为N+M+1。
  • 关于Web跨站执行脚本概念 chenbowen00 Web安全跨站执行脚本
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数 comsci 开源项目
            现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
  • oracle alert log file（告警日志文件） daizj oracle告警日志文件alert log file
    The alert log is a chronological log of messages and errors, and includes the following items: All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060)
  • 关于 CAS SSO 文章声明 denger SSO
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
  • 初二上学期难记单词 dcj3sjt126com englishword
    lesson 课 traffic 交通 matter 要紧；事物 happy 快乐的，幸福的 second 第二的 idea 主意；想法；意见 mean 意味着 important 重要的，重大的 never 从来，决不 afraid 害怕 的 fifth 第五的 hometown 故乡，家乡 discuss 讨论；议论 east 东方的 agree 同意；赞成 bo
  • uicollectionview 纯代码布局, 添加头部视图 dcj3sjt126com Collection
    #import <UIKit/UIKit.h> @interface myHeadView : UICollectionReusableView { UILabel *TitleLable; } -(void)setTextTitle; @end #import "myHeadView.h" @implementation m
  • N 位随机数字串的 JAVA 生成实现 FX夜归人 javaMath随机数Random
    /** * 功能描述 随机数工具类<br /> * @author FengXueYeGuiRen * 创建时间 2014-7-25<br /> */ public class RandomUtil { // 随机数生成器 private static java.util.Random random = new java.util.R
  • Ehcache（09）——缓存Web页面 234390216 ehcache页面缓存
    页面缓存 目录 1       SimplePageCachingFilter 1.1      calculateKey 1.2      可配置的初始化参数 1.2.1     cach
  • spring中少用的注解@primary解析 jackyrong primary
    这次看下spring中少见的注解@primary注解，例子 @Component public class MetalSinger implements Singer{ @Override public String sing(String lyrics) { return "I am singing with DIO voice
  • Java几款性能分析工具的对比 lbwahoo java
    Java几款性能分析工具的对比 摘自：http://my.oschina.net/liux/blog/51800   在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
  • JVM参数配置大全 nickys jvm应用服务器
    JVM参数配置大全 /usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
  • 搭建 CentOS 6 服务器(14) - squid、Varnish rensanning varnish
    （一）squid 安装 # yum install httpd-tools -y # htpasswd -c -b /etc/squid/passwords squiduser 123456 # yum install squid -y 设置 # cp /etc/squid/squid.conf /etc/squid/squid.conf.bak # vi /etc/
  • Spring缓存注解@Cache使用 tom_seed spring
    参考资料 http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ http://swiftlet.net/archives/774   缓存注解有以下三个： @Cacheable      @CacheEvict     @CachePut
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误 xp9802
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 执行时却抛出以下异常： Exceptio
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他