我正在寻找一种方法，允许玩家绘制自己的角色，然后能够在游戏中与他们一起玩。为了使概念变得非常简单，让绘制的玩家只是一个二维形状或一组直线和圆圈，甚至两者的混合。我认为这可以分解为以下步骤:
创建一个空 Canvas 供用户创建他想要的内容:
通过绘画或类似的东西
通过使用允许拖动和塑造形状的特定多边形创建界面；
注意:我能够创建一种在 Canvas 上绘画的方法***，但我没有找到一种方法让用户拖动并创建形状或其他东西那种。我更有可能选择第二个选项，因此我们将非常感谢一些关于如何做到这一点的建议。
window.onload = init;
function init() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var painting = document.getElementById('paint');
var paint_style = getComputedStyle(painting);
canvas.width = "1024"
canvas.height = "1024";
var mouse = {
x: 0,
y: 0
};
canvas.addEventListener('mousemove', function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
ctx.lineWidth = 3;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = '#00CC99';
canvas.addEventListener('mousedown', function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tojo - canvas draw</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<script src="app.js"></script>
<div id="paint"></div>
<canvas id="myCanvas" style="border: 3px solid black;"></canvas>
</body>
</html>不知何故，我只需要从所有 Canvas 中获取用户绘制/形状的创作。应该有一种方法来“包围”用户创建的内容，然后保存它:
通过(可能在绘图的情况下)仅检查白色和玩家颜色之间的颜色比较；
通过某种方式定义不同的点，这些点一起计算用户的创作(无论是绘制的还是形状的)；
注意:在这种情况下我有点迷失了。我几乎不知道这是如何做到的。然而，我听说过 box2d，但我认为它更专注于 C 或类似的东西？它会起作用吗？我该怎么做？
我最终将存储用户创建的内容并准备将其作为 Sprite 图像加载到游戏中。
我希望我能正确地解释这一切。有人可以给我一些这方面的指导吗？仅供引用，我使用 Phaser.js 作为 js 游戏引擎。 (抱歉有任何错误，我对这件事不是很有经验)。
最佳答案
希望这能让您朝着正确的方向前进:
不要绘制到 Canvas ，而是创建一个 Phaser
bitmapData对象并让用户绘制到该对象。请参阅this example显示如何绘制到bitmapData对象。如果您遵循#1，那么您想要的所有数据都将存储在
bitmapData对象中，并且您可以直接从创建一个Sprite您的bitmapData对象，例如:
// Create a bitmapData object for the user to draw on
var bmd = this.game.make.bitmapData(64, 64);
// code to draw on `bmd` goes here
// Create a Sprite based on the bitmapData from above
var userSprite = this.game.add.sprite(0, 0, bmd);
关于javascript - 如何使用玩家自制的 Sprite 作为游戏中的 Sprite ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40324197/