html5基础入门教程之canvas绘制图形_html5 canvas绘图教程-优快云博客

本文链接：https://blog.youkuaiyun.com/webxuexi168/article/details/104365004

本文是HTML5 canvas的基础入门教程，讲解了如何使用canvas绘制图形，包括矩形、路径、线条、弧线及贝塞尔曲线，并提供了详细的示例代码。同时介绍了canvas网格系统，帮助理解图形的位置计算。

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

canvas绘制图形

在正式开始讲如何利用canvas绘制图形前，先介绍下canvas的网格。

在上面的例子中，最后一个例子里绘制了两个正方形，拿其中的红色正方形来讲。运行代码后，会发现它离左上角有一定的距离。这个距离是由传进的参数来决定的，是(10,10)。这表示这个正方形的原点的坐标。在canvas网格中，原点定在左上角的位置（坐标(0,0)）。所有canvas里所绘制的图形的位置都是相对这个原点的。看下图，这个蓝色的方块的位置就是距离左边x像素，距离上边y像素，即它的坐标是(x,y)。实际上，是(x-0,y-0)，由于canvas定原点坐标为(0,0)所以便是(x,y)。

canvas_default_grid
（素材来源：Canvas Tutorial 中文, Mozilla ）

绘制矩形

有三个函数可以用于绘制矩形，分别是：

fillRect(x,y,width,height) //填充一个矩形
strokeRect(x,y,width,height) //绘制一个矩形的边框（但不填充矩形的内部）
clearRect(x,y,width,height) //擦出了指定的矩形，并且用一个透明的颜色填充

以上三个函数都有四个参数，其中x,y表示矩形左上角的坐标，即相对于原点的位置；width,height指定了矩形的宽高。

其中，fillRect()方法用fillStyle属性所指定的颜色、渐变和模式来填充指定的矩形；strokeRect()方法所绘制的矩形边框，线条的颜色和线条宽度由strokeStyle和lineWidth属性指定。矩形边角的形状由lineJoin属性指定。

绘制矩形示例：

rectangle

function draw(){
     var canvas=document.getElementById('testRectangle');
	 if(canvas.getContext){
	    var ctx=canvas.getContext('2d');
		ctx.fillRect(25,25,100,100);
		ctx.clearRect(45,45,60,60);
		ctx.strokeRect(50,50,50,50);
	 }
  }

这个例子，fillRect()方法绘制了一个100X100的黑色矩形（没有使用fillStyle设置填充色的话，默认的都是黑色的背景），它左上角的坐标为(25,25)；接着，clearRect()方法在原先的基础上，清除了一个60×60的矩形，它左上角的坐标是(45,45)；最后，利用strokeRect()方法，绘制了一个50×50大小的矩形边框，它左上角的坐标为(50,50)。

绘制路径

与绘制