HTML5画布⽕柴⼈实例及代码⽬录
HTML5的画布：在页⾯中绘制图形的特殊区域
1、H5中的画布标签
<canvas id="画布的名称" width="宽度" height="⾼度">
</canvas>
2、获取画布
var cas = ElementById("画布的名称")
3、获取画笔
context对象，使⽤该对象可以在画布上绘制图形
var ctx = Context('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 = ElementById("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.lineTo(200, 155);
ctx.stroke();
//3.绘制⾝体
ctx.beginPath();
ctx.lineTo(200, 270);
ctx.lineWidth = 35;
ctx.stroke();
//4.绘制⽂件
ctx.beginPath();
ctx.lineTo(250, 205);
ctx.lineTo(250, 260)
ctx.lineTo(250, 260)
ctx.lineTo(150, 260);
ctx.lineWidth = 2;
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
ctx.stroke();
//6.绘制胳膊
ctx.beginPath();
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';
html5颜代码
ctx.fill();
//8.绘制左腿
ctx.beginPath();
ctx.lineTo(180, 440);
ctx.stroke();
//8.绘制右腿
ctx.beginPath();
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.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.lineTo(225, 440);
ctx.stroke();
</script>
展⽰效果如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。