HTML5 —— canvas画布_html5 画布-优快云博客

本文链接：https://blog.youkuaiyun.com/impact_factor/article/details/118966967

本文介绍了HTML5的canvas元素，通过JavaScript在网页上进行图形绘制。内容包括绘制直线的详细步骤，如设置初始位置、连线端点、描边样式；圆的绘制方法，利用arc()函数定义圆心、半径和角度；以及如何绘制火柴人，展示了一种基本的图形组合技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas画布

一、绘制直线的过程
二、圆的绘制
三、绘制火柴人

画布：HTML5 的 canvas 元素使用 JavaScript。
在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

一、绘制直线的过程

创建画布：使用html5中画布标签

  <canvas id="id" width="宽度" height="高度">  
  </canvas>

JavaScript中获取画布

  document.getElementById('id')

准备画笔：context对象(画笔)，也称为绘制环境，使用该对象在画布中绘制图形 getContext('2d')
绘图：

(1)绘制线条：

初始位置、连线端点(终点)、描边(画线)

2d平面坐标系：画布的左上角是坐标原点(0,0),从原点开始向右延伸是x轴增大,向下延伸是y轴增大

(2)画线过程：
- 确定初始位置(起始点)：moveTo(x,y)
- 确定连接端点(终点)：lineTo(x,y)
- 描边：stroke()
(3)线条的样式：
- 线宽：lineWidth ='数值' ,默认以像素为单位
- 描边的颜色(线条颜色): strokeStyle = '颜色名或16进制颜色值'
- 端点的形状：lineCap = '形状'
  
  butt ：默认值，无端点形状，显示的是直线的方形边缘
  round：圆形端点
  square：方形端点
(4)线的路径：在同一个画布中添加再多的连线端点路径只有一条
- 开始新的路径：beginPath()
- 闭合路径：closePath()
- 路径填充：fill()

例子：

 <script>
	var canvas = document.getElementById('cavs');
	var context = canvas.getContext('2d');
	context.strokeStyle = 'red' //描边的颜色
	context.moveTo(10,10); //起始位置
	context.lineTo(10,100);//连线端点(竖线)
	context.lineTo(100,100);//连线端点(横线)
	context.closePath();//闭合路径
	context.stroke();//描边
	context.fill(); //填充	
 </script>

二、圆的绘制

arc(x,y,r,开始角,结束角,方向)

参数	内容
x,y	圆心的坐标
r	圆的半径
开始角	开始的圆周率角度
结束角	结束的圆周率角度
方向	绘图方向(顺时针、逆时针)，true表示逆时针，false表示顺时针(默认)

示例：

 		var canvas = document.getElementById('cavs');
        var context = canvas.getContext('2d');
	    context.arc(150,80,50,0,2.0*Math.PI,false)
	    context.stroke()

三、绘制火柴人

代码：

<body>
    <canvas id="cas" width="1000" height="1000"></canvas>
</body>
<script>
    var cas = document.getElementById('cas');
    var context = cas.getContext('2d');
    //绘制头部
    context.arc(400, 100, 30, 0, 2 * Math.PI);
    context.lineWidth = '5';
    context.stroke();
    //绘制脸部
    context.beginPath();
    context.moveTo(390, 90);
    context.lineTo(380, 80);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.moveTo(410, 90);
    context.lineTo(420, 80);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.arc(390, 100, 5, 0, 2 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.arc(410, 100, 5, 0, 2 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    //绘制躯干
    context.beginPath();
    context.moveTo(400, 130);
    context.lineTo(400, 140);
    context.lineWidth = '5';
    context.stroke();
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(450, 260);
    context.lineWidth = '15';
    context.stroke();
    //绘制手臂
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(480, 220);
    context.lineTo(520, 180);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(520, 180, 10, 0, 2 * Math.PI);
    context.fillStyle = '#000';
    context.fill();
    context.beginPath();
    context.moveTo(520, 180);
    context.lineTo(510, 160);
    context.lineWidth = '4';
    context.lineCap = 'round';
    context.stroke();
    //绘制手臂
    context.beginPath();
    context.moveTo(400, 140);
    context.lineTo(280, 160);
    context.lineTo(330, 220);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(330, 220, 10, 0, 2 * Math.PI);
    context.fillStyle = '#000';
    context.fill();
    //绘制腿部
    context.beginPath();
    context.moveTo(450, 260);
    context.lineTo(430, 290);
    context.lineTo(620, 310);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(625, 295, 15, 1.55 * Math.PI, 0.55 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
    //绘制腿部
    context.beginPath();
    context.moveTo(450, 260);
    context.lineTo(500, 220);
    context.lineTo(650, 280);
    context.lineWidth = '10';
    context.stroke();
    context.beginPath();
    context.arc(655, 265, 15, 1.58 * Math.PI, 0.58 * Math.PI, true);
    context.closePath();
    context.lineWidth = '5';
    context.stroke();
</script>