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