基础结构

新建一个目录存放相关demo。然后在目录中新建一个structure.html 的html文件。输入以下代码,保存为UTF-8格式,为了在开发中不出现一些编码相关的问题，建议开发的时候默认编码全为UTF-8。

<!DOCTYPE html>
<html>
    <head>
        <title>canvas</title>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="my_canvas" width="600" height="600">
           浏览器不支持canvas
        </canvas>
    </body>
    <script type='text/javascript'>
        $(function (){
            var c=document.getElementById("my_canvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#FF0000";
            ctx.fillRect(50,50,180,180);
        });
    </script>
</html>

这里我们新建了基本的框架,以后的例子都在这个基础上进行编写。我们加载了外部的jquery库,便于后期相关操作。同时,放置了一个canvas标签在body标签里面,设置了它的id,宽和高。当文档加载之后，获取my_canvas这个元素。my_canvas这个DOM对象拥有getContext这个方法，这里我们使用它获取"2d"上下文,上下文这个词第一次听到是不好理解的。你可以把它理解为一个对象，它有方法和属性，基本上所有的画图方法都绑定都这个对象上面，同时它还维护画图状态。

canvas里面fill指的是填充,如果你玩过photoshop,那么你一定知道,填充是指处理一块连续的区域；stroke指的是描边,只处理图形的边缘。

这里我们设置了填充颜色fillStyle,为什么不是fillColor?因为填充还可能填充渐变色，其他样式等等;颜色设置就是一般的css颜色值。

fillRect很明显就是填充一个矩形,参数形式如下：

context.fillRect(startX,startY,width,height);
参数描述
startX左上角的 x 坐标
startY矩形左上角的 y 坐标
width矩形的宽度
height矩形的高度

打开浏览器，打开我们刚才 编写的文件,效果如下:

canvas例子

渝ICP备20006974号-2