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表达出来。