canvas学习（四）：矩形

最新推荐文章于 2021-04-19 16:50:53 发布

原创最新推荐文章于 2021-04-19 16:50:53 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#使用canvas绘制矩形

canvas 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用HTML5的Canvas API来绘制矩形，并提供了两种不同的实现方法。首先通过moveTo和lineTo方法手动绘制了一个矩形，接着使用更简便的rect方法绘制了另一个矩形。这两个例子展示了Canvas的基本用法。

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

使用canvas的基本格式前面已经说过了，这里不再累赘，直接上代码：

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");//获取canvas对象
	if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签
		var context = myCanvas.getContext("2d");//获取画布context的上下文环境

		//设置canvas的宽度和高度
		myCanvas.width=500;
		myCanvas.height=500;

		//画一个矩形
		drawRect(context,0,0,400,400,10,"#005588","yellow");
		drawRect2(context,50,50,400,400,10,"#005588","rgba(0,256,0,0.5)");//后面绘制的图形遮挡前面绘制的图形
	}else{
		alert("您的浏览器不支持canvas，请换个浏览器试试");
	}
};

/**
*该方法用来绘制一个矩形
*@param cxt:画布的上下文环境
*@param x:矩形起点x坐标
*@param y:矩形起点y坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param borderWidth:边框线粗细
*@param borderColor:边框线颜色
*@param fillColor:填充色
**/
function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
	cxt.beginPath();
	cxt.moveTo(x,y);//左上角的第一个点坐标
	cxt.lineTo(x+width,y);//右上角的第二个点坐标
	cxt.lineTo(x+width,y+height);//右下角的第三个点坐标
	cxt.lineTo(x,y+height);//左下角的第四个点坐标
	cxt.closePath();

	cxt.lineWidth = borderWidth;//边框线粗细
	cxt.strokeStyle=borderColor;//边框线颜色
	cxt.fillStyle=fillColor;//填充色

	cxt.fill();//先填充后描边，边框粗细为10，若反过来先描边后填充则为5，因为里面的边框被填充色覆盖了。
	cxt.stroke();
}

/**
*该方法用来绘制一个矩形
*@param cxt:画布的上下文环境
*@param x:矩形起点x坐标
*@param y:矩形起点y坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param borderWidth:边框线粗细
*@param borderColor:边框线颜色
*@param fillColor:填充色
**/
function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
	cxt.beginPath();
	cxt.rect(x,y,width,height);
	cxt.closePath();

	cxt.lineWidth = borderWidth;//边框线粗细
	cxt.strokeStyle=borderColor;//边框线颜色
	cxt.fillStyle=fillColor;//填充色

	cxt.fill();//先填充后描边，边框粗细为10，若反过来先描边后填充则为5，因为里面的边框被填充色覆盖了。
	cxt.stroke();
}

感谢老师！