在这个章节我们将在Html中使用Canvas标签,再使用Javascript操纵它,达到显示《Hello World》及图片的目的。
开始之前我们需要了解2个对象的概念:window和document。
- window对象:window对象在DOM最顶层。我们应该检测这个对象以确保所有的资源和代码在我们开始编写Canvas应用之前已经载入完成。
- document对象:该对象包含页面上所有的HTML标签。我们需要查看该对象,以寻找<canvas>标签并且使用JavaScript来操纵他。
HTML代码为:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="chp1.js"></script> <script type="text/javascript" src="modernizr.custom.99886.js"></script> </head> <body>
<canvas id="canvas_helloworld" width="500" height="300"> 你的浏览器不支持HTML5 Canvas </canvas> </body> </html>
其中chp1.js为我们以后需要编写的javascript脚本。modernizr.custom.99886.js为modernizr第三方javascript插件,使用它可以避免不同浏览器引起的各种问题。
具体内容请看这里:modernizr介绍
首先我们需要检测window对象的load事件,它是当所有的HTML标签载入完成后触发。
检测load时间有两种方式
- window.addEventListener("load", eventWindowCallBack, false);第一个参数:事件名称,第二个参数:回调函数。第三个参数:设为false就行
- window.οnlοad=function() { ... };
在这个章节以及以后的文章中我们都是用第一种方式。
HTML代码中我们创建了Canvas标签,它主要有三个属性。
- id:唯一标识符
- width:宽度
- height: 高度
第一步检测浏览器是否支持canvas,有多种实现方法:theCanvas为我们在HTML中布置得canvas对象。
第一种为
if(!theCanvas || !theCanvas.getContext) {
return;
}
第二种为
!document.createElement('testcanvas').getContext;
第三种为使用modernizr插件
return Modernizr.canvas;
我们使用第三种方式,因为它在不同的浏览器中做了不同的处理,拿过来直接用。
第二步获取canvas对象,并获取context对象。
var theCanvas = document.getElementById("canvas_helloworld"); var context = theCanvas.getContext("2d"); //canvas中有很多不同的context,这里我们仅需要2D
第三部创建drawScreen()函数,把内容画到界面中。
在这里我们涉及的函数及属性为
- fillStyle属性:设置颜色
- fillRect(x, y, width, height):画矩形参数为左上角及宽度和高度。
- font属性:设置文字风格
- fillText(text, x, y):往canvas画出字符串,余下的参数为左上角的x坐标和y坐标。
具体代码为
context.fillStyle="#ffffaa"; context.fillRect(0,0,500,300); context.fillStyle="#000000"; context.font="20px _sans"; context.textBaseline="top"; context.fillText("Hello World!", 195, 80);
还有一步我们需要在canvas载入一张图片。在canvas中显示图片,我们需要实例化一个Image()对象并且指定它的src属性。
在显示之前,你需要等待Image载入完毕,当载入完成后可以创建一个回调函数把它显示到屏幕中。
var img = new Image(); img.src="rubi.jpg"; img.onload=function() { context.drawImage(img, 180, 130); }
最后我们在canvas的边上画一个黑色的矩形,醒目的显示出来。
context.strokeStyle="#000000";
context.strokeRect(5, 5, 490, 290);
整理后的代码为
/** * @author Rafael */ window.addEventListener("load",eventWindowLoaded, false); function eventWindowLoaded() { canvasApp(); } function canvasSupport() { // return !document.createElement('testcanvas').getContext; return Modernizr.canvas; } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvas_helloworld"); var context = theCanvas.getContext("2d"); //canvas中有很多不同的context,这里我们仅需要2D // if(!theCanvas || !theCanvas.getContext) { // return; // } function drawScreen() { context.fillStyle="#ffffaa"; context.fillRect(0,0,500,300); context.fillStyle="#000000"; context.font="20px _sans"; context.textBaseline="top"; context.fillText("Hello World!", 195, 80); var img = new Image(); img.src="rubi.jpg"; img.onload=function() { context.drawImage(img, 180, 130); } context.strokeStyle="#000000"; context.strokeRect(5, 5, 490, 290); } drawScreen(); }
至此,这一篇的内容讲完了,今天是学习HTML5的第一天,以后也还会陆续的把最新的学习成果发表出来供大家分享,具体时间为一周4篇左右。
写的不好的地方,望大家谅解,我也是第一次写博客。只要对一个人有帮助,我的目的就达到了。