HTML5 canvas入门 线条例子
1、简单线条
2、三角形
3、填充三角形背景颜色
4、线条颜色以及线条大小
5、二次贝塞尔曲线
6、三次贝塞尔曲线
<!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="keywords" content="脚本小子_小贝_HTML5_canvas线条"/> <meta name="description" content="脚本小子_小贝_HTML5_canvas线条"/> <meta name="" content="脚本小子小贝 xiaobei qq:2801616735"/> <title>HTML5_canvas线条</title> <style> .divbox{ border:1px solid black; float:left; width:95%; padding:5px; } .divcanvas { float:left; } canvas{ border:1px solid red; } .divinfo { float:left; padding:10px; width:500px; height:auto; border:1px solid black; } .divclear { clear:both; } </style> </head> <body> <h2>HTML5_canvas线条</h2> <ul> <li>1、简单线条</li> <li>2、三角形</li> <li>3、填充三角形背景颜色</li> <li>4、线条颜色以及线条大小</li> <li>5、二次贝塞尔曲线</li> <li>6、三次贝塞尔曲线</li> </ul> <hr/> <h3>1、简单线条</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas1" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="func(1);">创建线条</button> </div> <div class="divinfo" id="info1" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.moveTo(10,10); //线条定位起点<br/> ctx.lineTo(20,50); //线条定位终点<br/> ctx.stroke(); //画线条<br/> </div> </div> <div class="divclear"></div> <hr/> <h3>2、三角形</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas2" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="func(2);">创建三角形</button> </div> <div class="divinfo" id="info2" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.lineWidth = 10; //线条宽度大小<br/> ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/> ctx.moveTo(50,50); //线条定位起点<br/> ctx.lineTo(50,100); //线条定位终点<br/> ctx.lineTo(100,100); //线条定位终点<br/> ctx.closePath(); //创建从当前点到开始点的路径<br/> ctx.stroke(); //画线条 </div> </div> <div class="divclear"></div> <hr/> <h3>3、填充三角形背景颜色</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas3" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="changeColor(3,'red');">填充红色</button> <button onclick="changeColor(3,'blue');">填充蓝色</button> </div> <div class="divinfo" id="info3" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.lineWidth = 10; //线条宽度大小<br/> ctx.lineJoin = "round"; //线条相交时夹角形状 bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认)<br/> ctx.moveTo(50,50); //线条定位起点<br/> ctx.lineTo(50,100); //线条定位终点<br/> ctx.lineTo(100,100); //线条定位终点<br/> ctx.closePath(); //创建从当前点到开始点的路径<br/> ctx.stroke(); //画线条 <br/> ctx.fillStyle = "color" //填充的颜色设置<br/> ctx.fill(); //进行填充操作 </div> </div> <div class="divclear"></div> <hr/> <h3>4、线条颜色以及线条大小</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas4" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="changeColor(4,'red');">创建红色</button> <button onclick="changeColor(4,'blue');">创建蓝色</button> </div> <div class="divinfo" id="info4" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.lineWidth = 10; //线条宽度大小<br/> ctx.strokeStyle = lineColor; //线条颜色<br/> ctx.moveTo(50,50); //线条定位起点<br/> ctx.lineTo(50,100); //线条定位终点<br/> ctx.stroke(); //画线条 </div> </div> <div class="divclear"></div> <hr/> <h3>5、二次贝塞尔曲线</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas5" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="func(5);">二次贝塞尔曲线</button> </div> <div class="divinfo" id="info5" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.moveTo(30,30); //线条定位起点<br/> ctx.quadraticCurveTo(40,100,200,40); //(x1,y1,x2,y2) (x1,y1)为控制点 (x2,y2)为结束点<br/> ctx.stroke(); //画线条 </div> </div> <div class="divclear"></div> <hr/> <h3>6、三次贝塞尔曲线</h3> <div class="divbox"> <div class="divcanvas"> <canvas id="canvas6" width="400" height="150"></canvas> </div> <div class="divcanvas"> <button onclick="func(6);">三次贝塞尔曲线</button> </div> <div class="divinfo" id="info6" style="display:none;"> ctx.beginPath(); //开始新路径<br/> ctx.moveTo(30,30); //线条定位起点<br/> ctx.bezierCurveTo(30,100,140,100,140,40); //(x1,y1,x2,y2,x3,y3) (x1,y1)为控制点1 (x2,y2)为控制点2 (x3,y3)为结束点<br/> ctx.stroke(); //画线条 </div> </div> </body> <script> var lineColor = 'black'; var lineWidth = '10'; function changeColor(id,color) { lineColor = color; func(id); } function func(id) { var c = document.getElementById("canvas"+id); var ctx = c.getContext("2d"); switch(id) { case 1: ctx.beginPath(); ctx.moveTo(10,10); ctx.lineTo(20,50); ctx.stroke(); break; case 2: ctx.beginPath(); ctx.lineWidth = 10; ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认) ctx.moveTo(50,50); ctx.lineTo(50,100); ctx.lineTo(100,100); ctx.closePath(); ctx.stroke(); break; case 3: ctx.beginPath(); ctx.lineWidth = 10; ctx.lineJoin = "round"; //bevel==>创建斜角 round==>创建圆角 miter==>创建尖角(默认) ctx.moveTo(50,50); ctx.lineTo(50,100); ctx.lineTo(100,100); ctx.closePath(); ctx.stroke(); ctx.fillStyle = lineColor; ctx.fill(); break; case 4: ctx.beginPath(); ctx.lineWidth = lineWidth; ctx.strokeStyle = lineColor; ctx.moveTo(100,50); ctx.lineTo(50,100); ctx.stroke(); break; case 5: ctx.beginPath(); ctx.moveTo(30,30); ctx.quadraticCurveTo(40,100,200,40); ctx.stroke(); break; case 6: ctx.beginPath(); ctx.moveTo(30,30); ctx.bezierCurveTo(30,100,140,100,140,40); ctx.stroke(); break; } document.getElementById("info"+id).style.display = ""; } </script> </html>
