本文将会从水波的基本原理开始，详细讲解在canvas中模拟水波扩散，分析并计算水波的能量分布，并通过振幅模拟水波对图像的折射效果，最后实现水波特效。
水波基本原理
首先复习一波高中物理知识。
波是指振动的传播。波的传播方向与质点振动方向垂直的为横波，相同则为纵波，水波是横波和纵波的叠加。
对于水波这种波，我们在实现这个特效的时候，需要考虑到下面的特性：
圆……继续阅读 »
悠悠
7年前 (2018-03-11) 11100浏览 4评论
82个赞
从简单的基本图形，到复杂炫酷的动画，通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D，能够使用丰富的API来进行图形绘制。这篇文章将会总结在之前的canvas教程中用到的所有渲染上下文的API。
可以参考之前的教程：
如何绘制基本图形可以参考：canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考：canv……继续阅读 »
悠悠
7年前 (2018-03-07) 4389浏览 0评论
3个赞
经过前面的文章，我们已经能够在canvas画布上画出各种炫酷的图形和画面，但是这些画面都是禁止的，怎么样才能让他们动起来呢？
如何绘制基本图形可以参考：canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考：canvas图形变换
如何设置基本图形颜色和样式可以参考：canvas样式和颜色
如何使用外部图片以及图形组合可以参考：canvas使用图片，图……继续阅读 »
悠悠
7年前 (2018-03-05) 3942浏览 0评论
33个赞
通过前面的章节，我们能够在canvas画出各种炫酷多样的图形，但是这些画好的图像如何保存下一次使用呢？这篇文章将会探讨如何保存和加载canvas画布上的图像。
如何绘制基本图形可以参考：canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考：canvas图形变换
如何设置基本图形颜色和样式可以参考：canvas样式和颜色
如何使用外部图片以及图形组合……继续阅读 »
悠悠
7年前 (2018-03-02) 6500浏览 0评论
6个赞
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动，旋转，缩放等变形方法，还会介绍如何在canvas中加载图像，图形之间的组合方式以及裁剪。
如何绘制基本图形可以参考：canvas基本图形绘制
如何对基本图形移动旋转缩放可以参考：canvas图形变换
如何设置基本图形颜色和样式可以参考：canvas样式和颜色
canvas系列教程可以参考：can……继续阅读 »
悠悠
7年前 (2018-03-02) 11151浏览 0评论
13个赞
这篇文章将会介绍如何在canvas中对绘制的基本图形进行移动，旋转，缩放等变形方法，还会介绍如何在canvas中加载图像。
状态的保存和恢复
为了在变形之后，能够将图形恢复原样，需要保存图形的原有状态：
save() restore保存和恢复canvas状态，都没有参数。
可以调用任意多次save方法
每一次调用restore方法，上一个保存的状态就从栈中……继续阅读 »
悠悠
7年前 (2018-03-02) 4518浏览 0评论
4个赞
在上一篇文章中，我们可以通过canvas绘制基本的图形，这些图形的颜色都是默认的，这篇文章将会介绍如何设置图形的颜色行样式，使得绘制的图形更加炫酷！
色彩 Colors
通过设置canvas上下文的两个颜色属性，可以给绘制的图形上色：
fillStyle = color 设置图形的填充颜色
strokeStyle = color 设置图形轮廓的颜色
……继续阅读 »
悠悠
7年前 (2018-03-01) 5124浏览 0评论
2个赞
概述
我们可以通过HTML中的canvas画布画出丰富多彩的图形甚至动画，你只需要：
在HTML中放置一个canvas标签
在HTML的JavaScript代码中获取这个canvas标签元素
通过获取的canvas元素，获取一个渲染上下文
通过获取的渲染上下文可以在画布上任意挥洒图画
另外需要注意的是，并不是所有浏览器都支持 canvas 元素，所以需要……继续阅读 »
悠悠
7年前 (2018-03-01) 6414浏览 0评论
5个赞
