一：先来一个Hello World
1. 概述
Html5 Canvas 是屏幕上的一个由JavaScript控制的即时模式位图区域，通过JavaScript调用Canvas API，在每一帧完全重绘屏幕上的位图。
基本的HTML5 Canvas API包括一个2D上下文，允许绘制各种图形、渲染文本并且将图像直接显示在浏览器窗口定义的区域，还可以对画布上放置的图形、文本和图像进行颜色、旋转、alpha透明度、像素处理，并且可以使用各种直线、曲线、边框、底纹来增强其效果。
就其本身而言，Html5 Canvas 2D上下文是一个用来在位图区域渲染图形显示的API，但很少使用该技术在这个上下文中创建应用程序。
2. Hello Word的实现
html 的部分，在其中写入<canvas>标签就好了，可以添加文本，如果浏览器执行HTML页面不支持Canvas时会显示这些文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Canvas</title>
<script src="hello.js"></script>
</head>
<body>
<div style="position: absolute; top:50px;left: 50px;">
<canvas id="canvasOne" width="500" height="300">
<!-- Canvas有id、width、height这三个属性-->
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>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()
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。