canvas绘制火柴人

<!doctype html>
<html>
<head>
<!--canvas绘制火柴人-->
<style>
#huaban{
border:1px solid;
}
</style>
<script>
</script>
<meta charset="UTF-8">
</head>
<body>
<canvas width="200" height="200" id="huaban">
</canvas>
<script>
var can=document.getElementById("huaban");//获得画板数据
var con=can.getContext('2d');//获得笔刷
    con.lineWidth=2;//设置县调平宽度为2个像素
   con.beginPath();//起始一个新路径
   con.arc(100,50,27,0,Math.PI*2,true);//一个圆形路径
   con.stroke();//画出一个线条圆当做脸
   con.beginPath();//起始一个新路径
   con.arc(100,50,20,0,Math.PI,false);//一个半圆弧路径
   con.stroke();//绘制半圆当做嘴
   con.beginPath();//起始新的路径
   con.arc(91,46,4,0,Math.PI*2,true);
   con.fill();//填充两个小圆当做眼睛
    con.beginPath();
   con.arc(109,46,4,0,Math.PI*2,true);
   con.fill();
   con.beginPath();//开始新路径
   con.moveTo(100,77);//移动到下巴
   con.lineTo(100,160);//画一个直线当身子
   con.moveTo(100,90);//画两个斜线当手
   con.lineTo(75,120);
    con.moveTo(100,90);
   con.lineTo(125,120);
     con.moveTo(100,160);//画俩个斜线当腿
     con.lineTo(70,200);
     con.moveTo(100,160);
     con.lineTo(130,200);
    con.stroke();//画出身体
</script>
</body>
</html>

以下是一个使用HTML5 Canvas绘制火柴人拿文件夹的示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>火柴人拿文件夹</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="drawingCanvas" width="500" height="500"></canvas> <script> const canvas = document.getElementById('drawingCanvas'); const ctx = canvas.getContext('2d'); // 绘制火柴人 function drawStickFigure() { ctx.beginPath(); ctx.moveTo(250, 50); ctx.lineTo(250, 150); ctx.moveTo(250, 100); ctx.lineTo(200, 200); ctx.lineTo(250, 150); ctx.lineTo(300, 200); ctx.moveTo(250, 150); ctx.lineTo(200, 250); ctx.lineTo(250, 300); ctx.lineTo(300, 250); ctx.lineTo(250, 150); ctx.stroke(); // 绘制文件夹 ctx.beginPath(); ctx.rect(200, 220, 100, 70); ctx.stroke(); // 绘制文件夹中的文件 ctx.beginPath(); ctx.moveTo(220, 240); ctx.lineTo(280, 240); ctx.stroke(); } drawStickFigure(); </script> </body> </html> ``` 这段代码做了以下几件事: 1. 创建了一个500x500像素的画布。 2. 定义了一个名为drawStickFigure的函数来绘制火柴人和文件夹。 3. 使用线条绘制火柴人的身体、四肢和头部。 4. 使用矩形绘制了文件夹。 5. 在文件夹中绘制了一条横线,表示文件。 你可以将这段代码保存为一个.html文件,然后在浏览器中打开它,就能看到绘制出的火柴人拿着文件夹的图像。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值