HTML５　Canvas绘图求救

Lemon萌 2012-06-13 05:12:10



<!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>

我已经把火柴人的头部和身子画出来了，可是，目前还没有找到方法如何把它的右胳膊画出来，请各位大侠帮我看看,如何翻转胳膊，谢谢了

...全文

120 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Lemon萌 2012-06-13

打赏
举报

[Quote=引用 3 楼的回复:]

引用 2 楼的回复:

引用 1 楼的回复:

HTML code

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制路径</title>
</head>

<body>
<canvas style=" background:#000;"></canvas>
<s……
[/Quote]

解决了，谢谢，刚才没看见那个属性

Lemon萌 2012-06-13

打赏
举报

[Quote=引用 1 楼的回复:]

HTML code

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制路径</title>
</head>

<body>
<canvas style=" background:#000;"></canvas>
<script>
//绘制火柴人
var canvas = docume……
[/Quote]

解决了，谢谢

三石-gary 2012-06-13

打赏
举报

[Quote=引用 2 楼的回复:]

引用 1 楼的回复:

HTML code

<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>绘制路径</title>
</head>

<body>
<canvas style=" background:#000;"></canvas>
<script>
//绘制火柴人
……
[/Quote]
你可以看看它里面的方法。。没记错的话是有的

Lemon萌 2012-06-13

打赏
举报

三石-gary 2012-06-13

打赏
举报



<!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>