浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

Myth丶恋晨 2022-07-21 00:15 300阅读 0赞

HTML5的Canvas的功能可谓是非常强大，它可以做出很多炫酷的效果，从而更好的增加用户的体验。今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行一次封装，使用起来感觉更方便，可能封装的不全面，但是这个个人感觉后期可以自动添加，主要给自己复习使用，第一次发H5博客，菜鸟一枚，初识H5.

MikyouCanvas.js(自己封装的Canvas的Js库)

var mCanvas; //声明Canvas对象;
    var cxt; //声明context对象,该对象拥有丰富的绘图的API
    function initMikyouCanvas(mCanvas, cxt) {
    	this.mCanvas = mCanvas;
    	this.cxt = cxt;
    }
    /**
     * 1、绘制矩形(主要分为:绘制填充矩形和绘制边框矩形和清除矩形区域(利用isClear标记是否绘制清除矩形，实际上就是绘制一个与画布背景色一致的矩形区域),利用isFill变量来标记)
     * 主要使用canvas原生的API:FillRect(x,y,width,height),StrokeRect(x,y,width,height),ClearRect(x,y,width,height)
     * 自己封装的参数:drawRect(x,y,width,height,isClear,isFill,bgColor)
     * x:矩形起点的X坐标(注意：相对坐标系是以画布的左上角为原点，向右为X坐标正方向，向下为Y坐标的正方向)
     * y:矩形终点的Y坐标
     * width:矩形的宽度
     * height:矩形的高度
     * isClear:是否绘制清除画布的矩形区域，true则就是绘制一个清除画布矩形区域，false就是绘制其他两种矩形
     * isFill:是否是填充，false为绘制边框，true为绘制填充
     * bgColor:矩形的颜色，若为填充则为整个矩形背景色，边框则为边框色
     * */
    function drawRect(x, y, width, height, isClear, isFill, bgColor) {
    	if (isClear) { //为true表示绘制清除画布的矩形区域,那么传入的isFill, bgColor值可以为任意值
    		cxt.clearRect(x, y, width, height);
    	} else { //false
    		if (isFill) { //为true，则绘制填充矩形
    			cxt.fillStyle = bgColor;
    			cxt.fillRect(x, y, width, height);
    		} else { //为false,则绘制边框矩形
    			cxt.strokeStyle = bgColor;
    			cxt.strokeRect(x, y, width, height);
    		}
    	}
    
    }
    /**
     * 2、绘制圆弧(主要分为：绘制填充圆弧和绘制圆弧边框利用isFill变量来标记,注意：在绘制圆弧边框的时候还有一种特殊情况就是，只需要仅仅绘制弧边，不需要绘制圆弧开始起点和终点之间的连线，这个就是调用了beginPath()不需要调用closePath(),这里也使用一个isOnlyArc变量来标记true为仅仅绘制弧边
     *其他的正常)
     * 主要是使用的是canvas原生的API:
     * arc(x,y,radius,startAngle,endAngle,anticlockwise);
     * x:圆心X坐标
     * y:圆心Y坐标
     * startAngle:开始的弧度
     * endAngle:结束的弧度
     * anticlockwise:true为逆时针，false为顺时针
     * 自己封装的参数:drawCircle(x,y,radius,startAngle，endAngle,anticlockwise,isFill，bgColor)
     * x:圆心X坐标
     * y:圆心Y坐标
     * startAngle:开始的角度(通过getAngle方法将传入的角度转换成相应角度的弧度，
     * 	因为在原生的绘制圆弧的API它是根据弧度大小来绘制的，例如如果你想绘制一个30度的圆弧，如果直接传入30是不行的，要传入Math.PI/6
     * 所以在这里个人做了一个优化，直接传入30就通过getAngle方法转换成Math.PI/6，这样就很方便的绘制自己传入的角度大小的圆弧。
     * )
     * endAngle:结束的角度
     * 注意:如果要绘制圆形那么只需要调用该方法，传入的startAngle和endAngle是0度和360度即可。
     * anticlockwise:true为逆时针，false为顺时针
     * isFill:是否是填充，false为绘制边框，true为绘制填充
     * bgColor:圆弧的颜色
     * */
    function drawArc(x, y, radius, startAngle, endAngle, anticlockwise, isOnlyArc, isFill, bgColor) {
    	if (isFill) { //为true绘制填充圆弧
    		cxt.fillStyle = bgColor;
    		cxt.beginPath();
    		cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), anticlockwise);
    		cxt.closePath();
    		cxt.fill();
    	} else { //为false绘制边框圆弧
    		cxt.strokeStyle = bgColor;
    		cxt.beginPath();
    		cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), anticlockwise);
    		if (isOnlyArc) { //绘制边框的另一种情况就是仅仅绘制弧边不需要调用closePath()
    
    		} else { //否则就是不仅绘制边框还得绘制起点和终点的连线，需要调用了closePath();
    			cxt.closePath();
    		}
    
    		cxt.stroke();
    	}
    }
    /**
     * 3、绘制扇形(主要分为：绘制填充扇形和绘制扇形边框利用isFill变量来标记）
     *主要是使用的是canvas原生的API:
     * arc(x,y,radius,startAngle,endAngle,anticlockwise);
     * x:圆心X坐标
     * y:圆心Y坐标
     * startAngle:开始的弧度
     * endAngle:结束的弧度
     * anticlockwise:true为逆时针，false为顺时针
     * 自己封装参数API:drawSector(x,y,radius,startAngle,endAngle,anticlockwise,isFill,bgColor);
     * x:圆心X坐标
     * y:圆心Y坐标
     * startAngle:开始的角度(通过getAngle方法将传入的角度转换成相应角度的弧度，
     * 	因为在原生的绘制圆弧的API它是根据弧度大小来绘制的，例如如果你想绘制一个30度的圆弧，如果直接传入30是不行的，要传入Math.PI/6
     * 所以在这里个人做了一个优化，直接传入30就通过getAngle方法转换成Math.PI/6，这样就很方便的绘制自己传入的角度大小的圆弧。
     * )
     * endAngle:结束的角度
     * anticlockwise:true为逆时针，false为顺时针
     * isFill:是否是填充，false为绘制边框，true为绘制填充
     * bgColor:扇形的颜色
     * */
    function drawSector(x, y, radius, startAngle, endAngle, anticlockwise, isFill, bgColor) {
    	if (isFill) {
    		cxt.fillStyle = bgColor;
    
    		cxt.beginPath();
    		cxt.moveTo(x, y); //把路径移动到画布中的指定点，不创建线条，注意：绘制扇形唯一与绘制弧的区别在于，紧跟着beginPath()后面调用，首先将路径移动到圆心位置
    		cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), false);
    		cxt.closePath();
    		cxt.fill();
    	} else {
    		cxt.strokeStyle = bgColor;
    
    		cxt.beginPath();
    		cxt.moveTo(x, y);
    		cxt.arc(x, y, radius, getAngle(startAngle), getAngle(endAngle), false);
    		cxt.closePath();
    		cxt.stroke();
    	}
    }
    /**
     * @description 4、绘制线段(主要分为：绘制填充线段和绘制空心线段利用isFill变量来标记）
     * 主要是使用的是canvas原生的API:
     * lineTo(x,y):表示从某点连线到该坐标点
     *moveTo(x,y):表示将路径移动到画布中的该坐标点
     * x:画布中某点的X坐标
     * y:画布中某点的Y坐标
     * 注意：如果开始没有调用moveTo,那么第一个lineTo的功能就相当于一个moveTo
     * 自己封装的API:drawLine(startX,startY,endX,endY,lineWidth,bgcolor)
     * 
     * startX:表示线的起点的X坐标
     * startY:表示起点的Y坐标
     * endX:表示线的终点的X坐标
     * endY:表示线的终点的Y坐标
     * lineWidth:表示线段的宽度
     * bgColor:线的颜色
     * */
    function drawLine(startX, startY, endX, endY, lineWidth, bgColor) {
    	cxt.beginPath();
    	cxt.lineWidth = lineWidth;
    	cxt.fillStyle = bgColor;//经过测试不管是fillStyle还是StrokeStyle都是一样的
    	cxt.moveTo(startX, startY);
    	cxt.lineTo(endX, endY);
    	cxt.closePath();
    	cxt.fill();
    }
    /**
     * @description 5、绘制贝塞尔曲线
     * drawBezierCurve
     * */
    
    //将角度转换成弧度函数，
    function getAngle(arc) {
    	return Math.PI * (arc / 180);
    }

测试的Canvas.js

var mCanvas; //声明Canvas对象;
    var cxt; //声明context对象,该对象拥有丰富的绘图的API
    function initCanvas() { //onload事件加载该方法，当HTML5页面加载的时候就会回调该方法
    	mCanvas = document.getElementById("canvas"); //初始化canvas对象,这里只是获得了Canvas的这个整个的标签---<canvas id="mCanvas" width="800" height="800"></canvas>
    	cxt = mCanvas.getContext("2d"); //初始化cxt对象,然后就去获得canvas的上下文对象cxt,注意传入参数为2d表示绘制2d平面，cxt得到的是一个canvasRenderingContext2D对象，里面封装了大量的canvas绘图API
    	//初始化Canvas
    	initMikyouCanvas(mCanvas,cxt);
    	/**canvas各种绘图的API**/
    	//1、绘制矩形，drawRect(x,y,width,height,isClear,isFill,bgColor);
    	drawRect(100, 100, 200, 200, false, false, "rgba(0,0,255,0.8)");
    	//2、绘制圆弧,drawArc(x,y,radius,startAngle,endAngle,anticlockwise,isOnlyArc,isFill);
    	drawArc(200, 200, 100, 0, 190, false, true, false, "rgba(255,0,255,0.6)");
    	//3、绘制圆形
    	drawArc(420,200,100,0,360,false,false,true,"rgba(255,0,0,0.5)");
    	//4、绘制扇形。drawSector(x, y, radius, startAngle, endAngle, anticlockwise, isFill, bgColor) 
    	drawSector(350, 350, 100, 0, 120, false, true, "rgba(255,0,0,0.5)");
    	//5、绘制线段 drawLine(startX, startY, endX, endY, lineWidth,bgColor)
    	drawLine(300,300,400,400,1,"rgba(255,0,0,0.5)");
    	drawLine(310,350,450,450,1,"rgba(0,0,255,0.5)");
    }

测试的Html5的Html

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    				<script src="js/MikyouCanvas.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/canvas.js" type="text/javascript" charset="utf-8"></script>
    
    	</head>
    	<body οnlοad="initCanvas()" style="text-align: center;">
    		<canvas id="canvas" width="600px" height="600px" style="background: #EEEEFF;"></canvas>
    	</body>
    </html>

测试结果:

![Center][]

[Center]: /images/20220720/003817f644c04182b78f21cf074aa9c5.png