HTML５ Canvas绘图
日期：2014-05-17 浏览次数：20625 次
HTML５ Canvas绘图求救
我已经把火柴人的头部和身子画出来了，可是，目前还没有找到方法如何把它的右胳膊画出来，请各位大侠帮我看看,如何翻转胳膊，谢谢了
------解决方案--------------------
- HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制路径</title>
</head>
<body>
<canvas style=" background:#000;"></canvas>
<script>
//绘制火柴人
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
//绘制头部
ctx.beginPath();
ctx.arc(100, 35, 25, 0, Math.PI*2, true);
ctx.fillStyle = '#fff';
ctx.fill();
//绘制笑脸
ctx.beginPath();
ctx.strokeStyle = '#c00';
ctx.lineWidth = 3;
ctx.arc(100, 37, 15, 0, Math.PI, false);
ctx.stroke();
//绘制眼睛
ctx.beginPath();
ctx.fillStyle = '#c00';
//绘制左眼
ctx.arc(90, 30, 2, 0, Math.PI*2, true);
ctx.fill();
ctx.moveTo(113, 30);
//绘制右眼
ctx.arc(110, 30, 2, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
//绘制身体
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.fillRect(98, 55, 3, 50);
//绘制胳膊
ctx.beginPath();
//绘制左胳膊
ctx.moveTo(70, 100);
ctx.lineTo(100, 70);
ctx.stroke();
</script>
</body>
</html>
我已经把火柴人的头部和身子画出来了，可是，目前还没有找到方法如何把它的右胳膊画出来，请各位大侠帮我看看,如何翻转胳膊，谢谢了
------解决方案--------------------
- HTML code
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制路径</title>
</head>
<body>
<canvas style=" background:#000;"></canvas>
<script>
//绘制火柴人
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
//绘制头部
ctx.beginPath();
ctx.arc(100, 35, 25, 0, Math.PI * 2, true);
ctx.fillStyle = '#fff';
ctx.fill();
//绘制笑脸
ctx.beginPath();
ctx.strokeStyle = '#c00';
ctx.lineWidth = 3;
ctx.arc(100, 37, 15, 0, Math.PI, false);
ctx.stroke();
//绘制眼睛
ctx.beginPath();
ctx.fillStyle = '#c00';
//绘制左眼
ctx.arc(90, 30, 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.moveTo(113, 30);
//绘制右眼
ctx.arc(110, 30, 2, 0, Math.PI * 2, true);
ctx.fill();
ctx.stroke();
//绘制身体
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.fillRect(98, 55, 3, 50);
//绘制胳膊
ctx.beginPath();
//绘制左胳膊
ctx.moveTo(70, 100);
ctx.lineTo(100, 70);
//绘制右胳膊
ctx.moveTo(120, 100);
ctx.lineTo(100, 70);
ctx.stroke();
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
