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

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

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

  1. window对象：window对象在DOM最顶层。我们应该检测这个对象以确保所有的资源和代码在我们开始编写Canvas应用之前已经载入完成。
  2. 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时间有两种方式

  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篇左右。

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

 

 

 

posted @ 2012-12-03 15:47  卡马克  阅读(2725)  评论(13)  编辑  收藏  举报