Canvas基本操作

canvas基本操作

基本api

arc()

Canvas绘图环境提供了arc()方法来绘制圆弧与圆形。

arc()方法有六个参数，arc(x, y, radius, startAngle, endAngle, counterClockwise),
* 前两个参数表示圆心的坐标，
* 第三个参数表示园的半径，
* 第四个和第五个参数表示圆弧的起始角和终结角，
* 第六个参数为绘制方向，如果为false，绘制方向为

beginPath()

开始一段新路径，调用该方法会将当前路径中的所有子路径都清除掉，以此来重置当前路径。

closePath()

显示的封闭某段开放路径，该方法用于封闭圆弧路径以及由曲线或线段所创建的开放路径

fill()

使用fillStyle对当前路径的内部进行填充

rect(double x, double y, double width, double height)

绘制一个矩形，宽度为width, 高度为height

stroke()

使用strokeStyle来描绘当前路径的轮廓线

fillText()

用来填充文本，接收三个参数，第一个参数表示填充的文本，第二个和第三个参数表示文本坐标

绘制时钟

下面我们用上面提到的几个api来绘制一个时钟。
首先通过arc()来绘制时钟外层的圆圈。

context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 5, 0, Math.PI * 2,  true);
context.fill();

接下来我们绘制数字

var numerals = [1,2,3,4,5,6,7,8,9,10,11,12],
    angle = 0,
    numeralWidth = 0;

    numerals.forEach(function (numeral) {
        angle = Math.PI/6 * (numeral - 3);
        numeralWidth =context.measureText(numeral).width;
                context.fillText(numeral, canvas.width/2 + Math.cos(angle) * HAND_RADIUS - numeralWidth / 2,
                canvas.height / 2 + Math.sin(angle) * HAND_RADIUS + FONT_HEIGHT / 3);
    })

剩下的还有三个指针，我们会用moveTo()，lineTO(), stroke()三个方法来绘制指针。

        function drawHand(loc, isHour) {
            var angle = (Math.PI*2) * (loc/60) - Math.PI/2,
                    handRadius = isHour ? RADIUS - HAND_TRUNCATION-HOUR_HAND_TRUNCATION
                            : RADIUS - HAND_TRUNCATION;

            context.moveTo(canvas.width/2, canvas.height/2);
            context.lineTo(canvas.width/2  + Math.cos(angle)*handRadius,
                    canvas.height/2 + Math.sin(angle)*handRadius);
            context.stroke();
        }

        function drawHands() {
            var date = new Date,
                    hour = date.getHours();
            hour = hour > 12 ? hour - 12 : hour;
            drawHand(hour*5 + (date.getMinutes()/60)*5, true, 0.5);
            drawHand(date.getMinutes(), false, 0.5);
            drawHand(date.getSeconds(), false, 0.2);
        }

        drawHands()

我们先用move()将画笔移动到canvas中指定的地点，然后调用lineTo方法绘制一条从起点到终点的路线