Html5 Canvas 学习之路（一）

摘要：一先来一个概述是屏幕上的一个由控制的即时模式位图区域，通过调用，在每一帧完全重绘屏幕上的位图。有这三个属性代码，放在外部文件中，代码如下添加一个事件监听器，在浏览器加载完页面后调用函数。调用函数获得上下文背景文字图像显示结果

Html5 Canvas 是屏幕上的一个由JavaScript控制的即时模式位图区域，通过JavaScript调用Canvas API，在每一帧完全重绘屏幕上的位图。

基本的HTML5 Canvas API包括一个2D上下文，允许绘制各种图形、渲染文本并且将图像直接显示在浏览器窗口定义的区域，还可以对画布上放置的图形、文本和图像进行颜色、旋转、alpha透明度、像素处理，并且可以使用各种直线、曲线、边框、底纹来增强其效果。

就其本身而言，Html5 Canvas 2D上下文是一个用来在位图区域渲染图形显示的API，但很少使用该技术在这个上下文中创建应用程序。

html 的部分，在其中写入标签就好了，可以添加文本，如果浏览器执行HTML页面不支持Canvas时会显示这些文字。

    
    
    





   Your browser does not support HTML5 Canvas.

js代码，放在外部hello.js文件中，代码如下：

//添加一个事件监听器，在浏览器加载完html页面后调用eventWindowloaded函数。
window.addEventListener("load", eventWindowLoaded, false);
var Debugger = function () {}
Debugger.log = function () {
    try {
        console.log(message);
    }catch (exception){
        return;
    }
}
//调用canvasApp函数
function eventWindowLoaded() {
    canvasApp();
}


function canvasApp() {

     //获得2d上下文
     var theCanvas = document.getElementById("canvasOne");
     var context = theCanvas.getContext("2d");

     Debugger.log("Drawing Canvas");

     function drawScreen() {
         //背景
         context.fillStyle = "#ffffaa";
         context.fillRect(0,0,500,300);

         //文字
         context.fillStyle = "#000000";
         context.font = "100px_sans";
         context.fillText("Hello Canvas", 195, 80);

         //图像
         var helloWorldImage = new Image();
         helloWorldImage.src = "timg.jpg";
         helloWorldImage.onload = function () {
             context.drawImage(helloWorldImage, 160, 130)
         }
     }
     drawScreen()
}