上下文绘图HTML5 Canvas: 获取二维上下文,开始绘图
本篇文章是一篇关于上下文绘图的帖子
原文:
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);
文章结束给大家分享下程序员的一些笑话语录:
开发时间
项目经理: 如果我再给你一个人,那可以什么时候可以完工?程序员: 3个月吧!项目经理: 那给两个呢?程序员: 1个月吧!
项目经理: 那100呢?程序员: 1年吧!
项目经理: 那10000呢?程序员: 那我将永远无法完成任务.
---------------------------------
原创文章 By
上下文和绘图
---------------------------------