您的位置:首页 > Web前端 > HTML5

HTML5 Canvas: 获取二维上下文,开始绘图

2013-05-28 23:38 204 查看
原文:

http://www.lifelaf.com/blog/?p=346

本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Retrieving the 2D Context, The drawScreen() Function”.

在保证浏览器对Canvas的支持之后,我们需要拿到Canvas的二维上下文(context),以进行一系列的操作。在HTML5的设计中,Canvas兼容多种上下文(包括三维上下文),但在本文中,我们仅考虑二维上下文。

是时候写一些真正的Canvas代码了。Canvas的上下文(context)指代了HTML页面上相应的用于绘图的对象,因此,对于Canvas的所有操作都是通过上下文(context)来进行的。

接下来,我们要创建一个叫做drawScreen()的函数来进行绘图。这里的”screen”指的不是浏览器窗口,只是Canvas中绘图区域的意思。取名叫”screen”,主要是因为在用Canvas编写的游戏或者应用中,Canvas所起到的作用与“窗口”、“屏幕”并无二致。

首先我们需要做的事情是清空用于绘图的区域。下面的两行代码绘制了一个黄色的、大小和canvas一样的矩形。fillStyle设定了颜色,而fillRect()则创建矩形并把它添加到Canvas中:

context.fillStyle ="#ffffaa";
context.fillRext(0,0,500,300);

其次,让我们看一下要在屏幕上显示文本“Hello World!”,需要写一些什么代码。

第一步,与设定矩形的颜色一样,我们设定文本的颜色:
context.fillStyle ="#000000";


第二步,我们设定字体的大小和粗细:
context.font ="20px_sans";


然后,我们调整文字在行中的垂直位置:
context.textBaseline ="top";


最后,我们调用context对象的fillText()方法,将我们的测试文本打印到屏幕上。fillText()方法的三个参数为:文本字符串、x坐标与y坐标:
context.fillText("Hello World!",195,80);


在屏幕上添加文本后,让我们再添加一些图片吧 — 加载图片文件,并显示在页面上。为了在Canvas中显示图片,我们需要创建一个Image()对象的实例,并将其src属性设置为待加载的图片文件的文件名。

在显示图片之前,我们必须等待图片文件加载完成。因此,需要创建一个回调函数,同时通过设置Image对象的onload属性来监听图片的加载事件 — 一旦onload事件被触发,该回调函数当即执行。在该回调函数中,我们可以调用context.drawImage()语句,传入三个参数(Image对象,x坐标,y坐标)来把图片显示在Canvas上:

var helloWorldImage =newImage();
helloWorldImage.src ="helloWorld.gif";
helloWorldImage.onload =function(){
context.drawImage(helloWorldImage,160,130);}

最后,我们在文本和图片之外画一个矩形边框。对于画边框而言,可以用context.strokeStyle设定边框的颜色,然后调用context.strokeRect()方法来进行绘制。strokeRect()方法接受4个参数,分别是矩形边框左上角那个点的x、y坐标,以及右下角那个点的x、y坐标:

context.strokeStyle ="#000000";
context.strokeRect(5,5,490,290);

最终效果如下:


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: