canvas的入门

canvas的介绍

最近为了做loading图看了一下canvas的用法，下面总结一下我对canvas的用法的一下了解。
canvas是HTML5新增的组件，它像是一块画布，使用JS就可以在上面绘制图形，结合定时器还可以做出动画效果。目前的一些主流浏览器都支持canvas，如：Chrome、FireFox等；在使用canvas前，我们可以用canvas.getContext测试我们的浏览器是否支持canvas。

if(canvas.getContext)
    alert("你的浏览器支持canvas");
else
    alert("你的浏览器不支持canvas");

getContext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是 "2d"，它指定了二维绘图，我们的所有操作都将在这个二维环境上进行。

在canvas上绘制

在HTML文件中创建一个canvas，canvas像别的块级标签一样可以设置宽高等一些样式属性

    <!--HTML代码-->
   <canvas id="painting" style="border: 1px solid black"></canvas>

效果图：

在画图之前，先了解一下canvas的坐标系统，它的左上角就是坐标原点（0,0）。接下来在上面绘制一些图形。

    //JS代码
    var canvas = document.getElementById("painting"),
    ctx = canvas.getContext("2d");
    ctx.fillStyle = '#ff0000';                    //设置填充颜色，如果需要透明度，可用rgba
    ctx.fillRect(10, 10, 40, 40);
    ctx.fillStyle = "rgba(156,236,255,.9)";
    ctx.arc(50,50,10,0,Math.PI*2,true);         //创建一个圆传入的参数为（圆心的X,圆心的Y，圆的半径，起始角度，结束角度，顺、逆时针），我们可以通过控制起始和结束角度来绘制圆弧
    ctx.fill();                                 //fill() 方法填充当前的图像。默认颜色是黑色。
    //下面我们画一条圆弧
    ctx.moveTo(100,50);
    ctx.arc(50,50,50,0,Math.PI,false);
    ctx.stroke();
    ctx.moveTo(0,0);
    ctx.lineTo(200,200);
    ctx.stroke();                               //stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色  

效果图：

canvas的方法还有很多，这里只是列出了一些比较常用的方法，要绘制出我们想要的图形还是需要发挥我们的想象力然后用JS表达出来。