本篇文章主要介绍了"HTML5 CANVAS怎样绘制线条曲线"，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
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>
以上就介绍了HTML5 CANVAS怎样绘制线条曲线，包括了方面的内容，希望对HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_93981.html
