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();
 };