jimson_zhu的博客

编程路上碰见的荆棘花朵,与君共勉。

HTML5的Canvas使用总结

一开始接触html5的Canvas是觉得新奇的,然而之后的心路历程是这样的:感觉挺有意思的!靠,什么东西好难用!线条和圆圈怎么会画成这样!哦,原来是这样啊!嗯,挺好用,有意思……

折腾了两天,终于基本上手Canvas了,画起东西来还是很有意思的,大家可以试着上手一下,虽然心路历程可能差不多,微笑脸。

以我的经历来看,大多数的人可能会觉得难的点在于:两点之间怎么画线?连续的点怎么连接地画出来?圆圈或者其他图形结合线条怎么连续着画……

以上问题一一解答。

首先应该准备的语法点或者技术点先列出来,我一直喜欢一个朋友说的一句话:要用到的技术点或者知识点有了,剩下的就是实现逻辑和敲代码的事了。

Canvas的定义

Canvas的大众解释是:html5新增的标签,实现一块画布(Canvas),你可以在上面画图形、图像等等,由标签对<canvas></canvas>给出定义,至于“画”这个动作要用JavaScript代码脚本去实现。实际上想想也是,标签或者元素毕竟只是用来实现静态页面部分,动作还是得用js代码实现,这个思想对整个前端开发都是一样的。

Canvas的实现

和其他标签一样,使用一对标签<canvas></canvas>创建画布标签,一般会给出它的宽度和高度,像这样:

<canvas id="myCanvas" width="200" height="100"></canvas>

但是实际上后面我还会用到一张图片作为这块画布的背景,所以一般定义时我没有给出宽高。

Canvas使用的逻辑

1、通过getElementById()方法获取画布标签的id,去定义和初始化一个画布对象:

var myCanvas=document.getElementById("你定义的canvas的id");

2、用定义的画布对象创建上下文对象,这个对象你可以理解为“画笔”:

var context=myCanvas.getContext("2d");  //试了一下3d,是我想太多了,呵呵

3、这个上下文对象官方解释是html5内建对象,可以用它调用各种方法去实现画线、画矩形、画圆和添加图像等等,例如画线:

context.moveTo(0,0);
context.lineTo(10,10);
context.stroke();

解释:其实逻辑很简单,就是两点确定一条直线,即起点、终点,然后用笔去画。

所以你要画两条线就这样:

context.moveTo(0,0);
context.lineTo(200,100);

context.moveTo(10,30);
context.lineTo(120,80);

context.stroke();

效果是这样的:


解释:也就是“画笔”先从画布的左上角(0,0)指向右下角(200,100),此时确定第一条直线(并没有完成“画”的动作);然后“画笔”移动到第二条线的起点(10,30),接着指向终点(120,80),此时确定第二条线,最后才是调用stroke()方法实现所有线条的“画”动作。

所以一开始我们说的怎么连续画线,想必也已经逻辑清楚了:就是第一条线的终点作为第二条线的起点,如下:

context.moveTo(0,0);
context.lineTo(200,100);
context.lineTo(160,30);
context.stroke();

效果如下:

解释:“画完”第一条线之后并没有移动“画笔”到其他坐标位置,而是继续在第一条线的终点位置指向下一个点画第二条,当然整个过程并没有“画”,这个“画完”可以理解为在人脑中的画完,最后的stroke()才是画的动作。由此也可以看出计算机实现的逻辑跟人类是有区别的,计算机是先想好,然后一步到位。当然你也可以说人类也可以先想好再画啊,但是实际上在你提笔画的时候大脑还是会伴随想的过程,整个画和想的过程是同步进行的。

上下文对象的常用方法列举

beginPath():起始一条路径,或重置当前路径。

这一个方法上面我们没有用的,这个方法用于开始一个新的路线或者重置当前路径,当然你也可以使用上面的lineTo方法一直画到结束为止,但是有时候效果不理想,因为我们不仅仅只画线而已,还要结合其他形状一起实现不同的效果:比如线和圆、类似地铁线路图效果等等,这时有可能出现因圆心计算不准确导致线和圆连接歪曲等情况。用beginPath()方法可以很好的实现画线和画圆分离,使画线的流程和画圆的流程区别开来。

moveTo():把路径移动到画布中的指定点,不创建线条。

lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条。

上面两个方法前面已经使用过,不过多解释。


closePath():创建从当前点回到起始点的路径。

一般结合beginPath()使用,使用closePath()之后,会从当前点往起点画一条线,例如:

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

效果:


解释:像之前所说,前四步实现画笔移动,最后一步实现画。


stroke():绘制已定义的路径。

arc():创建弧/曲线(用于创建圆形或部分圆)。

完整的参数实现:

arc(x,y,r,sAngle,eAngle,counterclockwise);

参数解释:


x 圆的中心的 x 坐标。

y 圆的中心的 y 坐标。

r 圆的半径。

sAngle 起始角,以弧度计(弧的圆形的三点钟位置是 0 度)。

eAngle 结束角,以弧度计。

counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。不选则默认顺时针。

注:图片来源菜鸟教程。

举例:

ctx.beginPath();
ctx.arc(80,75,50,0,1.5*Math.PI);
ctx.stroke();

效果如下:


所以,如果想画整个圆形,则要使用2个PI,即“ctx.arc(80,75,50,0,2*Math.PI)”。


rect():创建矩形。

完整的实现参数:

rect(x,y,width,height);

参数解释:

x 矩形左上角的 x 坐标。

y 矩形左上角的 y 坐标。

width 矩形的宽度,以像素计。

height 矩形的高度,以像素计。

举例:

ctx.rect(20,20,250,100);
ctx.stroke();

效果如下:



drawImage():向画布上绘制图像、画布或视频;

完整的实现参数:

drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数解释:

img 规定要使用的图像、画布或视频。  
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度(伸展或缩小图像)。

height 可选。要使用的图像的高度(伸展或缩小图像)。

举例:

var c=document.getElementById(canvasId);
var ctx=c.getContext("2d");
var imgBase=document.getElementById(baseImgId);
c.width=imgBase.width;
c.height=imgBase.height;

imgBase.onload = function()
{
    ctx.drawImage(img,10,10);
}

解释:一般只使用三个参数:图像对象,x坐标和y坐标。图像对象调用onload事件属性,图像加载在画布上面。


fill():填充当前绘图(路径)。

当画布上的路线数量大于等于2时,调用该方法会将路线形成的区域填充,默认填充颜色是黑色。例如:

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.lineTo(30,100);
ctx.fill();
ctx.stroke();

效果:



上下文对象的常用属性

ctx.fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。

ctx.strokeStyle:设置或返回用于笔触的颜色、渐变或模式。也就是你的“画笔”的样式。

ctx.lineWidth:设置或返回当前的线条宽度。


总结:以上是我Canvas的基本上手总结,当然还有其他方法实现其他图形效果,例如图形渐变,文字填充、渐变等等。Canvas作为前端一个重要的知识点,需要继续在使用过程中体会它的妙处。

阅读更多
个人分类: Canvas
想对作者说点什么? 我来说一句

HTML5 Canvas

2013年03月21日 244KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭