Ping果狸-CSDN博客

原创 vue封装插件并发布到npm上

vue封装插件并发布到npm上项目初始化首先，要创建项目，封装vue的插件用webpack-simple很合适，vue init webpack-simple 项目名称此命令创建我们的项目的目录，创建文件夹和文件，最后结构是这样的然后根据需求，实现具体功能，这里我封装了一个轮播图组件mini-sliders，主要功能写在lib/slider.vue组件中功能写好后，我们要...

2018-02-15 23:26:56 6281 2

原创 JSONP原理及简单实现

JSONP原理及简单实现JSONP原理利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址（src属性）指向第三方的API网址，并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。例如： <script src="http://www.example.net/api?...

2018-02-13 18:38:00 3283

原创 css3 实现动画

css3 实现动画了解css3动画： - 动画是使元素从一种样式逐渐变化为另一种样式的效果。 - 可以改变任意多的样式任意多的次数。 - 可以用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。 - 0% 是动画的开始，100% 是动画的完成。 - 为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。在实现

2018-01-31 17:19:52 343

原创 button之type

button之typebutton标签的type属性值有三种：submit、button、reset；在使用button标签时要始终为按钮规定 type 属性。因为Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。如果不为button标签规定type属性，就容易出现点击页面按钮就自动刷新页面的情况。

2018-01-31 16:32:08 1020

原创 JS判断页面是在手机端还是PC端打开

JS判断页面是在手机端还是PC端打开Navigator 对象包含有关浏览器的信息，它的userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。所以我们可以通过navigator.useragent里面是否有某些值来判断页面是在手机端还是PC端打开，具体如下：方法一：function IsPC() { var userAgentInfo =

2018-01-24 14:11:19 3787

原创 Canvas之globalAlpha和globalCompositeOperation

Canvas之globalAlpha和globalCompositeOperationglobalAlphaglobalAlpha是使全局具有透明度 globalAlpha = 1 (default)globalCompositeOperationglobalCompositeOperation是渲染绘制的图像在重叠时的效果 globalCompositeOperation =

2018-01-22 00:37:23 978

原创 Canvas阴影

Canvas阴影Canvas提供四个接口设置阴影：设置阴影颜色：context.shadowColor设置阴影位移值：context.shadowOffsetX、context.shadowOffsetY（可以取负值，取负值时阴影在左、上方向）阴影模糊程度：context.shadowBlur context.fillStyle="#848"; context.

2018-01-22 00:28:52 341

原创 Canvas 文字渲染

Canvas 文字渲染文字渲染基础：首先定义font属性，然后用fillText()对文字进行渲染。context.font = “bold 40px Arial”;context.fillText(string,x,y,[maxlen]);其中，fillText()的第一个参数是要书写的字符串，第二、三个参数是书写的位置，第四个参数是可选参数，它描述的是绘制这一行文字的最长宽度

2018-01-21 23:20:39 590

原创 Canvas 曲线绘制

Canvas 曲线绘制Canvas 曲线绘制有四种方式：arc()、arcTo ()、quadraticCurveTo()、bezierCurveTo()。1. arc()context.arc ( centerx,centery ,radius ,startingAngle ,endingAngle ,anticlockwise = false) 参数： - centerx

2018-01-21 15:58:33 749

原创 Canvas样式讨论之fillStyle

Canvas样式讨论之fillStylefillStyle的赋值除了可以是color之外，还有可以有gradient、canvas 、img、video：gradientgradient分为线性渐变和径向渐变两种：线性渐变（Linear Gradient）线性渐变是定义在两点之间，定义线性渐变主要有两个步骤： Step1 var grd = context.creat

2018-01-21 14:32:44 1469

原创 Canvas 图形变换

Canvas 图形变换图形学领域倾向于对于任何图形的绘制都先绘制图形的基本轮廓，再用图形变换的方式把它绘制成需求的大小。基本的图形变换：位移translate ( x ,y )：把图像原点位移到( x ,y )的位置旋转rotate ( deg )：旋转deg的度数缩放scale ( sx ,sy)：在横向进行sx倍的缩放，在纵向进行sy倍的缩放。scale缩放具有副作用，

2018-01-20 00:36:27 495

原创 Canvas 线条属性

Canvas 线条属性线条有四种属性：lineWidth：线宽lineCap：设置线条两端的形状。属性值可以为butt（标准，default）/ round / square lineCap的效果只能用于线段的开始处和结尾处，不能用于线段的连接处。lineJoin：线条和线条相交的时候所呈现出来的形态。属性值可以为miter（default）/ bevel / round。mit

2018-01-19 23:05:52 470

原创 Canvas绘制矩形

Canvas绘制矩形context.rect ( x ,y ,width ,height ) //规划了矩形的路径 context.fillRect ( x ,y ,width ,height ) //根据fillStyle绘制出一个填充的矩形 context.strokeRect ( x ,y ,width ,height ) 根据strokeStyle绘制出一个矩形的边框conte

2018-01-18 23:47:23 497

原创 Canvas 绘制直线

Canvas 绘制直线1.canvas绘图是一种基于状态的绘图，绘图的过程应该是先设置绘图的状态，再调用具体的函数进行绘制。例如绘制一条（100,100）到（700,700）的直线：context.moveTo (100,100); //设置起点状态context.lineTo (700,700); //设置末端状态context.lineWidth = 5

2018-01-18 23:43:54 21373

原创 Canvas绘制入门

Canvas绘制入门HTML5元素用于图形的绘制，通过脚本（通常是JavaScript）来完成标签只是图形容器，要使用脚本来绘制图形canvas绘制步骤： 1、使用HTML来创建 HTML JavaScriptvar canvas = document.getElementById ('canvas');//获取canvas绘图上下文环境contextvar

2018-01-18 23:20:40 439

原创 phaser.js介绍

phaser.js介绍phaser.js是一款跨平台的HTML5游戏开发引擎，支持以下平台和浏览器：桌面端 IE9+、Firefox、Chrome、Safari等移动端 IOS5以上的Mobile Safari、安卓2.2以上的Stock Browser和Chrome等CocoonJS加速并打包成原生应用phaser.js的特征phaser.js内部支持pixi.j

2018-01-17 23:17:57 2277

原创 React组件生命周期

React组件生命周期组件的生命周期可分成三个状态： Mounted->Update ->UnmountedMounted:React Components被render解析生成对应的DOM节点，并被插入浏览器的DOM结构的一个过程 Update：一个mounted的React Components被重新render的过程（这个重新渲染的过程并不是说相应的DOM结构就一定会发生改变，r

2018-01-12 16:39:18 311

原创 node.js基础API（一）:Buffer

Buffer (缓冲)Buufer类用于处理二进制数据流。 Buffer 类的实例类似于整数数组，但 Buffer 的大小是固定的、且在 V8 堆外分配物理内存。 Buffer 的大小在被创建时确定，且无法调整。 Buffer 类在 Node.js 中是一个全局变量，因此无需使用 require(‘buffer’).Buffer。1.创建Buffer Buffer.alloc(size[,

2017-11-18 11:48:58 321

Path（路径）path 模块提供了一些工具函数，用于处理文件与目录的路径。可以通过以下方式使用：const path = require('path');path.normalize()path.normalize() 方法会规范化给定的 path，并解析 ‘..’ 和 ‘.’ 片段。如果 path 是一个长度为零的字符串，则返回 ‘.’，表示当前工作目录。const {normalize} =

2017-11-18 10:02:15 384

原创 # es6笔记（一）：let和const

es6笔记（一）：let和constletconstletes6新增了let命令，用于声明变量，其用法类似于var，但所声明的变量只在let命令所在的代码块内有效。let的特点：1.let声明的变量只在其所在的代码块有效function test() { for(let i=1;i<3;i++) { console.log(i); } console.l

2017-11-17 09:31:24 284

Ping果狸的博客