什么是Canvas？Canvas是HTML5新增的一个标签，你可以把它翻译为画布，通过它可以绘制二维或三维图形，有了它就可以不用安装flash而实现复杂的动画功能。如何通过Canvas绘图？下面我们来看一个简单的例子，涵盖Canvas初始化、图片加载、图形绘制、图片显示等基本功能。
一、HTML页面结构
先看看HTML页面结构，详细代码如下：
<title>标签指定网页标题；
<meta>标签指定页面使用的字符集；
<style>标签定义了一个名叫CenterWarp的样式；
<body>标签中的onload="main()"表示页面加载完毕后调用main函数。
<body>标签里有一个<div>标签，它的样式表示它的宽高为浏览器客户区的宽高，它的子元素水平、垂直居中。
<canvas>标签定义了一块绘图区域，但canvas元素本身不绘制，你必须通过JavaScript脚本来绘制，注意其中的id="GameCanvans"，表示可以通过JavaScript函数document.getElementById("GameCanvans")来将对Canvas元素的引用保存至一个变量中，在随后的代码可通过此变量来调用Canvas的绘图函数。
二、Canvas初始化
首先获取对Canvas元素的引用，然后再获取绘图上下文，代码参见initCanvas()函数：
此函数首先通过g_canvas=document.getElementById("GameCanvans")函数将Canvas元素的引用保存至全局变量g_canvas中，接着通过g_canvas获取Canvas元素的绘图上下文，并将绘图上下文保存至全局变量g_context中，即g_context=g_canvas.getContext("2d");在接下来的代码中通过此全局变量来调用Canvas的绘图函数。注意：getContext()函数的参数为"2d"，表示获取的是2d绘图上下文，即进行二维绘制。接下来的代码设置了Canvas的宽、高，分别为320和240，最后根据初始化的结果返回true或false。
函数clearScreen()的作用是用黑色填充整个Canvas区域，即用黑色清屏。fillRect（）函数有四个参数，依次为填充区域左上角x、y坐标，填充区域宽、高。
三、绘制空心矩形、填充矩形
绘制空心矩形需要设置strokeStyle，即矩形边框颜色，然后调用strokeRect()函数，四个参数依次为矩形左上角x、y坐标，宽、高。
填充矩形的代码与清屏的代码类似，相关说明参见清屏函数clearScreen()。
四、显示图片
在Canvas中显示一幅图片需要分两步实现，首先要加载图片，接下来等图片加载完毕后才能绘制，我们先看看加载图片的代码：
function loadPicture(){
g_image=new Image();
g_image.src="default.png";
g_image.onload=function(){
drawPicture();
}
}
第1步：先创建一个Image对象；
第2步：设置此图片对象的src属性，即图片路径（此处是相对路径，即，与JavaScript脚本文件处于相同路径）；
第3步：图片加载完毕后，调用绘图函数drawPicture()来绘图。
g_image.onload=function(){}表示图片加载完毕后执行花括号中的语句，类似于<body>标签中的onload="main()"，页面加载完毕后执行main()函数。
最后，让我们来看看drawPicture()函数的代码
function drawPicture(){
g_context.drawImage(g_image,0,0,300,180,10,50,300,180);
}
即，调用Canvas的drawImage()函数绘图，其参数含义分别表示：
1、g_image：图片对象
2、0：图像左上角x坐标
3、0：图像左上角y坐标
4、300：图像宽度
5、180：图像高度
此例中图片尺寸为400×400，（0,0,300,180）表示从图片左上角（0,0）处复制300×180部分图片到Canvas中
6、10：表示在Canvas中绘制的左上角x坐标
7、50：表示在Canvas中绘制的左上角y坐标
8、300：表示在Canvas中绘制的宽度
9、180：表示在Canvas中绘制的高度
将参数8和参数9改为与参数4、参数5不一样的数值可以实现缩放效果。
default.png如下图
完整的代码如下：
<script type="text/javascript">
var g_canvas,g_context,g_image;
function initCanvas(){
g_canvas=document.getElementById("GameCanvans");
g_context=g_canvas.getContext("2d");
g_canvas.width=320;
g_canvas.height=240;
return (g_canvas&&g_context);
}
function clearScreen(){
g_context.fillStyle="black";
g_context.fillRect(0,0,320,240);
}
function drawWhiteRect(){
g_context.strokeStyle="white";
g_context.strokeRect(10,30,300,10);
}
function fillRedRect(){
g_context.fillStyle="red";
g_context.fillRect(10,10,300,10);
}
function drawPicture(){
g_context.drawImage(g_image,0,0,300,180,10,50,300,180);
}
function loadPicture(){
g_image=new Image();
g_image.src="default.png";
g_image.onload=function(){
drawPicture();
}
}
function main(){
if(!initCanvas()){
console.log("初始化canvas失败！");
return;
}
clearScreen();
fillRedRect();
drawWhiteRect();
loadPicture();
}
</script>
保存以上代码，并在浏览器中打开，将显示如下结果：
好了，Canvas基本的绘图功能就介绍完了，现在我们已经完全具备开发简单网页游戏的能力了，接下来将给大家详细介绍如何实现一个数独游戏，敬请关注。
,
