共14页: 首页 上一页 5 6 7 8 9 10 11 12 13 下一页 末页 
摘要: 上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: 加速度分解与合成 抛物线运动: 重力弹跳: 抛物线与重力弹跳运动 摩擦力运动阅读全文
posted @ 2017-10-09 20:34 ghostwu 阅读(1458) 评论(0) 编辑
摘要: 匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。 上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半,以每帧2px的速度向右匀速运动.阅读全文
posted @ 2017-10-08 20:48 ghostwu 阅读(1234) 评论(0) 编辑
摘要: 效果图: 这个实例主要注意: 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 阅读(439) 评论(0) 编辑
摘要: 七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可。 tangram存储了每个形状的顶点坐标与填充颜色,p就是每个区域的顶点组成的数组,数组中每个点用一个json对象存储.,一个有7个形状,tangra阅读全文
posted @ 2017-10-08 15:53 ghostwu 阅读(401) 评论(0) 编辑
摘要: 一、什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, getElementsByTagName等等这些就是document对象支持的方法,那么我们常见的阅读全文
posted @ 2017-10-08 14:43 ghostwu 阅读(422) 评论(1) 编辑
摘要: 有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画阅读全文
posted @ 2017-09-30 09:48 ghostwu 阅读(1574) 评论(4) 编辑
摘要: 在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题? 优势与特点: 1)requestAnimationFrame会把每一帧中的所有DOM操阅读全文
posted @ 2017-09-29 15:21 ghostwu 阅读(2744) 评论(2) 编辑
摘要: 接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一、线形渐变 线形渐变指的是一条直线上发生的渐变。 用法: var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); line阅读全文
posted @ 2017-09-28 16:40 ghostwu 阅读(1437) 评论(0) 编辑
摘要: 接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现反色,黑白,亮度,复古,蒙版,透明等美颜效果. getImageData:获取一张图片的像素数据 c阅读全文
posted @ 2017-09-28 11:47 ghostwu 阅读(1152) 评论(1) 编辑
摘要: 本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数,这个函数在这篇文章[js高手之路] html5 canvas系阅读全文
posted @ 2017-09-27 15:51 ghostwu 阅读(1626) 评论(0) 编辑
摘要: 接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理。在游戏中的资源大多数都是加载图片. 阅读全文
posted @ 2017-09-27 11:41 ghostwu 阅读(1316) 评论(4) 编辑
摘要: 接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillTe阅读全文
posted @ 2017-09-26 21:20 ghostwu 阅读(468) 评论(0) 编辑
摘要: 上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度,值是一个数值,如lineWidth = 5. 画3条不同宽度的线条: lineWidth设置弧形阅读全文
posted @ 2017-09-26 17:33 ghostwu 阅读(2259) 评论(0) 编辑
摘要: 之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, 半径 ) cx,cy表示控制点的坐标,x2,y2表示结束点的坐标,如果我们想画一条弧线,需要提供3个阅读全文
posted @ 2017-09-26 16:25 ghostwu 阅读(1378) 评论(0) 编辑
摘要: 绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度阅读全文
posted @ 2017-09-25 21:33 ghostwu 阅读(1073) 评论(0) 编辑
摘要: 路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. 在画每一条线之前,我都用storeStyle设置了线的颜色,但是,出来的结果却是3条黄色的线,并不是红、橙、黄三条颜色不同的线。为什么呢? 首先我们要搞清楚canvas渲阅读全文
posted @ 2017-09-25 20:32 ghostwu 阅读(1022) 评论(0) 编辑
摘要: 我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一、直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 ):将画笔从起点开始画直线,一直画到终点坐标( x2, y2 阅读全文
posted @ 2017-09-25 16:11 ghostwu 阅读(2029) 评论(1) 编辑
摘要: canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的。canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支持canvas,谷歌和火狐的支持性很好,IE8不支持。你可以参考这个网站,查看canvas的支持性:阅读全文
posted @ 2017-09-25 11:08 ghostwu 阅读(5250) 评论(0) 编辑
摘要: 接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,S阅读全文
posted @ 2017-09-24 18:09 ghostwu 阅读(678) 评论(1) 编辑
摘要: 什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的值。另一个是done,他是一个布尔值,用来表示该迭代器是否还有数据可以返回. 3,迭代器还会保存一个阅读全文
posted @ 2017-09-24 15:31 ghostwu 阅读(749) 评论(1) 编辑
共14页: 首页 上一页 5 6 7 8 9 10 11 12 13 下一页 末页 
Copyright ©2017 ghostwu