您的位置:首页 - 教程 - HTML5 - 正文
canvas API ,通俗的canvas基础知识(一)

在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天了(注意,这里不是要升天啊),那时候一直不敢涉猎的原因主要是,第一,在还需要兼容IE的时代,兼容性是硬伤;第二,参考资料的如此的少,又或是参考资料五花八门,没有适合入门的比较好的参考文章,第三,canvas之所以能无所不能,其最大的原因是有一个好伙伴JavaScript,那是的JavaScript还是不甚了解。(借口真多)现在好了,终于有时间,有精力来研究研究这神秘莫测的canvas,考虑到现在适合入门的canvas基础知识点的文字少之又少,于是,决定在接下来的一段时间里,将canvas的API梳理一遍,毕竟工欲善其事,必先利其器嘛,废话不多说,咱们就开始吧!

注:以下API中的各个属性和方法都是目前支持的,不完全支持的就没有介绍了!

初识canvas

要学习canvas,必先知道canvas为何物?

<canvas></canvas>

首先canvas只是html5中的一个便签而已,表示的意思是一个画布,它本身没有任何作用,就相当于是一个画板,你可以在它上面画任何你想画的东西,那如果我们不给它设置任何的属性和样式,它的默认状态是什么呢?运行上面的代码可得如下:

默认的宽度为300px,高度为150px,当body背景为白色时,它的背景为白色,body背景为灰色时,它的背景为灰色,可知它的默认背景为透明色

<canvas></canvas>
<span>你是什么类型的标签?</span>

在它后面加一个内联样式的标签,看看它是什么类型的标签

span到它的右侧去了,说明它是一个行内元素,好了,基本情况我们算了解了,那我们怎么修改它的默认样式呢?

首先,canvas作为一个html5比较特殊的标签,也是支持样式控制的,比如设置边框,边距,背景等等,但是有一个地方值得注意的是,在设置canvas宽高时,如果用style样式来设置的话,会出现一点小问题,具体什么问题,暂且卖个关子,后面为大家介绍,所以宽高还是在标签上设置比较好

<canvas width="400" height="400" id="canvas"></canvas>

当然,canvas目前只是一个画板而已,没有画笔,你什么也做不了,那画笔是什么呢,这里就是我们主角的开始了

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");     //目前只有2d,没有3d,以后会有的,如果想了解3d,可以看一下webGL

getContext("2d")是canvas的绘图环境,只有引入它才能进行绘图

有时我在想,canvas绘图都是在js里面完成的,那么它本身的标签能不能写东西呢,比如,如果在它里面放一张图片,嘻嘻,会怎么样,那我们说干就干

<canvas width="400" height="400" id="canvas">
        <img src="1.jpg" width="400" height="400" alt="">
</canvas>

当当当当,见证奇迹!马丹,标准浏览器下,什么都没有,看看不争气的IE,亮瞎眼,活脱脱一个大美女出现了

由此可见,在支持canvas的浏览器,canvas里面的东西是不会显示的,但是在不支持的情况下,会赤裸裸的显示出来,于是,我们可以把它作为提示用语,用来告诉不支持的浏览器,该换换了

<canvas width="400" height="400" id="canvas">
        <span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>

恩,对于IE家族的低版本成员,年纪太大,只能这么处理了,如果你非要支持IE,可以试试explorercanvas开源项目,里面有一个excanvas.js,当然,在使用的时候注明是在ie下引用,地址我就没给了,我也没打算去研究它,因为我断定,不久的将来,IE8以下浏览器就不见了,呵呵,但愿它快点到来!

 

前面都是聊骚,正在的主角才刚开始,任务艰巨,任重而道远啊,canvas API分为属性部分和方法部分,但是我不想这么来讲,这样太机械了,看不懂的人依旧是看不懂,接下来的API我会采用相关属性,方法交叉讲解,再辅以小实例,相信这样更让人看得懂,而且会印象深刻,想想还有点小激动呢,API较长,只能分几期来讲了!

 

由于canvas默认背景为透明色,为区别画布与body,以后的画布样式统一设置为如下:

body{ background:#ccc;}
canvas{ background:#fff;}

画画嘛,都是从点,线,圆,框开始的,那我们就从点开始吧!

 

MoveTo(x,y) 顾名思义,就是移动到某个坐标点上,x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);

当然是不会有任何的效果的,因为这里的意思就相当于把笔移动了100,100的位置,还没有下笔呢,这并不是然并卵,这个是画笔作画的起点,比如画直线,2点一线,只需再做一点就可以画直线了

 

lineTo(x,y) 意思是连接最后一点的坐标,但是不画,x,y 分别表示x轴坐标和y轴坐标

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200);

然而并没有任何效果,这是为什么呢,实际上,上面只是标注了直线的起点和终点,还没添墨水呢,何为墨水呢?

下面就来介绍我们的黑白双煞:

fill()  填充,此为实心的

stroke()  绘制,此为空心的

因为线条的宽度只有一个像素,所以无法进行填充,于是画线段用fill()方法是没有用的,

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.stroke();

结果:

此黑白双煞在以后的绘图中起到核心作用,切记这2个方法(为什么我叫它们黑白双煞呢,因为canvas默认颜色为黑色,fill()填充颜色为一坨黑,stroke()绘制就像描边一样,一个框,里面是透明的,由此得名,哈哈,方便记忆)。

点,线之后便是面了,我们来绘制矩形吧,矩形也有三兄弟,暂且命名为阮氏三兄弟:

rect(x,y,w,h)   在x,y坐标点绘制一个矩形,宽高为w,h,此方法只是绘制路径,必须用黑白双煞才能显示

fillRect(x,y,w,h)  在x,y坐标点绘制一个填充矩形,宽高为w,h

strokeRect(x,y,w,h)  在x,y坐标点绘制一个描边矩形,宽高为w,h

分别看看它们的表现

//不用黑白双煞
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100);
//用stroke
var
canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.rect(5.5,5.5,100,100) ctx.stroke();
//用fill
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");    
ctx.rect(5.5,5.5,100,100)
ctx.fill();
//用strokeRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.strokeRect(5.5,5.5,100,100);
//用fillRect
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(5.5,5.5,100,100);

            

为了便于演示,我将画布缩小到(120*120),以上为各个组合的表现,从这些表现可以总结一下几点:

1、rect()不能单独使用,必须借助fill(),stroke()方法;

2、rect()+stroke() 组合的效果和strokeRect()一致,可等价

3、rect()+fill() 组合的效果和fillRect()一致,可等价

这里还有一个小细节需要注意的是,我这个的坐标写的是5.5而不是6或5,为什么?理论上绘制的线框是一个1像素的宽度的,因为一个点就是一像素,当坐标设为(6,6)时,表现会是如下:

对比上图明显粗一些,明显是2个像素的宽度,这是为什么呢?给大家画一个图

这3条线分别是5像素,6像素,7像素位置,图形绘制时,绘制6像素的地方向左绘制0.5像素,向右绘制0.5像素,但是浏览器实际上是不纯在半个像素的,所以浏览器会帮我们补上个半个像素,就成了2个像素了,如果要做成1像素边框,只需将坐标左移或右移半个像素,即0.5px,如果要精确绘图,须知这一点细节!

矩形之后就可以画圆了,但是圆相对来说比较复杂,咱们还是先来练练字,谢谢书法,哈哈,看看canvas编辑文字有哪些方法:

我们说画布上的图形皆为路径,所以,文字作为另一种图形,也存在黑白双煞:

fillText(text,x,y,[maxWidth]);  顾名思义,这是填充文字

strokeText(text,x,y,[maxWidth]); 顾名思义,这是描边文字

参数:

text :需要绘制的文字

x,y: 文字绘制的起始坐标

[maxWidth] : 文字的最大宽度,选填

//为省篇幅,我合起来写了,你想看到各自的效果,请分开运行
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText('你想对我说什么',50,50);
ctx.strokeText('你想对我说什么',50,50);

   

咋一看,你会说,咦,怎么描边文字看上去像是加粗的啊,为什么会这样呢?在此稍作悬念,下面揭晓!

我们看一下文字的默认表现:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText('你想对我说什么',0,0);

结果简直让人大吃一精,哎,是惊!文字怎么跑那里去了,了解css 的都知道,文字是有基准线的,这玩意也是老外的英文搞出来的,html文字基准线是baseline,可以用vertical-align来修改基准线,canvas有吗?哈哈,还真有:

textBaseline

参数:

alphabetic : 默认。文本基线是普通的字母基线。

top : 文本基线是 em 方框的顶端。

hanging : 文本基线是悬挂基线。

middle :文本基线是 em 方框的正中。

ideographic : 文本基线是表意基线。

bottom :文本基线是 em 方框的底端。

看着不懂?我也不太懂,文字不如图片,看看这2张示意图:

  

实际显示:

//为了让bottom看得到,我将文字向下偏移20像素
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="20px Arial";
ctx.textBaseline = "bottom";
ctx.fillText('你想对我说什么',0,20);

          

图没有截对齐,凑合着看吧,哦,没有在20px位置画条线,算了,不纠结了,结合上面的图看吧!

只要是文字,那就应该可以设置文字样式,比如css中可以设置颜色,字体,字体大小,等等,css可不可以设置canvas样式呢?咱们说干就干:

canvas{ background:#fff; font-family:"微软雅黑"; font-size:20px; color:#f00; text-align:center;}

好像没什么反应,老年痴呆了?既然css无法设样式,那怎么给文字设置样式呢?

还好强大的canvas自带样式设置技能,走哪里都不怕,我们看看有哪些:

font  参数:font-style font-variant font-weight font-size font-family,分别表示的意思是字体样式(如倾斜),是否大小写,字体粗细,字体大小,字体 

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="italic bold 40px 微软雅黑 ";
ctx.textBaseline = "top"; ctx.fillStyle
= 'red'; ctx.fillText('a你想对我说什么',0,20);

这只是部分的font属性,起用法与css相同,有兴趣可以自己试一试。

textAlign 参数:left(默认,文本左对齐),right(文本右对齐),center(文本在指定位置居中),start(文本开始位置),end(文本结束位置)

这个其实也挺怪异的,如图:

默认是左对齐,右对齐都跑出去了,center就只有一半,一般我们要想将文字居中对齐,其实不用center,而是通过坐标来居中,后面我会给一个文本上下左右居中的小实例供大家参考!

这里说错了,这里的蓝色的竖线是表示文本的开始水平位置,start与left效果相同,都是向左对齐,end和right效果相同,都是在起始点的左边向右对齐,而center则是以这个点为中心点对齐!

字体颜色也跟黑白双煞对应:

strokeStyle  fillStyle

用法一样,如:

strokeStyle = color 可设颜色

strokeStyle = gradient  可设渐变对象

strokeStyle  = pattern  可创建 pattern 笔触的 pattern 对象

现在可以揭晓上面的悬念了,我觉得实例更能说明问题:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
ctx.fillText('你想对我说什么',0,20);
ctx.strokeStyle = 'green';
ctx.strokeText('你想对我说什么',0,60);

效果:

如图所示,描边文字并不是加粗的,而是对文字进行描边了,文字小时,就挤到一起了。

我们都知道,css3有一个新样式 -- text-shadow,表示文字的阴影,canvas也有类似的功能,咱们就来对比一下吧!

shadowOffsetX  阴影距形状的水平距离

shadowOffsetY  阴影距形状的垂直距离

shadowBlur  阴影的模糊级别,这里是高斯模糊,默认值为0

shadowColor  阴影的颜色

其实这个跟css3的阴影设置很相似,我就一起来看一下吧

html:

<canvas width="300" height="200" id="canvas">
        <span>亲,您的浏览器不支持canvas,换个浏览器试试吧!</span>
</canvas>
<span>你想对我说什么</span>

css:

body{ background:#ccc;}
canvas{ background:#fff;}
span{ font-size:40px; font-family:Arial; color:red; text-shadow:5px 5px 5px #000; vertical-align: top; display:inline-block;}

js:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="40px Arial";
ctx.textBaseline = "top";
ctx.textAlign = 'left';
ctx.fillStyle = 'red';
        
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.shadowColor = '#000';
        
ctx.fillText('你想对我说什么',0,20);
ctx.strokeStyle = 'green';
ctx.strokeText('你想对我说什么',0,60);

效果:

看看,基本无差吧,但是还是有一点小区别的,如果给css3的text-shadow不设阴影颜色,它的阴影颜色会默认跟字体颜色一样,但是如果如果不设shadowColor ;则阴影是出不来的,不信?看下图:

补充一点:

measureText(text)  返回文本的宽度,单位为像素,用法是:

measureText(text).width 

注意:此方法只能获取到宽度,不能获取到高度,跟我们一般获取宽高的方法有点不一样,它可以在文本输出前计算出其宽度,故如果想在文本输出前知道其宽度,这个方法只好有用武之地

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.font="24px 微软雅黑";
ctx.fillStyle = 'red';
var txt = "快告诉我们我自己有多宽";
var w = ctx.measureText(txt).width;
ctx.fillText('你的宽度:'+w,0,50);
ctx.fillText(txt,0,100);

好了,篇幅太长了,今天就介绍到这里,不知道前面讲的这些属性和方法是否能看的懂,感觉实例还是太少了,等API讲完了,在出一下理解性的小实例帮助大家理解,今天就先到这里!


评论: