HTML5 Canvas学习---第一章 《Hello World及图片显示》

  在这个章节我们将在Html中使用Canvas标签,再使用Javascript操纵它,达到显示《Hello World》及图片的目的。

开始之前我们需要了解2个对象的概念:window和document。

  1. window对象:window对象在DOM最顶层。我们应该检测这个对象以确保所有的资源和代码在我们开始编写Canvas应用之前已经载入完成。
  2. document对象:该对象包含页面上所有的HTML标签。我们需要查看该对象,以寻找标签并且使用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时间有两种方式

  1. window.addEventListener("load", eventWindowCallBack, false);第一个参数:事件名称,第二个参数:回调函数。第三个参数:设为false就行
  2. window.onload=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()函数,把内容画到界面中。

在这里我们涉及的函数及属性为

  1. fillStyle属性:设置颜色
  2. fillRect(x, y, width, height):画矩形参数为左上角及宽度和高度。
  3. font属性:设置文字风格
  4. 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篇左右。

写的不好的地方,望大家谅解,我也是第一次写博客。只要对一个人有帮助,我的目的就达到了。

原文地址:http://www.cnblogs.com/tcpcg/archive/2012/12/03/HTML5_Hello_World.html

0 个评论

要回复文章请先登录注册