canvas基础学习 

  1 /**
  2  * Created by ty on 2016/7/11.
  3  * canvas 基础
  4  */
  5 window.onload = function() {
  6     var canvas = document.getElementById("canvas");
  7     var ctx = canvas.getContext("2d");
  8 
  9     //画线条
 10     ctx.moveTo(50, 50);
 11     ctx.lineTo(200, 200);
 12     ctx.lineTo(50, 200);
 13     ctx.lineTo(50, 50);
 14 
 15     ctx.fillStyle = "rgba(121, 13, 134, .6)";
 16     ctx.fill();
 17     //给该多边形描边
 18     ctx.lineWidth = 6;
 19     ctx.strokeStyle = "blue";
 20     ctx.stroke();
 21 
 22     //再画一条线，当有多个图形时候，应该每次前后都用beginPath()和closePath()
 23     ctx.beginPath();
 24     ctx.moveTo(150, 50);
 25     ctx.lineTo(150, 100);
 26 
 27     ctx.lineWidth = 10;
 28     ctx.strokeStyle = "green";
 29     ctx.stroke();
 30 
 31 
 32     //画圆形-顺时针版
 33     ctx.beginPath();
 34     ctx.arc(300, 100, 60, 0, 1.5*Math.PI);
 35     ctx.strokeStyle = "rgb(24,100,150)";
 36     ctx.lineWidth = 3;
 37     ctx.closePath();
 38     ctx.stroke();
 39 
 40     //画圆形-逆时针版
 41     ctx.beginPath();
 42     ctx.arc(430, 100, 60, 0, 0.5*Math.PI, true);
 43 //    ctx.strokeStyle = "rgb(24,100,150)";
 44 //    ctx.lineWidth = 3;
 45     ctx.stroke();
 46     ctx.closePath();
 47 
 48     /**
 49      *     渐变： 线性渐变
 50      *     在新画布中做渐变
 51      */
 52     var canvas2 = document.getElementById("canvas2");
 53     var ctx2 = canvas2.getContext("2d");
 54 
 55     var linearGradient = ctx2.createLinearGradient(0, 0, ctx2.canvas.width, ctx2.canvas.height);
 56     linearGradient.addColorStop(0,"#000");
 57     linearGradient.addColorStop(1, "#035");
 58     ctx2.fillStyle = linearGradient;
 59     ctx2.fillRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);
 60 
 61     /**
 62      *     渐变：径向渐变
 63      *     在新画布中做渐变
 64      */
 65     var canvas3 = document.getElementById("canvas3");
 66     var ctx3 = canvas3.getContext("2d");
 67 
 68     var radialGradient = ctx3.createRadialGradient(0, 0, 100, 800, 800, 20);
 69     radialGradient.addColorStop(0,"red");
 70     radialGradient.addColorStop(0.5,"green");
 71     radialGradient.addColorStop(1, "#035");
 72     ctx3.fillStyle = radialGradient;
 73     ctx3.fillRect(0, 0, ctx3.canvas.width, ctx3.canvas.height);
 74 
 75 
 76     /**
 77      * 使用pattern创建图片
 78      * createPattern（ele, repeat-style）
 79      */
 80     var canvas4 = document.getElementById("canvas4");
 81     var ctx4 = canvas4.getContext("2d");
 82     var imgEle = new Image();
 83 
 84     imgEle.src = "../image/search.png";
 85     imgEle.onload = function() {
 86         var imgPattern = ctx4.createPattern(imgEle, "repeat");
 87         ctx4.fillStyle = imgPattern;
 88         ctx4.rotate(10 * Math.PI / 180);
 89         ctx4.fillRect(0, 0, ctx4.canvas.width, ctx4.canvas.height);
 90     };
 91 
 92 
 93     /**
 94      * arcTo
 95      */
 96     var canvas5 = document.getElementById("canvas5");
 97     var ctx5 = canvas5.getContext("2d");
 98 
 99     ctx5.beginPath();
100     ctx5.moveTo(50, 50);
101     ctx5.lineTo(150, 50);
102     ctx5.lineTo(150, 150);
103 
104     ctx5.strokeStyle = "green";
105     ctx5.stroke();
106 
107     ctx5.beginPath();
108     ctx5.moveTo(50, 50);
109     ctx5.arcTo(150, 50, 150, 150, 70);
110 
111     ctx5.strokeStyle = "purple";
112     ctx5.stroke();
113 
114     /**
115      * fillText 文字 写字
116      */
117     //ctx.beginPath();
118     var canvas6 = document.getElementById("canvas6");
119     var ctx6 = canvas6.getContext("2d");
120     ctx6.font = "3rem normal  Microsoft YaHei,weiruanyahei";
121     ctx6.fillText("88",100, 300);
122 
123     ctx6.font = "3rem bold Microsoft YaHei,weiruanyahei";
124     ctx6.textAlign = "left";
125     ctx6.fillText("left",100, 380);//无bold效果，可见顺序不能变
126 
127     ctx6.font = "bold 3rem Microsoft YaHei,weiruanyahei";
128     ctx6.textAlign = "right";
129     ctx6.fillText("right",100, 440);//有bold效果，可见顺序不能变
130 
131     ctx6.font = "bolder 4rem Microsoft YaHei,weiruanyahei";
132     ctx6.textAlign = "center";
133     ctx6.fillText("center",100, 500);
134 
135     //画个辅助线，看看文字对齐到底在哪儿
136     ctx6.beginPath();
137     ctx6.moveTo(400, 0);
138     ctx6.lineTo(100, 600);
139     ctx6.lineWidth=2;
140     ctx6.strokeStyle = "red";
141     ctx6.stroke();
142     ctx6.closePath();
143 
144     //ctx.closePath();
145 };

 

posted @ 2016-07-18 20:58  哈姆PP  阅读(332)  评论(0)    收藏  举报