1.canvas矩形的绘制以及线的绘制

1.Canvas矩形以及线的API

Canvas的API提供了如下三个方法： 方法简介   clearRect(double x,double y,double w,double h)   该方法是清除坐标(x,y)的宽为w，高为h的矩形。   strokeRect(double x,double y,double w,double h)   该方法是在坐标(x,y)画出宽为w，高为h的矩形，并且描边。 w，h也可以是0，结果会是一条直线。   fillRect(double x,double y,double w,double h)   该方法是在坐标(x,y)画出宽为w，高为h的矩形，并且填充。 w，h也可以是0，结果会是一条直线。   rect(double x,double y,double w,double h)   该方法是在坐标(x,y)画出宽为w，高为h的矩形，但是不会填充也不会描边。 如果是默认情况下，绘制出来的矩形是尖角的，可以通过lineJoin设置。
下面介绍线的一些API： 方法简介 moveTo(x,y)生成一条子路径，绘制线的点 lineTo(x,y)如果当前没有子路径，那么它就和moveTo()方法一样 。如果它已经有了子路径，那么它会绘制一个点，并且加入子路径。 lineCap该方法告诉浏览器如何绘制线段的端点，可以选择的值有：

• butt
• round
• square

默认值的是butt。 lineWidth该值决定值的宽度，但是必须非负。 lineJoin该值决定两条直线先交的交点样式，可取的值是

• bevel(三角形)
• round(圆点)
• miter(正方形)

默认是miter。 miterLimit斜接线长度与二分之一线宽的比值。如果斜接线的长度 超过了该值，浏览器就会以bevel方式来绘制线段的连接点。类型：double，默认值：10.0 quadraticCurveTo(double cpx, double cpy, double x, double y) 创建一条表示二次方贝贝塞尔曲线的路径。该方法需要传入两个点，第一个点是曲线控 制点，第二个是锚点。 bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y , double x, double y) 创建一条代表三次方贝赛尔曲线的路径。你需要像该方法传入三个点的坐标，前两点 是该曲线的控制点，最后一个点是锚点。 关于lineJoin的3个属性，效果如下:

实例代码如下：

<script>
var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');
    context.beginPath();
    context.fillStyle = "white";
    context.font = '24px Helvetica';
    context.fillText('miter',100,20);
    context.strokeStyle = "white";
    context.lineWidth = "40";
    context.lineJoin = "miter";
    context.moveTo(60,60);
    context.lineTo(180,60);
    context.lineTo(180,180);
    context.stroke();
    context.lineJoin = "round";
    context.fillText('round',280,20);
    context.moveTo(240,60);
    context.lineTo(360,60);
    context.lineTo(360,180);
    context.stroke();
    context.lineJoin = "bevel";
    context.fillText('bevel',460,20);
    context.moveTo(420,60);
    context.lineTo(540,60);
    context.lineTo(540,180);
    context.stroke();
    </script>