标签：lineTo ctx 画布 PI stroke 实例 HTML5 beginPath Math
目录
HTML5的画布：在页面中绘制图形的特殊区域
1、H5中的画布标签
<canvas id="画布的名称" width="宽度" height="高度">
</canvas>
2、获取画布
var cas = document.getElementById("画布的名称")
3、获取画笔
context对象，使用该对象可以在画布上绘制图形
var ctx = cas.getContext('2d');
4、画直线
(1)确定初始位置(起始点)：moveTo(x,y)
(2)确定连接端点(终点)：lineTo(x,y)
(3)描边：stroke() --- 在起始点和终点之间画一条线
(4)设置线宽：lineWidth
(5)描边的颜色：strokeStyle='颜色'
(6)线条端点的形状：lineCap=’属性值’
butt：无形状,方形的边缘 默认值
round：圆形端点
square：方形端点
5、线条的路径
(1)重置路径：beginPath()
(2)闭合路径：closePath()
6、图形填充
fill()
fillStyle="颜色" //设置填充色
7、绘制圆
arc(x,y,r,开始角,结束角,方向)
x和y：表示圆心坐标
r：圆半径
开始角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
结束角：0、0.5*Math.PI、1*Math.PI、1.5*Math.PI、2*Math.PI
方向：true(逆时针)、false(顺时针)
代码如下：
<canvas id="cas" width="1000" height="1000">您的浏览器不支持此画布</canvas>
<script>
var ctx = document.getElementById("cas").getContext('2d');
//1.绘制头部
ctx.beginPath();
ctx.arc(200, 105, 35, 0, 2 * Math.PI, true);
ctx.lineWidth = '5';
ctx.stroke();
//2.绘制脖子
ctx.beginPath();
ctx.moveTo(200, 140);
ctx.lineTo(200, 155);
ctx.stroke();
//3.绘制身体
ctx.beginPath();
ctx.moveTo(200, 155);
ctx.lineTo(200, 270);
ctx.lineWidth = 35;
ctx.stroke();
//4.绘制文件
ctx.beginPath();
ctx.moveTo(150, 205);
ctx.lineTo(250, 205);
ctx.lineTo(250, 260)
ctx.lineTo(150, 260);
ctx.lineWidth = 2;
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
//6.绘制胳膊
ctx.beginPath();
ctx.moveTo(200, 155);
ctx.lineTo(240, 210);
ctx.lineTo(200, 250);
ctx.lineWidth = 10;
ctx.stroke();
//7.绘制拳头
ctx.beginPath();
ctx.arc(200, 250, 10, 0, 2 * Math.PI, true);
ctx.fillStyle = 'black';
ctx.fill();
//8.绘制左腿
ctx.beginPath();
ctx.moveTo(200, 260);
ctx.lineTo(180, 440);
ctx.stroke();
//8.绘制右腿
ctx.beginPath();
ctx.moveTo(200, 260);
ctx.lineTo(220, 440);
ctx.stroke();
//9.绘制左脚
ctx.beginPath();
ctx.arc(165, 440, 16, 0, 1 * Math.PI, true);
ctx.lineWidth = 5;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(147, 440);
ctx.lineTo(185, 440);
ctx.stroke();
//10.绘制右脚
ctx.beginPath();
ctx.arc(205, 440, 16, 0, 1 * Math.PI, true);
ctx.lineWidth = 5;
ctx.stroke();
ctx.beginPath();
ctx.moveTo(187, 440);
ctx.lineTo(225, 440);
ctx.stroke();
</script>展示效果如图
标签：lineTo,ctx,画布,PI,stroke,实例,HTML5,beginPath,Math 来源： https://blog.csdn.net/m0_61700036/article/details/120988105
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。