canvas基本绘图

HTML5 Canvas基础绘图指南

最新推荐文章于 2025-10-12 17:13:07 发布

原创最新推荐文章于 2025-10-12 17:13:07 发布 · 736 阅读

1 ·

CC 4.0 BY-SA版权

HTML5的canvas元素提供了一种动态图形绘制能力，可用于2D和3D图形。要绘制图形，首先获取canvas对象，然后使用getContext创建2D画笔。图形样式包括lineWidth、fillStyle和strokeStyle。例如，可以使用fillRect方法绘制矩形，moveTo和lineTo绘制线条，arc方法绘制圆形。此外，文章还提到了如何在canvas上实现一个时钟的示例代码。

canvas 绘图
元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制,。HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

用canvas 绘制图形时经过以下几个步骤：
1.获取canvas对象.
2.使用canvas对象的getContext方法来获取图形上下文，创建一个2d的画笔。
3.lineWidth用来指定图形边框的线宽。
4.fillStyle和strokeStyle分别指定绘图时填充的颜色和边框的颜色。

绘制一个矩形

<canvas id="mycanvas" width="" height=""></canvas>
		<script>
			   var mycanvas = document.getElementById("mycanvas");  //获取画布
			   var context = mycanvas.getContext("2d");                     //获取2d画笔
			   context.fillstyle ="black";												  //填充的颜色
               context.fillRect(10,0,150,75);								
		</script>

在这里插入图片描述
fillStyle 默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形的填充方式。

在Canvas上画一条直线：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

<canvas id="mycanvas" width="" height=""></canvas>
		<script>
			   var mycanvas = document.getElementById("mycanvas");
			   var context = mycanvas.getContext("2d");
			 context.moveTo(0,0);
			 context.lineTo(200,200);
			 context.stroke();
		</script>

在这里插入图片描述
在canvas中绘制圆形,。

<canvas id="mycanvas" width="" height=""></canvas>
		<script>
			   var mycanvas = document.getElementById("mycanvas");
			   var context = mycanvas.getContext("2d");
			context.beginPath();
			context.arc(150,80,60,0,2*Math.PI);
			context.stroke();
		</script>

在这里插入图片描述
context.arc(150,80,60,0,2Math.PI);
150：圆的中心的 x 坐标 |
80：圆的中心的 y 坐标|
60：圆的半径|
0：起始角，以弧度计（弧的圆形的三点钟位置是 0 度）|
2Math.PI：结束角，以弧度计算。