垂直倾斜画布上的简单矩形

Question

目前正在编写一款经典游戏。我将从矩形更改透视。

我如何创建这样的垂直倾斜？

例如，目前只使用简单的矩形，请看这个小提琴：

＆＃13;

＆＃13;

var _canvas = document.getElementById('game');
var _context = _canvas.getContext('2d');
_canvas.width	= 800;
_canvas.height	= 500;

function getWidth() {
	return _canvas.width;
}

function getHeight() {
	return _canvas.height;
}

function drawGameField() {
		_context.save();
		
		var width			= 578;
		var height			= 538;
		var background		= _context.createLinearGradient(0, 0, 0, 170);
		
		background.addColorStop(0, '#FFFF80');
		background.addColorStop(1, '#FDFDAD');
		
		// Background
		_context.fillStyle	= background;
		_context.fillRect((getWidth() / 2) - (width / 2), (getHeight() / 2) - (height / 2), width, height);
		
		// Outer Border
		_context.beginPath();
		_context.lineWidth		= '6';
		_context.strokeStyle	= '#FF0000';
		_context.rect((getWidth() / 2) - (width / 2), (getHeight() / 2) - (height / 2), width, height); 
		_context.stroke();
		
		// Inner Border
		_context.beginPath();
		width	-= 25;
		height	-= 25;
		_context.lineWidth		= '2';
		_context.strokeStyle	= '#000000';
		_context.rect((getWidth() / 2) - (width / 2), (getHeight() / 2) - (height / 2), width, height); 
		_context.stroke();
		
		// Fields
		var fields = [
			[ 230, 39 ],
			[ 272, 39 ],
			[ 315, 39 ],
			[ 315, 81 ],
			[ 315, 124 ],
			[ 315, 167 ],
			[ 315, 210 ],
			[ 358, 210 ],
			[ 401, 210 ],
			[ 444, 210 ],
			[ 486, 210 ],
			[ 486, 252 ],
			[ 486, 295 ],
			[ 444, 295 ],
			[ 401, 295 ],
			[ 358, 295 ],
			[ 315, 295 ],
			[ 315, 338 ],
			[ 315, 381 ],
			[ 315, 424 ],
			[ 315, 466 ],
			[ 272, 466 ],
			[ 230, 466 ],
			[ 230, 424 ],
			[ 230, 381 ],
			[ 230, 338 ],
			[ 230, 295 ],
			[ 187, 295 ],
			[ 144, 295 ],
			[ 101, 295 ],
			[ 59, 295 ],
			[ 59, 252 ],
			[ 59, 210 ],
			[ 101, 210 ],
			[ 144, 210 ],
			[ 187, 210 ],
			[ 230, 210 ],
			[ 230, 167 ],
			[ 230, 124 ],
			[ 230, 81 ]
		];
		for(var index in fields) {
			var field = fields[index];
			drawField(field[0] + 130, field[1] + 10);
		}
}

function drawField(x, y) {
		_context.fillStyle		= '#FFFFFF';
		_context.beginPath();
		_context.arc(x, y, 16, 0, 2 * Math.PI);
		_context.lineWidth		= 4;
		_context.strokeStyle	= '#000000';
		_context.stroke();
		_context.closePath();
		_context.fill();	
}

drawGameField();

＆＃13;

canvas {
  width: 800px;
  height: 500px;
  background: #DDDDDD;
}

＆＃13;

<canvas id="game" width="800" height="500"></canvas>

＆＃13;

＆＃13;

＆＃13;

Example