canvas 常用的直线、矩形、圆形使用

1、新建一个html文件，写入一个canvas 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		#myCanvas {
			border: 1px solid #000000;
		}
	</style>
	<body>
		<canvas id="myCanvas" width="500" height="500">浏览器不支持Canvas</canvas>
	</body>
</html>

2、封装一个直线的调用的方法，方法里面都有对应的注释和效果图。

　　　　 var car = document.getElementById("myCanvas");

	//直线调用  --得到的效果图如下
	straightLine(0, 0, 5, 250, 250, "yellow");
	//常用的直线写法    
	function straightLine(startX, startY, lineW, endX, endY, color) {
		//  必须判断是否存在该方法，即判断浏览器是否支持canvas
		if (car.getContext) {

			var ctx = car.getContext("2d");
			//开始
			ctx.beginPath();

			//设置线的宽度
			ctx.lineWidth = lineW;

			// 起始点 x,y
			ctx.moveTo(startX, startY);

			//终点 x,y
			ctx.lineTo(endX, endY);

			//自定义颜色
			ctx.strokeStyle = color;
			//没写默认颜色为黑色
			ctx.stroke();

			//结束（不关闭的话会和开始的地方直接相接）
			ctx.closePath();
		}
	}

　

3、封装一个矩形的调用方法，方法里面都有对应的注释和效果图。

        var car = document.getElementById("myCanvas");
        　//矩形调用
	　rectangle(200, 200, 100, 100, 0, "yellow", 5);
	　//常用矩形的写法
	　function rectangle(startX, startY, Width, Height, reatState, color, lineW) {
		var ctx = car.getContext("2d");
		//开始
		ctx.beginPath();

		//自定义颜色
		ctx.strokeStyle = color;

		//设置线的宽度
		ctx.lineWidth = lineW;

		//根据状态值判断是否需要填充矩形（0：不需要，1：需要）
		if (reatState == 0) {
			//参数作用：x的起始坐标，y的起始坐标，x的宽度值，y的高度值
			// ctx.rect(startX,startY,Width,Height);

			//参数作用：x的起始坐标，y的起始坐标，x的宽度值，y的高度值
			ctx.strokeRect(startX, startY, Width, Height);
		} else if (reatState == 1) {

			//设置填充的颜色 (注意：填充的颜色必须在fillReact方法之前,不然不生效)
			ctx.fillStyle = "green";

			//被填充的矩形，参数作用：x的起始坐标，y的起始坐标，x的宽度值，y的高度值
			ctx.fillRect(startX, startY, Width, Height);

			//在某些情况下可能需要把填充的一部分内容清除掉，这个时候可以用clearRect()
			//对应的参数作用依然相同：x的起始坐标，y的起始坐标，要清除的宽度值，要清除的高度值
			ctx.clearRect(220, 220, 50, 50);
		}

		ctx.stroke();
		//结束
		ctx.closePath();
	}

　　

 

4、封装一个圆形的调用方法，方法里面都有对应的注释和效果图。

        var car = document.getElementById("myCanvas");
        //圆形调用
	circular(250,250,50,0,2,false);
	//常用圆形的写法
	function circular(x,y,r,startRote,endRote,state){
		var ctx = car.getContext("2d");
		ctx.beginPath();
		
	
		//一个圆的实现
		//参数：圆的中心点X坐标，圆的中心点Y坐标，圆的半径，圆的起始角，圆的结束角，方向（false顺时针，true逆时针）
		ctx.arc(x,y,r,startRote,Math.PI*endRote,state);
		
		//有时候我们不需要一个完整的圆，需要半圆或者四分之一的圆，而且还是可以指定位置的时候
		
		//得到一个从0度到180度的半圆
		// ctx.arc(250, 250, 50,0, Math.PI * 1, false);
		
		//得到一个从0度到90度的四分之一圆
		// ctx.arc(250, 250, 100, 0, 0.5 * Math.PI, false);
		
		//没写默认颜色为黑色
		ctx.stroke();
		ctx.closePath();
	}

　　

 

 

 

posted @ 2021-07-06 16:16  凌晨的粥  阅读(191)  评论(0)    收藏  举报