共 14 页: 首页 上一页 5 6 7 8 9 10 11 12 13 下一页 末页
摘要:综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' /> <title>canvas炫彩小球 - By ghostwu</title> <style> #canvas { 阅读全文
posted @ 2017-10-11 15:34 ghostwu 阅读 (749) 评论 (0) 编辑
摘要:备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的时候,保持位置不变,把速度变成相反的方向 原理跟之前写的文章[js高手之路]html5 canvas 阅读全文
posted @ 2017-10-11 14:40 ghostwu 阅读 (374) 评论 (0) 编辑
摘要:备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单的边界判断,所谓边界判断:就是把物体的运动限定在一个范围内.我们先来一个简单的实例,在canvas上 阅读全文
posted @ 2017-10-10 15:38 ghostwu 阅读 (1180) 评论 (1) 编辑
摘要:上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: 加速度分解与合成 抛物线运动: 重力弹跳: 抛物线与重力弹跳运动 摩擦力运动 阅读全文
posted @ 2017-10-09 20:34 ghostwu 阅读 (1690) 评论 (0) 编辑
摘要:匀速运动:指的是物体在一条直线上运动,并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动,它的特点是加速度为0,从定义可知,在任何相等的时间间隔内,速度大小和方向是相同的。 上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半,以每帧2px的速度向右匀速运动. 阅读全文
posted @ 2017-10-08 20:48 ghostwu 阅读 (1464) 评论 (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 阅读 (508) 评论 (0) 编辑
摘要:七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可。 tangram存储了每个形状的顶点坐标与填充颜色,p就是每个区域的顶点组成的数组,数组中每个点用一个json对象存储.,一个有7个形状,tangra 阅读全文
posted @ 2017-10-08 15:53 ghostwu 阅读 (529) 评论 (0) 编辑
摘要:一、什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, getElementsByTagName等等这些就是document对象支持的方法,那么我们常见的 阅读全文
posted @ 2017-10-08 14:43 ghostwu 阅读 (516) 评论 (1) 编辑
摘要:有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画 阅读全文
posted @ 2017-09-30 09:48 ghostwu 阅读 (2189) 评论 (4) 编辑
摘要:在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题? 优势与特点: 1)requestAnimationFrame会把每一帧中的所有DOM操 阅读全文
posted @ 2017-09-29 15:21 ghostwu 阅读 (3429) 评论 (2) 编辑
摘要:接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一、线形渐变 线形渐变指的是一条直线上发生的渐变。 用法: var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); line 阅读全文
posted @ 2017-09-28 16:40 ghostwu 阅读 (2228) 评论 (0) 编辑
摘要:接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现反色,黑白,亮度,复古,蒙版,透明等美颜效果. getImageData:获取一张图片的像素数据 c 阅读全文
posted @ 2017-09-28 11:47 ghostwu 阅读 (1429) 评论 (1) 编辑
摘要:本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数,这个函数在这篇文章[js高手之路] html5 canvas系 阅读全文
posted @ 2017-09-27 15:51 ghostwu 阅读 (2144) 评论 (0) 编辑
摘要:接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的内容是canvas开发,特别是游戏中,比较常用的内容:图片处理。在游戏中的资源大多数都是加载图片. 阅读全文
posted @ 2017-09-27 11:41 ghostwu 阅读 (1520) 评论 (4) 编辑
摘要:接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillTe 阅读全文
posted @ 2017-09-26 21:20 ghostwu 阅读 (662) 评论 (0) 编辑
摘要:上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽度,值是一个数值,如lineWidth = 5. 画3条不同宽度的线条: lineWidth设置弧形 阅读全文
posted @ 2017-09-26 17:33 ghostwu 阅读 (3039) 评论 (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 阅读 (1737) 评论 (0) 编辑
摘要:绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度 阅读全文
posted @ 2017-09-25 21:33 ghostwu 阅读 (1474) 评论 (0) 编辑
摘要:路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. 在画每一条线之前,我都用storeStyle设置了线的颜色,但是,出来的结果却是3条黄色的线,并不是红、橙、黄三条颜色不同的线。为什么呢? 首先我们要搞清楚canvas渲 阅读全文
posted @ 2017-09-25 20:32 ghostwu 阅读 (1273) 评论 (0) 编辑
摘要:我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一、直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 cxt.lineTo( x2, y2 ):将画笔从起点开始画直线,一直画到终点坐标( x2, y2 阅读全文
posted @ 2017-09-25 16:11 ghostwu 阅读 (2770) 评论 (1) 编辑
共 14 页: 首页 上一页 5 6 7 8 9 10 11 12 13 下一页 末页
Copyright ©2017 ghostwu