HTML5项目笔记3：使用Canvas设计离线系统的Logo

HTML5 的Cavans API可以动态来展示图形、图表、图像以及动画，我们的这个离线系统中，主要用来设计Logo用的。在网页上使用Canvas的时，他会创建一块矩形区域，默认情况下宽为300像素，高为150像素，当然，可以自定义。 

因为我们离线系统主要职责用于在离线的情况下的工作系统，如在上面写工作日志，工作计划，和保存项目的评估数据；在网络在线的情况下与服务器交互，并将数据保存到Server的数据库中。所以我们的这个离线系统被命名为OFLMAIL，我们就根据这个名字来设计Logo。 

canvas中的坐标是从左上角开始的，X轴从左到右横向延伸，Y轴从上到下垂直延伸。通过坐标的刻量度来定位它的位置。 

 

 

我们先在页面上放置一个canvas元素：

 <canvas id="canvas" width="380" height="35">Sorry, canvas not supported...</canvas>

 

使用canvas编程，首先要获取其上下文context。

 function MakeLogo() {

            var canvas = document.getElementById("canvas");

            if (canvas.getContext) {

                var ctx = canvas.getContext("2d");

     }

}

 

我们的第一个字是 O ,所以我们先把 O 字符画出来，使用画圆函数即可：

context . arc(x, y, radius, startAngle, endAngle, anticlockwise) 

参数分别是：