canvas基础学习

/**
 * Created by ty on 2016/7/11.
 * canvas 基础
 */
window.onload = function() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    //画线条
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 200);
    ctx.lineTo(50, 200);
    ctx.lineTo(50, 50);

    ctx.fillStyle = "rgba(121, 13, 134, .6)";
    ctx.fill();
    //给该多边形描边
    ctx.lineWidth = 6;
    ctx.strokeStyle = "blue";
    ctx.stroke();

    //再画一条线，当有多个图形时候，应该每次前后都用beginPath()和closePath()
    ctx.beginPath();
    ctx.moveTo(150, 50);
    ctx.lineTo(150, 100);

    ctx.lineWidth = 10;
    ctx.strokeStyle = "green";
    ctx.stroke();


    //画圆形-顺时针版
    ctx.beginPath();
    ctx.arc(300, 100, 60, 0, 1.5*Math.PI);
    ctx.strokeStyle = "rgb(24,100,150)";
    ctx.lineWidth = 3;
    ctx.closePath();
    ctx.stroke();

    //画圆形-逆时针版
    ctx.beginPath();
    ctx.arc(430, 100, 60, 0, 0.5*Math.PI, true);
//    ctx.strokeStyle = "rgb(24,100,150)";
//    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();

    /**
     *     渐变： 线性渐变
     *     在新画布中做渐变
     */
    var canvas2 = document.getElementById("canvas2");
    var ctx2 = canvas2.getContext("2d");

    var linearGradient = ctx2.createLinearGradient(0, 0, ctx2.canvas.width, ctx2.canvas.height);
    linearGradient.addColorStop(0,"#000");
    linearGradient.addColorStop(1, "#035");
    ctx2.fillStyle = linearGradient;
    ctx2.fillRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);

    /**
     *     渐变：径向渐变
     *     在新画布中做渐变
     */
    var canvas3 = document.getElementById("canvas3");
    var ctx3 = canvas3.getContext("2d");

    var radialGradient = ctx3.createRadialGradient(0, 0, 100, 800, 800, 20);
    radialGradient.addColorStop(0,"red");
    radialGradient.addColorStop(0.5,"green");
    radialGradient.addColorStop(1, "#035");
    ctx3.fillStyle = radialGradient;
    ctx3.fillRect(0, 0, ctx3.canvas.width, ctx3.canvas.height);


    /**
     * 使用pattern创建图片
     * createPattern（ele, repeat-style）
     */
    var canvas4 = document.getElementById("canvas4");
    var ctx4 = canvas4.getContext("2d");
    var imgEle = new Image();

    imgEle.src = "../image/search.png";
    imgEle.onload = function() {
        var imgPattern = ctx4.createPattern(imgEle, "repeat");
        ctx4.fillStyle = imgPattern;
        ctx4.rotate(10 * Math.PI / 180);
        ctx4.fillRect(0, 0, ctx4.canvas.width, ctx4.canvas.height);
    };


    /**
     * arcTo
     */
    var canvas5 = document.getElementById("canvas5");
    var ctx5 = canvas5.getContext("2d");

    ctx5.beginPath();
    ctx5.moveTo(50, 50);
    ctx5.lineTo(150, 50);
    ctx5.lineTo(150, 150);

    ctx5.strokeStyle = "green";
    ctx5.stroke();

    ctx5.beginPath();
    ctx5.moveTo(50, 50);
    ctx5.arcTo(150, 50, 150, 150, 70);

    ctx5.strokeStyle = "purple";
    ctx5.stroke();

    /**
     * fillText 文字 写字
     */
    //ctx.beginPath();
    var canvas6 = document.getElementById("canvas6");
    var ctx6 = canvas6.getContext("2d");
    ctx6.font = "3rem normal  Microsoft YaHei,weiruanyahei";
    ctx6.fillText("88",100, 300);

    ctx6.font = "3rem bold Microsoft YaHei,weiruanyahei";
    ctx6.textAlign = "left";
    ctx6.fillText("left",100, 380);//无bold效果，可见顺序不能变

    ctx6.font = "bold 3rem Microsoft YaHei,weiruanyahei";
    ctx6.textAlign = "right";
    ctx6.fillText("right",100, 440);//有bold效果，可见顺序不能变

    ctx6.font = "bolder 4rem Microsoft YaHei,weiruanyahei";
    ctx6.textAlign = "center";
    ctx6.fillText("center",100, 500);

    //画个辅助线，看看文字对齐到底在哪儿
    ctx6.beginPath();
    ctx6.moveTo(400, 0);
    ctx6.lineTo(100, 600);
    ctx6.lineWidth=2;
    ctx6.strokeStyle = "red";
    ctx6.stroke();
    ctx6.closePath();

    //ctx.closePath();
};