canvas
文章平均质量分 85
_let
要么孤独,要么庸俗
展开
-
canvas 简单入门
转自:xmt1139057136的专栏HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现,等等。本文主要关注图形方面的转载 2018-01-02 10:56:04 · 555 阅读 · 0 评论 -
17、《每周一点canvas动画》——星球守护
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->代码文件在介绍完碰撞检测的内容后,总感觉不拿它做点什么事情有点虚啊!本章的内容应该在上周就更新完成,但是由于这几天实在比较忙。一直没空把这个小游戏的过程写出来,就一直拖到了现在。如题,我取了个比较炫酷的名字——星球守护。其实呢,也就是一个简单转载 2018-01-15 17:26:22 · 467 阅读 · 1 评论 -
18、《每周一点canvas动画》——角度反弹
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在上一节我们介绍了高级的坐标旋转方法,我们只需要知道物体的位置,通过设定每一帧需要旋转的角速度,通过公式newX = x*cos - y*sin;newY = y*cos + x*sin;就可以计算出做圆转载 2018-01-15 17:27:13 · 498 阅读 · 1 评论 -
19、《每周一点canvas动画》——桌球运动(1)
每周一点canvas动画代码文件一本好的技术书籍往往都是由浅入深,本系列文章基本上也遵循这个原理。在上一章中我们介绍了高级的坐标旋转,并且通过它,我们实现了任意角度的碰撞反弹效果,它让物体与非水平和非垂直的面产生合乎情理的碰撞成为了可能。那么在本章我们继续深入的介绍另一个问题——物体与物体发生碰撞后应该如何处理?也许你会说,在前面的章节中我们不是已经介绍过物体与物体之间的碰撞检测了吗?但...转载 2018-04-17 11:09:02 · 687 阅读 · 2 评论 -
20、《每周一点canvas动画》——桌球运动(2)
每周一点canvas动画代码文件在上一节,《每周一点canvas动画》——桌球运动(1)中我们介绍了如何运用动量守恒和能量守恒的概念,最为真实的模拟了物体与物体之间发生碰撞后的情况。那么这一节,我们在上一节的基础上我们继续深入研究,非水平和垂直的情况下如何处理物体与物体之间碰撞后的情况,以及更为普适的多物体运动。本节主要内容:二维碰撞解析代码实现粒子系统总结1.二...转载 2018-04-17 11:15:52 · 550 阅读 · 0 评论 -
21、《每周一点canvas动画》——万有引力
每周一点canvas动画代码文件本章介绍,另一个动画应用——万有引力。听起来似乎有些玄乎,但是多事情千万不要被表面现象所迷惑,理解了原理就很简单!不管是地球上的是物体,还是宇宙中的星辰,物体与物体之间总是存在着一种看不见摸不着的的力场作用,这也就是为什么牛顿会被苹果砸,地球会围绕太阳做运动。在上一章我们讲解动量守恒,让很多人头疼不已,因为那应该算是这个系列最难的部分了吧。但我心中始终坚...转载 2018-04-17 11:17:37 · 654 阅读 · 0 评论 -
22、《每周一点canvas动画》——从2D到3D
前面的章节我们介绍了2D层面的canvas动画,基本上如果你对原理和概念都理解了,一般的2D层面的动画对你来说都是小菜一碟。从这一章开始我们介绍如何使用2D的canvas来渲染3D系统。1.CSS3与webGL提到3D效果,你可能首先会想到css3中的3D动画。通过它,单个元素或是整个页面都可以通过动画,图片滤镜,以及2D或3D的变换变得生动起来。使用它来构建3D效果,一个最为直观的感...转载 2018-04-17 11:19:22 · 1332 阅读 · 0 评论 -
23、《每周一点canvas动画》——3维环境搭建
在上一篇《每周一点canvas动画》——从2D到3D中,我们讨论了要在2D的平面实现3D的效果,是一件多么复杂的事情。但是对于一些简单的3D效果,使用webGL不仅有杀鸡用牛刀的感觉,而且浏览器的兼容性也是一个很大的问题。所以,我们考虑在2D的canvas中去模拟3D的效果,将其作为我们项目中的降级方案。也许你对在2D的canvas中去模仿3D的效果保有怀疑,这里我先给一个小小的demo,让你直观...转载 2018-04-17 11:44:52 · 944 阅读 · 0 评论 -
24、《每周一点canvas动画》——3D物理效果
在上一节《每周一点canvas动画》——3维环境搭建中,我们详细的介绍了要想在2D的画布上实现立体效果,需要做哪些事情。也就是我们所说的,怎样给画布中的物体搭建一个可以做三维运动的环境。这之后的所有知识和应用都是基于此环境来运行的。所以,务必弄懂。到现在为止,你可能发现我们所搭建的三维环境只是针对物体的大小变化做了一定的处理。但是,除了物体的大小,三维环境中,物体的颜色,物体的在光源环境下所展...转载 2018-04-17 12:00:25 · 812 阅读 · 0 评论 -
24、《每周一点canvas动画》——森林与星海
在上一节《每周一点canvas动画》——3D物理效果中,我们介绍了3维环境下的速度与加速度效果。这一节,我们继续介绍另外两个物理效果:重力和屏幕环绕。一、重力三维系统中实现重力效果的方式与二维的情况一样,设定一个重力值,比如 g=0.2 。然后,在动画循环中将它作用于物体竖直方向的速度上。虽然原理上没有什么大的变化,但是多了一个维度实现出来的效果确实相当具有视觉冲击力的。ok,一图胜千...转载 2018-04-17 13:41:53 · 451 阅读 · 0 评论 -
26、《每周一点canvas动画》——3D旋转与碰撞
各位同学实在不好意思,最近忙着面试找工作,耽搁了一个星期。由于前一篇文章的关注的量比较多,让我决定以后的文章尽量多加一些高质量的DEMO和配图。可能这比较耗费时间,但质量才是王道,希望大家给点时间。上一节我们介绍了重力和屏幕环绕在三维环境下的物理效果。其实三维环境中物体的运动状态,基本上与二维环境一样,主要的运动状态无非也就是那么几个:匀速运动,加速运动,碰撞,旋转等。再往后如果想要制作更加复...转载 2018-04-17 13:50:35 · 1937 阅读 · 0 评论 -
28、《每周一点canvas动画》——canvas特效插件
很长时间没有更新文章了,经过几个月的时间,事情终于忙完了。今天,在这里为大家分享3款 canvas 特效插件,与其说是分享,不如说是为了方便使用,对前面章节的一些效果的封装。1. Martrix.jsGIthub地址API| 属性 | 类型 | 默认值 | 描述 | — | cW Number 1367 canvas宽度 cH Num...转载 2018-04-17 14:19:44 · 2800 阅读 · 0 评论 -
《每周一点canvas动画》——圆周运动
效果源码 终于到年底了,再过两天我也要回家过年了,想想就激动呢!今天给大家带来一个基于移动端的canvas价格选择效果。主要功能就是拖动标尺变动价格。而且支付宝和京东金融的里也有这样的效果(果然天下设计都是你抄我我抄你啊?)。效果演示地址点击预览1.实现思路整个效果的核心就是用canvas绘制的标尺。一共包括标尺主体,数字,和中间固定不变的标定轴,这几个部分都用canvas绘制。最...转载 2018-04-17 15:40:18 · 655 阅读 · 0 评论 -
8、《每周一点canvas动画》——边界检测与摩擦力(2)
到目前为止,我们最常见的两种情形:物体按照一定的速度做任意运动直到碰上边界物体自身,或者通过外部的作用力,运用加速度来改变物体的速度不管怎样,除非我们主动设置物体在哪停住,或是撞击什么物体,否则物体就会以一定的速度朝着某个方向一直做运动。但是在现实世界中,这是不可能的,我们周围有太多的东西会阻碍一个物体的运动,比如空气阻力等,它会让物体的运动速度持...转载 2018-01-03 09:56:51 · 574 阅读 · 0 评论 -
16、《每周一点canvas动画》——坐标旋转
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在上一节中我们介绍了一些碰撞检测的方法。这一节本来打算讲解一个基于距离碰撞检测的小游戏。但是,因为最近比较忙,一直没来的及把游戏的整个过程完整的写出来。所以,这一节我们继续介绍下一项新技术——坐标旋转,它可能相转载 2018-01-15 17:25:06 · 884 阅读 · 0 评论 -
15、《每周一点canvas动画》——碰撞检测(2)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件如果你的画布上只有两个物体,那么他们之间的碰撞检测很容易就能实现。但是,当物体越来越多,你就需要一些必要的策略去检测物体之间的碰撞,不能漏掉任何的可能性,同时还要考虑性能问题,避免重复检测。上一节我们介绍了物转载 2018-01-15 17:23:57 · 605 阅读 · 0 评论 -
14、《每周一点canvas动画》——碰撞检测(1)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在前面的几章中我介绍了一些动画效果,这些动画效果都相对基础。但是通过这些基础的动画形式和概念,你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概念——碰撞检测,当然,我并不是说这个概念在理解上有转载 2018-01-15 17:22:53 · 922 阅读 · 0 评论 -
1.每周一点canvas动画-序
本系列文章均转自:我仍旧在这里(https://segmentfault.com/u/worengjiuzaizheli) 《每周一点canvas动画》是一个系列文章,本文并不对canvas的API做过多的介绍,我默认你已经了解基本的canvas绘图API,并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。一说到物理和数学知识各位骚年们是不是感觉蛋疼(原谅我说脏话了),不过我要告诉你,转载 2018-01-02 11:27:57 · 603 阅读 · 2 评论 -
2.每天一点canvas动画--用户交互
本系列文章均转自:我仍旧在这里(https://segmentfault.com/u/worengjiuzaizheli) 用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟,如果没有交互或者向动画中做一些动态的输入,那么这跟看电影有什么区别呢?用户交互基于事件,一般来说包括:鼠标事件,触摸事件和键盘事件。 1、事件和事件执行在理解事件之前,你需要明白什么是listene转载 2018-01-02 11:35:42 · 670 阅读 · 0 评论 -
3.每周一点canvas动画--三角函数
本节主要内容有:三角函数介绍常用三角函数解析跟随鼠标角度旋转看到三角函数,勾股定理这样的数学名词是不是有种双腿打颤的感觉啊!好吧,就算你已经吓尿了,也不能否认我们中学学习的知识终于有了用武之地,挽起袖子,开整!!!1、三角函数什么是三角函数呢?简单的定义:所谓三角函数,在几何上来说就是夹角与边的关系!为了更直观的表示,也为了让忘记的同学回忆起来,这里我给个示意图...转载 2018-01-02 11:38:14 · 573 阅读 · 0 评论 -
4.1、每周一点canvas动画--圆周运动
圆周运动可以分为两种基本的形式:正圆运动和椭圆运动。在讲解圆周运动之前,必不可少的数学公式即将袭来。so,各位骚年们,请护好自己的膝盖。听不懂没关系,只要明白其中的原理就行。当然,能懂是最好的,这对后面学习高级动画是很有帮助的。好吧,废话少说直接上菜。 1.正圆运动一般情况下,圆的直角坐标方程可以表示为:x2+y2=R2,根据此公式可以得出圆在直角坐标中的轨迹。也许,你会说这样就可以通过改变x,y转载 2018-01-02 11:42:23 · 607 阅读 · 0 评论 -
6、每周一点canvas动画--加速度
在上一节中我们介绍了速度的基本概念,包括沿坐标轴的速度,和更普适的任意方向的速度,在文章的最后我们做了一个鼠标跟随的示例,以及通过改变物体的rotation属性做了一个关于速度的扩展。通过上一节的学习你会发现在速度的作用下物体可以沿着任意方向运动了。但这还远远不够,因为我们的物体都是在做匀速运动。既然有匀速运动,当然就有变速运动喽!这一节我们介绍本章的另一个重要内容加速度。1.加速度基本概念以防有的转载 2018-01-02 11:46:16 · 1309 阅读 · 0 评论 -
5、每周一点canvas动画--速度
上一节中我们介绍了三角函数的应用,通过三角函数我们让小球实现了平滑运动,线性运动,圆周运动,脉冲运动等运动形式。这一节,我们介绍表征物体运动状态的另一个物理量——速度。1.速度与速率速度表征物体运动的快慢。在讲解速度与速率的概念之前,我们需要了解两个数学上的概念:矢量与标量标量:有大小而没有方向的物理量(速率,体积,温度)矢量:有大小也有方向的物理量(速度,动量,力)尽管我们平时很少区分速度和速率到转载 2018-01-02 11:45:15 · 2430 阅读 · 1 评论 -
4.每周一点canvas动画--波形运动
在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括:平滑运动线性运动脉冲运动1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生,其图形如下所示:如果想要取得sin函数在[0, 2π]之间的值,非连续的情况下,可以这样估算。123for(var angle=0; angle<Math.PI*2; angle+=转载 2018-01-02 11:40:30 · 1482 阅读 · 0 评论 -
7、《每周一点canvas动画》——边界检测与摩擦力(1)
本章已经是《Canvas 动画系列》动画的第七篇了,我保证这一章不会再有难的数学公式和物理概念。鉴于有的同学并不是从第一章开始看这个系列,我将会把本文所用到的一些 类文件 和 工具函数 文件放到文章的开头。关于前面每一章中的示例demo都可以在 canvas动画代码文件 中找到。下面是前面章节中我们用到的类文件和工具函数文件,有兴趣的同学可去下载。 ...转载 2018-01-02 11:49:18 · 1443 阅读 · 0 评论 -
9、《每周一点canvas动画》——移动物体(1)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在《每周一点canvas动画》——用户交互这一章我们介绍了用户交互事件,包括:鼠标事件,触摸事件和键盘事件。但是,到目前为止,我们除了键盘事件,对于另外两个事件几乎没有做过任何相应的应用。那么,在这一章,我们将要学习如何让c转载 2018-01-02 11:54:15 · 918 阅读 · 0 评论 -
10、《每周一点canvas动画》——移动物体(2)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在上一节《每周一点canvas动画》——移动物体(1)中我们介绍了如何捕获一个物体,并且对物体进行拖拽。首先,我们在小球的原型对象上添加了一个方法getBounds(),该方法的作用是返回一个对象,该对象内包含小球的坐标和长转载 2018-01-15 17:17:51 · 1153 阅读 · 1 评论 -
11、《每周一点canvas动画》——缓动动画
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画。今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ease 这个概念。但我们今天要介绍的是如何在c转载 2018-01-15 17:19:07 · 798 阅读 · 0 评论 -
11、《每周一点canvas动画》 —— 弹性动画
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在上一章我们介绍了缓动动画,并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与缓动动画都是基于距离的百分比动画,两者的不同之处在于,一个作用于速度(ease), 一个作用于加速度(spring)。弹性动画是动画中转载 2018-01-15 17:20:02 · 1104 阅读 · 0 评论 -
13、《每周一点canvas动画》—— 文字粒子
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->代码文件每周一点canvas动画系列文章目前已经更新了12篇,今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的,我对其做了些修改增强,添加了一些新的功能。UI界面就如下图中看到的样子。我们要实转载 2018-01-15 17:21:47 · 343 阅读 · 1 评论 -
a标签download属性下载还是打开了文件~(下载地址跨域了)
解决办法~canvas//下载图片到本地export function downloadIamge(imgsrc, name) { //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous'); image...原创 2018-09-17 11:23:28 · 19827 阅读 · 4 评论