2018年04月_出于蓝

原创用贝塞尔曲线画曲线

在j中,提供了bezierCurveTo()方法,也就是利用起点,终点,两个控制点在canvas画贝塞尔曲线,首先,咱们通过moveTo函数将笔尖移动到曲线的起点,然后bezierCurveTo(控制点, 控制点, 终点)这样画出贝塞尔曲线.关于贝塞尔曲线的控制点,咱们可以大概看看这个图其中A是曲线的起点,D曲线的终点,B和C是曲线的控制点,将B和C连起来得到线段BCBC上的点G从左到右移...

2018-04-25 14:47:27 4878 1

原创 css3伸缩布局盒模型(一)

容器的设置语法是:display:box|inline-box我们来看看它们的区别:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3的伸缩布局</title> <st

2018-04-23 00:14:45 690

原创用css3径向渐变制作花纹背景

我们可以通过多种css3渐变的叠加制作各种各样好看的花纹css3中.如果有多种渐变叠加,先写的渐变会覆盖后写的渐变.制作格子花纹:代码如下: .bg{ width: 120px; height: 200px; background-color: #282828; background-image: ...

2018-04-22 21:17:18 1848

原题如下:Given a string s, find the longest palindromic substring in s. You may assume that the maximum length of s is 1000.时间复杂度为n平方.总体思路如下:首先,外层遍历从1开始寻找一个中心点,再一一比较中心点两边是否相等,比如说:babad 一开始的中心点是a,下标i=1,...

2018-04-16 16:15:31 134

原创前端里的几种颜色渐变

1 canvas画布里的渐变: 要创建一个新的线性渐变，可以调用createLinearGradient()方法。这个方法接收4 个参数：起点的x 坐标、起点的y 坐标、终点的x 坐标、终点的y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient 对象的实例。创建了渐变对象后，下一步就是使用addColorStop()方法来指定色标。这个方法接收两...

2018-04-14 23:31:05 8230

原创 svg里的clipPath和mask

svg里的clipPath定义了一个区域,在区域内的元素是可见的,区域外是不可见的,同时,区域外的元素无法产生事件.咱们先看一个简单区域的例子:<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" > <clipPath id="rectClip"> <rect

2018-04-14 21:48:40 1813 1

原创三维图形的投影变换

1.平行投影:1.1 正轴投影:我们通常说的三视图是指正视图、俯视图和侧视图, 投影平面分别与 x,y,z 轴垂直。正视图:(yz)俯视图:(xy)侧视图:(xz)1.2 正轴测投影:如图:咱们希望按照这个平面对物体进行平行投影:首先,先把物体及投影面沿着y轴顺时针旋转,在绕x轴逆时针旋转θ角,使投影面与z轴重合,变换矩阵如下:最后做Z方向的正投影:结果为:2 透视投影:2.1 一点透视:如图所示...

2018-04-12 13:35:25 5164

原创三维图形几何变换

与二维变换矩阵相似,采用齐次坐标的三维变换矩阵为同样可以分为四个子矩阵:对图像进行比例,旋转,错切,对称等几何变换,产生平移变换,对图形进行投影变换,对整体进行比例变换.1 平移变换:x方向移动d,y方向移动h,z方向移动l2 比例变换:x方向扩大a倍,y方向扩大f倍,z方向扩大k倍3 对称变换:以YOZ对称为例,其余平面都相似:4 旋转变换:用右手坐标系确定旋转角度正负(拇指与旋转轴正方向同向,...

2018-04-12 12:22:13 2646

原创二维图形的基本变换与裁剪的变换矩阵

设二维平面上有一点(x,y),经过图形变换后成为另一点(x1,y1),则可用向量乘上一个变换矩阵得:若用齐次坐标表示,则有:我们称为二维变换矩阵,可以分为四个矩阵:其中对图形进行比例变换,旋转,对称,错切等变换;对图形进行平移变换,对图形进行投影变换,[i]对整体图形做比例变换.1 单一变换1.1 平移变换:往x方向移动c,往y轴方向移动f,如图所示:1.2 比例变换:1.2.1 当a=e=1时,...

2018-04-12 01:10:09 7856 1

原创 DOM2 中的事件处理程序

1 添加删除事件“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。...

2018-04-11 16:30:18 226

原创 javascript中的事件流

1 事件冒泡:IE中得事件流叫做事件冒泡,就是事件最开始的元素接收,然后逐级向上传播到不具体的节点,举个例子:<!DOCTYPE html><html><head> <title>Event Bubbling Example</title></head><body> <div

2018-04-11 16:07:21 298

原创 javascript中的范围选区

1 使用DOM范围实现简单的选择:1.1 使用electNode()方法:举个例子:<!DOCTYPE html><html><body><p id="p1"><b>Hello</b> world!</p></body></html&g

2018-04-11 00:35:30 1004

原创动态插入html元素的几种方法

1 insertNode()方法: 方法可以向范围选区的开始处(光标处)插入一个节点。举个例子:<!DOCTYPE html><html><body><p id="p1"><b>Hello</b> world!</p></body></h

2018-04-11 00:10:13 1955

原创圆弧的生成算法(二)

正负法:算法原理:圆的方程为:F(x,y)=0;当点(x,y)在圆内时,有F(x,y)<0;若在圆外,则反之取P0(x,y)为A点,也就是所,我们可以求出Pi的点,然后接着找下一个点,方法是:当Fi(xi,yi)<0时往圆外方向走,也就是Xi+1=Xi + 1,Y+1=Yi,反之,则往园内走:Xi+1=Xi,Y+1=Yi - 1,我们推导一下递推公式:将F0初始化为0得出结论:当Fi&...

2018-04-10 22:03:35 4498 1

原创用动态规划法求最长子串和

原题如下: Find the contiguous subarray within an array (containing at least one number) which has the largest sum. For example, given the array [-2,1,-3,4,-1,2,1,-5,4], the contiguous subarray [4...

2018-04-10 13:51:13 161

原创圆弧的生成算法

1 Breasenham算法1.1 它的基本方法是从一个起点出发,利用判别式选择下一个显示点1.2 算法原理:假设圆心的坐标位于坐标原点,位于第一项限的1/8圆弧p1p2,它可以用方程画出:算法的每一步都选择一个离开理想圆周最近的点Pi(Xi,Yi)让他的误差项每一步都是最小的.Pi-1(Xi-1,Yi-1)是已经确定为最靠近圆弧的点,下一步x=xi-1+1时,要决定取T还是S更好.很明显,|D(...

2018-04-10 10:56:43 13167 3

原创直线的生成的两种算法

1 DDA算法(数字微分分析法):1.1算法思想:从直线段的起点像素出发,依据直线的微分方程确定描述直线的各个像素点1.2 算法原理:直线的起点(xs,ys)终点:(xe,ye)变化量为cx=xe-xs,cy=ye-ys;我们将变化时间设为ct.则有: x[i+1]=x[i]+cx/ct; y[i+1]=y[i]+cy/ct;1.3 算法描述:void drawline(int xs,...

2018-04-10 00:38:33 4512 1

原创在O(n)的时间复杂度空间复杂度为(1)的条件下删除有序数组的多余字符

原题如下:Given a sorted array, remove the duplicates in-place such that each element appear only once and return the new length.Do not allocate extra space for another array, you must do this by modifying...

2018-04-09 23:52:10 1034 1

原创用javascript判断字符串括号是否匹配

输入一个字符串,里面包含小括号,大括号,中括号,这个代码在市时间复杂度为n的情况下判断输入字符串是否合理.原题如下:Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the input string is valid.The brackets must cl...

2018-04-09 01:16:11 5752

原创 javascript的整数位数

今天偶然发现了一道题目: Given a 32-bit signed integer, reverse digits of an integer. 题目让我写一个函数,它把 integer传进来,函数返回 integer的反转数.这个题也没什么难度,但是他要求32位,而我们都知道js里的整数只有16位,这样的话,要是参数稍微大一点,肯定会溢出所以我无奈之下将 integ...

2018-04-07 00:30:08 3429

原创用svg来给图标绘边

首先先介绍一下 stroke-dasharray和stroke-dashoffset这两个属性1 stroke-dasharray这个属性就是给图标绘边.当 stroke-dasharray只有一个参数时,描绘的是需要,线段的长度,间隔的距离等于 stroke-dasharray的值当 stroke-dasharray有两个参数时,第一个表示线段的长度,第二个表示距离多个参数时,第奇数个参数表示线...

2018-04-04 23:59:41 285

原创用canvas做粒子组成的动画

一般来说,用canvas做粒子都要经过几个步骤1 先初始化画布的大小,画布的环境2 计算好各个点对象的位置,半径大小,颜色3 清空画布4将所有的粒子对象画在指定的位置5循环到步骤2粒子中,静态的用粒子组成一条抛物线在这个例子中,咱们定义的画布大小等于屏幕大小,所以写了一个函数来返回屏幕的高度和宽度:var Utils={ getWindowSize: function()...

2018-04-04 23:22:06 1770

原创 javascript的闭包

闭包:闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数，仍以前面的createComparisonFunction()函数为例function createComparisonFunction(propertyName) { return function(object1, object2){ var value1 = o...

2018-04-04 19:13:53 111

原创 javascript中的垃圾收集以及内存管理

垃圾收集 javascript中的垃圾收集机制很简单:找出那些不在使用的变量,然后释放他们. 局部变量只存在在函数执行过程中,所以,当函数执行结束之后,局部变量就没有存在的必要了.但是并不是所有的变量都是那样容易判断的,所以要用一些方法来回收这些变量 1 标记清除: javascript中最常用的垃圾收集方式是清除标记.当变量进入环境时,将这个变量标记为"进入环境",当变量...

2018-04-04 10:40:15 99

原创 javascript执行环境与作用域

1 执行环境执行环境是javascript中一个最为重要的概念,执行环境定义了变量或函数的有权访问其他数据,决定了它们各自的行为.每个执行环境都有一个与之相关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中,解析器在处理数据时会在后台使用它全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象,因此所有的全局变量和函数都是作为w...

2018-04-04 01:07:15 100

原创 javascript中的窗口

窗口关系及框架如果页面中包含框架,每个狂阶都拥有自己的window对象,且保存在frames集合中.在frames集合中,可以通过数值下标或者框架名称来访问window对象.举个例子: <html><head><title>Frameset Example</title></head><frameset row...

2018-04-03 22:13:40 155

原创 javascript中的window对象

window对象既是javascript访问浏览器窗口的一个接口,又是一个全局变量.这意味着在网页中定义的任何对象,变量,和函数,都以window作为其Global对象.由于window 对象同时扮演着ECMAScript 中Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。来看下面的例子var age = 29;function sayAge...

2018-04-03 21:26:42 299

原创用css和javascript做简单的破壳动画

今天是我的生日,就想用自己学的一点点小知识写一个破壳动画,开心一下首先,先画一个蛋然后动态的在蛋的上面画裂痕,这里画了一条波浪线来替代接着蛋蛋左右摇晃几下然后就破壳了整个动画不是特别流畅,但是知识有限,只能做得比较粗糙一些html部分: <div class="ege" id="shake"> <div class="...

2018-04-03 00:23:55 248

原创 javascript 两种函数书写方式及其区别

定义函数的方式有两种1 函数声明函数声明的语法是这样的: function functionName(arg0, arg1, arg2) {//函数体}首先是function 关键字，然后是函数的名字，这就是指定函数名的方式. 关于函数声明，它的一个重要特征就是函数声明提升（function declaration hoisting），意思是在执行代码之前会先读取函数声明。这就意味着可...

2018-04-03 00:04:06 1077

原创用css做一个旋转的球

我们都知道,球无论怎么旋转,无论从哪个角度看过去都是圈形所以,只要我们将球表面的图案围绕着球心转动,看起来就是球在转动point 是将里面的元素进行3D旋转,使之有一个躺下的效果face face2 是两只眼睛围绕的中心html部分:<div class="bg"> </div> <div class="point"> ...

2018-04-01 21:10:57 3168

原创用css的变换绘制银河系

html部分:<section class="galaxy"> <ul class="orbit"> <li class="mercury"><span> <span class="mer"></span></span&amp

2018-04-01 20:58:20 1054

原创用js放大鼠标放置图片区域

html部分:<div id="imagesSource" data_maxlmg="qing.jpg"> 原图 <img src="qing.jpg" class="minlmages"> <div class="focusPoint" id="focusPoint">focusP

2018-04-01 20:39:23 1285

orq18810575870的博客