canvas
文章平均质量分 92
陆康永
是时候开始明确自己写博客是为了什么,以前搞不懂,感觉挺浪费时间的,而且自己的水平写出了的博客可参考价值也不大,权当给以后的自己一个了解过去自己的机会,避免继续踩坑。
展开
-
1.canvas只刮刮乐
写在前面:1.并非讲刮刮乐,只是讲刮开的效果实现方法2.涉及canvas知识点:A.moveTo(x,y) ,lineTo(x,y) , lineCap="round"B.stroke();//描绘C.获取像素 --------------elem.getImageData(0,0,elem.width,elem.height); 相关文档D:源文件和目标文件的原创 2015-12-19 20:12:33 · 953 阅读 · 0 评论 -
十九小球解说运动,鼠标交互,弹性运动
煮酒论英雄,小球趣说运动1.缓动动画2.弹性运动鼠标跟随鼠标在线demo如果我们的鼠标做圆周运动,我们惊讶的发现不知不觉中我们实行了一个橡皮筋绑着小球甩圈圈的效果。童年味道满满的(✪ω✪)<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title><...原创 2018-03-02 22:47:56 · 365 阅读 · 0 评论 -
十八.2弹性动画 小球,悠悠球
先上demo<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta charset="utf-8" /> <script src="j原创 2018-03-02 22:32:07 · 629 阅读 · 0 评论 -
十八。缓动动画 一个小球跟随鼠标 2个小球跟随鼠标
简述:缓冲动画是一个物体从滑动到某个目标就停下来。缓冲动画是指带有一定减速效果(可以直接理解某个属性值变化量慢慢的变小,直到物体达到目标值“这个变化值”为0,加速度从大到小)实现缓冲动画需要牢记一下几个步骤:1。给出物体与终点的距离(属性和目标值的差距)2.定义一个0!1的缓动系数easing3.计算出当前的速度,其中当前的速度=距离X缓动系数4.计算新的位置,其中新的位置=当前位置+当前速度重新...原创 2018-03-02 21:43:31 · 667 阅读 · 0 评论 -
边界检测,Math.random的妙用,喷射的霰弹
边界生成,通过鼠标控制小球运动,碰到边界停止在线demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head>&原创 2018-02-11 11:49:40 · 354 阅读 · 0 评论 -
十七,捕获物体,拖拽物品,投掷物品
一,捕获对于物体捕获主要有一下四种情况:1.矩形捕获2.圆形的捕获3.多边形的捕获4.不规则性圆形的捕获多边形的捕获和不规则圆形的捕获才用分离轴定理(SAT)和最小偏移量(MTV)没接触过,听说很难,以后接触到考虑从开博文这里不做叙述矩形捕获和圆形捕获,其实原来都是只需要判断鼠标所在的X,Y坐标是否在绘制范围内就可以mouse.X,mouse.Y分别是鼠标的X轴,Y轴坐标,rect.x,rect....原创 2018-02-11 15:36:21 · 375 阅读 · 0 评论 -
十六.碰撞检测,外接圆检测,外接矩形检测,多个物体两两比较
简单的碰撞检测的常见方法有:1.外接矩形判断2.外接圆判断一,外接矩形判断判断两个矩形是否发生碰撞,只需要判断:两个矩形左上角的坐标所处的范围,如果两个矩形的左上角的坐标满足一定的条件,两个矩形就发生碰撞语法:window.tools.checkRect=function(rectA,rectB){ return ( rectA.x+rectA.width<rectB....原创 2018-02-11 14:49:16 · 1083 阅读 · 0 评论 -
十四.2重力,重力加速度,重力加速度运动
生活中,每时每刻我们都逃脱不了地球对我们的作用力--重力。说到重力,不得不提的东西,那就是重力加速度重力加速度说特殊也特殊,说不特殊,真的一点都不特殊。特殊:是两个物体之间的引力形成不特殊:其实就是个Y轴方向的正方向(只是相对canvas坐标系而言)加速度,这里再次强调CANVAS的坐标Y轴下方向为正方向语法:vy+=g;obj.y+=vy;抛物线在线demo:<!DOCTYPE html&...原创 2018-02-10 00:10:01 · 1923 阅读 · 0 评论 -
十四.2摩擦力
摩擦力,是指阻碍物品运动的相对作用力。其中摩擦力的方向和物体相对运动方向相反。但是,摩擦力只会让速度的绝对值不断的变小直至0而不会改变它的运动方向。语法:vx*=F;vy*=F;obj.x+=vx;obj.y+=vy;F取值[0~1]X轴方向摩擦力在线demo:<!DOCTYPE html><html lang="en"><head> <me...原创 2018-02-10 00:36:47 · 402 阅读 · 0 评论 -
十四.2加速度运动,加速度的合成和分解
加速度运动,是指方向相同、速度大小变化的运动。速度递增是加速度,速度递减是减速度.加速度运动分为两种:匀速加速度和变速运动加速运动和匀速运动的区别:匀速运动是速度大小一致报错不变,加速运动的速度大小会随着时间的变化而改变(变大或者变小)图1:语法:vx+=ax;vy+=ay;obj.x+=vx;obj.y+=vy;obj.x为X轴的坐标obj.y为y轴的坐标vx表示x轴方向的加速度vy表示Y轴的加...原创 2018-02-09 23:45:49 · 4384 阅读 · 0 评论 -
十四.2匀速运动,匀速运动速度的合成和分解
一,匀速运动匀速运动,又称为匀速直线运动,是指物体在一条直线上运动,并且物体在任何时间间隔内通过的位移都是相等的。从上面可知,匀速运动需要具备2个条件,及速度大小相同和速度方向一致匀速运动是一种加速度为0的运动,匀速运动只有一种,那就是匀速直线运动。至于匀速圆周运动,巨阙来说应该是匀速圆周运动或者军角度运动,应为他的加速度不为0(加速度,意思是速度不断的变动,递增或者递减)在匀速运动中,速度是有正...原创 2018-02-09 23:16:15 · 2121 阅读 · 0 评论 -
七.canvas像素操作
反转颜色: Document function $$(id){ return document.getElementById(id); } window.onload=function(){ var cnv=$$("canvas"); var ct=cnv.getContext("2d"); var image=new Image(原创 2018-01-28 19:18:34 · 544 阅读 · 0 评论 -
十四 。三角函数的运用
三角函数在canvas中运用极为广泛,常见的用途有1.两点之间求距离2.圆周运动3.波形运动一,求两点之间的距离两点之间的距离其实不是三角函数 ,而是勾股定理,不过勾股定理本身就和三角形有关,这里暂且划分到三角函数里面去本篇文章涉及的依赖文件会在xx提供 图1:在CANVAS中,假设有2点(x1,y1)和(x2,y2),求原创 2018-02-04 00:12:51 · 1109 阅读 · 0 评论 -
九.CANVAS Math.atan和Math.atan2的区别
在cavans中,凡是涉及角度都用“弧度”表示,例如180度就应该写成Math.PI,e而360度就该写成Math.PI*2,在实际开发中,推荐一下写法:度数*Math.PI/180CANVAS使用的是W3C坐标系:三角函数公式:Math.atan的弊端:tan度=X/Y;坐标轴有四个像限:X/Y=-X/-Y-X/Y=X/Y这种情况会原创 2018-01-29 00:29:03 · 2106 阅读 · 4 评论 -
八.CANVAS图片像素操作
CANVAS对图片操作有同源要求,不能跨域,必须在服务器环境反转颜色:在线DEMO Document function $$(id){ return document.getElementById(id); } window.onload=function(){ var cnv=$$("canvas"); var ct=cnv.g原创 2018-02-03 23:32:08 · 497 阅读 · 0 评论 -
2.手机竖直方向实现循环切换页面
效果:写给自己:以前一直很好奇,这个是怎么做的,特别是缩小的那个li,郁闷了好久都不知道怎么写,今天终于找到思路了,赶紧贴下代码,免得下次忘记其实,这就是个拖拽运动,以前经常写用ouchstart touchmove touchend来制作的那个demo写在前面:注意红色字体,请自动开启忽略注析代码以及不调用的代码,有些代码是上一篇的,下一篇需要接着所以不去除思路:原创 2015-12-20 11:28:46 · 698 阅读 · 0 评论 -
CANVAS 变换,transform,rotate,scale,矩阵,css3矩阵,svg矩阵
本篇文章涉及内容包括: canvas: translate rotate scale transform(a,b,c,d,e,f),矩阵方法,拓展到SVG和CSS3(代码未提交,待续) setTransform,transform的区别css3:3D家居---css transform属性的执行次序canvas使用的基本思路:1.创建JAVASCRIPT对象,初始化基本配置2.通过...原创 2018-01-28 21:46:26 · 3245 阅读 · 4 评论