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

本文翻译自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)来进行的。

var canvas = document.getElementById("sampleEle");  
var context = canvas.getContext("2d");  

接下来,我们要创建一个叫做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 = new Image();  
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);  

最终效果如下: