随笔列表第9页 - ghostwu

2017年10月11日

[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

摘要：综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' /> <title>canvas炫彩小球 - By ghostwu</title> <style> #canvas { 阅读全文

posted @ 2017-10-11 15:34 ghostwu 阅读(1201) 评论(0) 推荐(1) 编辑

[js高手之路]html5 canvas动画教程 - 边界判断与反弹

摘要：备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹：当小球碰到canvas的四个方向的时候，保持位置不变，把速度变成相反的方向原理跟之前写的文章[js高手之路]html5 canvas 阅读全文

posted @ 2017-10-11 14:40 ghostwu 阅读(878) 评论(0) 推荐(1) 编辑

2017年10月10日

[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

摘要：备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文，我们要做点有意思的效果，首先，来一个简单的边界判断，所谓边界判断：就是把物体的运动限定在一个范围内.我们先来一个简单的实例，在canvas上阅读全文

posted @ 2017-10-10 15:38 ghostwu 阅读(1952) 评论(1) 推荐(1) 编辑

2017年10月9日

[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

摘要：上节，我们讲了匀速运动，本节分享的运动就更有意思了：加速运动重力加速度抛物线运动摩擦力加速运动: 加速度分解与合成抛物线运动：重力弹跳: 抛物线与重力弹跳运动摩擦力运动阅读全文

posted @ 2017-10-09 20:34 ghostwu 阅读(2740) 评论(0) 推荐(0) 编辑

2017年10月8日

[js高手之路] html5 canvas动画教程 - 匀速运动

摘要：匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。上述实例让一个半径20px的小球从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动. 阅读全文

posted @ 2017-10-08 20:48 ghostwu 阅读(2696) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

摘要：效果图：这个实例主要注意: 1，剩余时间的计算 2，每个时间数字的绘制时间主要有0-9和一个冒号组成，用数组来表示( 0: 就是不画圆，1：就是画一个蓝色的圆 ) num.js文件： 1 var digital = 2 [ 3 [ 4 [0,0,1,1,1,0,0], 5 [0,1,1,0,1, 阅读全文

posted @ 2017-10-08 17:03 ghostwu 阅读(1039) 评论(0) 推荐(1) 编辑

[js高手之路] html5 canvas教程 - 绘制七巧板

摘要：七巧板长什么样？用canvas把他画出来，其实就是把这7个区域的图形，每个点的坐标找出来，再用moveTo, lineTo连线，设置不同的颜色即可。 tangram存储了每个形状的顶点坐标与填充颜色，p就是每个区域的顶点组成的数组，数组中每个点用一个json对象存储.，一个有7个形状，tangra 阅读全文

posted @ 2017-10-08 15:53 ghostwu 阅读(1247) 评论(0) 推荐(0) 编辑

[js高手之路] javascript面向对象写法与应用

摘要：一、什么是对象？对象是n个属性和方法组成的集合，如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如：getElementById, getElementsByTagName等等这些就是document对象支持的方法，那么我们常见的阅读全文

posted @ 2017-10-08 14:43 ghostwu 阅读(1167) 评论(1) 推荐(1) 编辑

2017年9月30日

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

摘要：有了前面的canvas基础之后，现在开始就精彩了，后面写的canvas教程都是属于综合应用，前面已经写了常用的canvas基础知识,参考链接如下： [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画阅读全文

posted @ 2017-09-30 09:48 ghostwu 阅读(3661) 评论(4) 推荐(1) 编辑

2017年9月29日

[js高手之路] html5新增的定时器requestAnimationFrame实战进度条

摘要：在requestAnimationFrame出现之前，我们一般都用setTimeout和setInterval，那么html5为什么新增一个requestAnimationFrame，他的出现是为了解决什么问题？优势与特点： 1)requestAnimationFrame会把每一帧中的所有DOM操阅读全文

posted @ 2017-09-29 15:21 ghostwu 阅读(4816) 评论(2) 推荐(4) 编辑

2017年9月28日

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

摘要：接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一、线形渐变线形渐变指的是一条直线上发生的渐变。用法： var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); line 阅读全文

posted @ 2017-09-28 16:40 ghostwu 阅读(3881) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

摘要：接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)，相信大家都应该玩过美颜功能，而我们今天要讲的就是canvas强大的像素处理能力，通过像素处理，实现反色，黑白，亮度，复古，蒙版，透明等美颜效果. getImageData：获取一张图片的像素数据 c 阅读全文

posted @ 2017-09-28 11:47 ghostwu 阅读(3561) 评论(1) 推荐(3) 编辑

2017年9月27日

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

摘要：本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数，这个函数在这篇文章[js高手之路] html5 canvas系阅读全文

posted @ 2017-09-27 15:51 ghostwu 阅读(4039) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

摘要：接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片. 阅读全文

posted @ 2017-09-27 11:41 ghostwu 阅读(3635) 评论(4) 推荐(1) 编辑

2017年9月26日

[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

摘要：接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式： strokeText：描边文本 fillText：填充文本 fillStyle配合fillTe 阅读全文

posted @ 2017-09-26 21:20 ghostwu 阅读(2052) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

摘要：上文，写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)，本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度，值是一个数值，如lineWidth = 5. 画3条不同宽度的线条： lineWidth设置弧形阅读全文

posted @ 2017-09-26 17:33 ghostwu 阅读(6291) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

摘要：之前，我写了一个arc函数的用法：[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半径 ) cx,cy表示控制点的坐标，x2,y2表示结束点的坐标，如果我们想画一条弧线，需要提供3个阅读全文

posted @ 2017-09-26 16:25 ghostwu 阅读(4041) 评论(0) 推荐(0) 编辑

2017年9月25日

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

摘要：绘制曲线，经常会用到路径的知识，如果你对路径有疑问，可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc：画弧度 cxt.arc( x, y, 半径, 开始角度，结束角度，是否逆时针 ); x, y: 为弧度阅读全文

posted @ 2017-09-25 21:33 ghostwu 阅读(3537) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

摘要：路径在canvas绘图中，经常被用到，是一个非常重要的概念. 比如：我们要在canvas画出3条直线，要求用不同的颜色加以区分. 在画每一条线之前，我都用storeStyle设置了线的颜色，但是，出来的结果却是3条黄色的线，并不是红、橙、黄三条颜色不同的线。为什么呢？首先我们要搞清楚canvas渲阅读全文

posted @ 2017-09-25 20:32 ghostwu 阅读(3173) 评论(0) 推荐(0) 编辑

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

摘要：我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一、直线的绘制 cxt.moveTo( x1, y1 )：将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 )：将画笔从起点开始画直线，一直画到终点坐标( x2, y2 阅读全文

posted @ 2017-09-25 16:11 ghostwu 阅读(4976) 评论(1) 推荐(0) 编辑

ghostwu

Ubuntu+Vim下的程序员

公告