本文依旧属于《html5 Canvas画图系列教程

假设你的妹子,本来站在你面前一米,你叫她一声,她就过来抱住你,这个过程就是一个动画。动画的原理都是这样的,反正就是要“动”。

即使没接触canvas的时候,我们也用JS写过一些动画,比如常见的图片切换效果。产生动画的原因,是改变元素的形态,比如透明度,坐标等。此刻我们设置元素的left为100,下一秒设置left为101,如此循环,就产生动画了。

而canvas上的动画与HTML元素的动画是不同的。html元素的动画,始终是对一个DOM元素的操作;而在canvas中,没有任何元素。继续阅读

最近一直在学习html5 Canvas,而且网上已经有很多成熟的使用canvas写的游戏,比如宝石迷阵与割绳子,他们都是本来在手机与PC上就比较火的游戏,而在线的html5版也已经和客户端版的体验几乎没有差距,包括声音,图像,以及流畅性。

但我却担心canvas的某些问题,会给他的应用带来一些麻烦,特别是游戏方面。

一个完整的游戏,通常包括音频,图片以及代码,游戏越复杂,则这些素材的数量越多。我曾经尝试下载过html5版宝石迷阵的源码,虽然最终没有成功(也没指望会成功),但让我对他里面的文件数量倒是有了个初步认识。

继续阅读

本文属于《html5 Canvas画图系列教程

画扇形这个事儿,貌似不应该拖到现在讲,因为这明显跟前面几章“画圆形,画矩形”是一路的,但我拖到现在才讲是有理由的,因为画扇形需要用到我上两章讲的知识。

扇形,就是一个不完整的圆,提到圆,我们就能马上想到用arc方法来画。的确,arc可以画出扇形的弧线,但光是靠arc我们是不能画出扇形的,下面是一个扇形和一个不完整的圆弧:

继续阅读

本文属于《html5 Canvas画图系列教程

首先说在前头,大家要千万注意标题,是“画面”的位移,缩放和旋转,而画布。画布是指canvas,但画面是指canvas的Context2d对象,他们千万不能混淆。

画面的位移缩放和旋转,即画布不变,而把画布上的那一层“画”给进行变化。

首先是位移:translate

大家应该了解canvas有个“原点”,即坐标(0,0)的位置,一般是画布的左上角。translate的作用就是把这个“原点”到处移动,他的语法是我们很熟悉的translate(x,y)形式,但他和moveTo方法毫无相同。当原点变化时,画面的一切都会发生偏移。

初看这个方法好像让人莫名其妙,为什么我要移动原点呢?

这里我只说一个很简单的例子:我要在(300,100)处画4个同心圆。

先看不translate的方法:

1
2
3
4
5
ctx.arc(300,100,30,0,Math.PI*2)
.arc(300,100,40,0,Math.PI*2)
.arc(300,100,50,0,Math.PI*2)
.arc(300,100,60,0,Math.PI*2)
.stroke();

以上代码使用了XtendCanvas.js

大家可以看到,代码中有好几个(300,100)坐标值,但如果我们把原点移动到(300,100)的位置,就不用再写这些坐标了:

1
2
3
4
5
6
ctx.translate(300,100)
.arc(0,0,30,0,Math.PI*2)
.arc(0,0,40,0,Math.PI*2)
.arc(0,0,50,0,Math.PI*2)
.arc(0,0,60,0,Math.PI*2)
.stroke();

这里我们首先就把原点移动到了目标坐标(300,100),此时,画面的原点(0,0)就不再是左上角了,而是新的(300,100)。所以我们直接在这个所谓的”原点”处开始画,实际上却是在(300,100)处开始画的。

继续阅读

本文属于《html5 Canvas画图系列教程

在画画的时候我们很可能会有这种情况:本来正在用绿色笔画(比如树叶),突然需要用红色笔画几笔(比如花朵),但画完了之后又要换成绿色笔(继续画叶子)。

如果我们是在现实中作画,那我们可以把笔蘸上不同的墨水,画了之后又蘸上之前的墨水;或者准备几只笔,要用哪只就选哪只。

在canvas中我们也可以这样,不过我们之前说过,canvas中的画笔永远只有一只,所以我们如果要换画笔的颜色,似乎只有上面的第一种方法可行。继续阅读

本文属于《html5 Canvas画图系列教程

这里的绘制图片是指把一张现成的图片,绘制到Canvas上面。

有的人可能就有疑问了,既然是现成的图片,那干嘛用canvas来绘制,直接用img标签展现出来不就行了?

canvas上绘制图片,不是用来展示的,canvas功能更强大,比如,把图片画到canvas上,可以像PS中的滤镜一样,对图片进行修改,而且最后还能保存为新图片。

这些操作很复杂,我们先来看最基本的:如何把图片绘制到canvas上?继续阅读

本文属于《html5 Canvas画图系列教程

在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟。

我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度——或者还有旋转角度,不过这个可以暂时不要,旋转是比较容易的。

1,使用lineTo画椭圆

你没有看错,lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆!?但他确实存在,不过写法实在是有些不可思议:继续阅读

本文属于《html5 Canvas画图系列教程

上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。

一个正常的圆角矩形,我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力,很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。

继续阅读

本文属于《html5 Canvas画图系列教程

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形。当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟。

canvas画矩形

1,fillRect与strokeRect

fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式;同理strokeRect就是直接描边一个矩形继续阅读

本文属于《html5 Canvas画图系列教程

前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了。

bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解。

bezierCurveTo的语法如下:

1
ctx.bezierCurveTo(x1,y1,x2,y2,x,y);

他的参数我照例解释一下,其中的(x1,y1)即控制点1的坐标,(x2,y2)是控制点2的坐标,(x,y)是他的终点坐标。和quadraticCurveTo一样,他的起点坐标也是由moveTo预先设置好的。

所以,bezierCurveTo画出一条曲线需要4个点:起点,终点,控制点1,控制点2.为了后续讲解,这里我假定控制点1对应起点控制点2对应终点

这里又要提到canvas画图的老问题了,就是代码画图全部靠猜,画到哪里你要刷新下才能明了。继续阅读