Html 将多（移动到）命令转换为简单（x，y）

编辑：： 我已经将各种点转换为（x，y）正如我所希望的那样。我将名称从bolt更改为drop，因为我已经有了一个名为drop的既定形状。但是，它不会在画布上绘制。我用一个叶子形状替换了坐标，我也画了一个叶子形状，并转换成（x，y），效果很好。我不知道我的螺栓形状有什么不同

context.beginPath();
context.moveTo(drop.x,drop.y);
context.moveTo(drop.x+140,drop.y+28);
context.lineTo(drop.x+24,drop.y+28);
context.moveTo(drop.x+24,drop.y+28);
context.lineTo(drop.x-2,drop.y+25);
context.moveTo(drop.x-2,drop.y+25);
context.lineTo(drop.x+17,drop.y+25);
context.moveTo(drop.x+17,drop.y+25);
context.lineTo(drop.x-18,drop.y+53);
context.moveTo(drop.x-18,drop.y+53);
context.lineTo(drop.x-3,drop.y+54);
context.moveTo(drop.x-3,drop.y+54);
context.lineTo(drop.x-47,drop.y+77);
context.moveTo(drop.x-47,drop.y+77);
context.lineTo(drop.x-31,drop.y+59);
context.moveTo(drop.x-31,drop.y+59);
context.lineTo(drop.x-40,drop.y+59);
context.moveTo(drop.x-40,drop.y+59);
context.lineTo(drop.x-14,drop.y+33);
context.moveTo(drop.x-14,drop.y+33);
context.lineTo(drop.x-30,drop.y+32);
context.moveTo(drop.x-30,drop.y+32);
context.lineTo(drop.x+140,drop.y+28);
context.closePath();
context.fillStyle = 'yellow';
context.fill();

我不确定我想做的是什么。这是我的教授为云计算提供的代码

function drawCloud(cloud) {
     context.beginPath();
     context.moveTo(cloud.x, cloud.y);
     context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
     context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
     context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
     context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
     context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
     context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);

     // complete custom shape
     context.closePath();
     context.lineWidth = 5;
     context.strokeStyle = cloud.color;
     context.stroke();
  }

我找到了形状生成器并制作了这个形状

function drawBolt(bolt){
    context.beginPath()
    context.moveTo(140,28);
    context.lineTo(164,28);
    context.moveTo(164,28);
    context.lineTo(138,53);
    context.moveTo(138,53);
    context.lineTo(157,53);
    context.moveTo(157,53);
    context.lineTo(122,81);
    context.moveTo(122,81);
    context.lineTo(137,82);
    context.moveTo(137,82);
    context.lineTo(93,105);
    context.moveTo(93,105);
    context.lineTo(109,87);
    context.moveTo(109,87);
    context.lineTo(100,87);
    context.moveTo(100,87);
    context.moveTo(126,61);
    context.lineTo(110,60);
    context.moveTo(110,60);
    context.lineTo(140,28);
    context.closePath();
    context.fill();
};

她告诉我，我必须把这些点改成x，y，我想这涉及到数学？有没有简单的方法

那么她有多（cloud.x-40）我想我需要bolt.x（？）

好的起点在哪里

  var canvas;
  var context;
  var shapes = []
  var timer;
  var timerTwo;
  var possibleShapes = ['drop','triangle','square','circle','cloud'];
  function Shape(x, y, color) {
    this.x = x;
    this.y = y;
    this.size = Math.random()*20+5;
    this.dx = Math.random()*4-2;
    this.dy = Math.random()*4-2;
    this.color = color;
    this.shape = possibleShapes[Math.floor(Math.random()*possibleShapes.length)];
  }
  function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");

    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);
    resizeCanvas();
    canvas.onclick = function(event) {
        handleClick(event.clientX, event.clientY);
    };
    timer = setInterval(resizeCanvas, 20);
    timerTwo = setInterval(newShape, 200);
  }
  function newShape() {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
    var color = colors[Math.floor(Math.random()*colors.length)];
    shapes.push(new Shape(x, y, color));

  }
  function drawCircle(circle) {
     context.beginPath();
     context.arc(circle.x, circle.y, circle.size, 0, degreesToRadians(360), true);
     context.fillStyle = circle.color;
     context.fill();
  }
  function drawSquare(square) {
    context.beginPath();
    context.fillStyle = square.color;
    context.fillRect(square.x, square.y, square.size, square.size);
  }  
  function drawTriangle(triangle) {
    context.beginPath();
    context.fillStyle = triangle.color;
    context.moveTo(triangle.x+triangle.size,triangle.y);
    context.lineTo(triangle.x,triangle.y);
    context.lineTo(triangle.x,triangle.y+triangle.size);
    context.closePath();
    context.fill();
  }

  function drawCloud(cloud) {
     context.beginPath();
     context.moveTo(cloud.x, cloud.y);
     context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
      context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
      context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
      context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
      context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
      context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = cloud.color;
      context.stroke();
  }

  function drawDrop(drop) {
        context.beginPath();
        context.lineJoin = 'miter';
        context.moveTo(drop.x, drop.y);
        context.arc(drop.x, drop.y+68, 34.5, 5.75, 3.66, false);
        context.quadraticCurveTo(drop.x-3.5, drop.y+15, drop.x, drop.y);
        context.closePath();
        context.lineWidth = 2;
        context.fillStyle = drop.color;
        context.fill();
  }
  function drawText() {
    context.fillStyle = 'white';
    context.font = 'bold 2em sans-serif';
    context.textAlign = 'right';
    context.fillText('Art?', canvas.width-40, canvas.height-40);
}
  function resizeCanvas() {
    canvas.width = window.innerWidth-20;
    canvas.height = window.innerHeight-20;
    fillBackgroundColor();
    for (var i=0; i<shapes.length; i++) {
        if (shapes[i].shape == 'square') {
            drawSquare(shapes[i]);
        } else if (shapes[i].shape == 'circle') {
            drawCircle(shapes[i]);
        } else if (shapes[i].shape == 'triangle') {
            drawTriangle(shapes[i]);
        } else if (shapes[i].shape == 'drop') {
            drawDrop(shapes[i]);
        } else if (shapes[i].shape == 'cloud') {
            drawCloud(shapes[i]);
        }
        if (shapes[i].x + shapes[i].dx > canvas.width || shapes[i].x + shapes[i].dx < 0)
            shapes[i].dx = -shapes[i].dx;
        if (shapes[i].y + shapes[i].dy > canvas.height || shapes[i].y + shapes[i].dy < 0)
            shapes[i].dy = -shapes[i].dy;
            shapes[i].x += shapes[i].dx;
            shapes[i].y += shapes[i].dy;
    }
    drawText();      
  }
  function fillBackgroundColor() {
     //var colors = ["white", "yellow", "blue", "red"];
     //var bgColor = colors[Math.floor(Math.random() * colors.length)];
     context.fillStyle = 'black';
     context.fillRect(0, 0, canvas.width, canvas.height);
}
function degreesToRadians(degrees) {
    //converts from degrees to radians and returns
    return (degrees * Math.PI)/180;
}
window.onload = init;

var画布；
var语境；
变量形状=[]
无功定时器；
var-timerTwo；
var-possibleShapes=['drop'，'triangle'，'square'，'circle'，'cloud']；
函数形状（x、y、颜色）{
这个.x=x；
这个。y=y；
this.size=Math.random（）*20+5；
this.dx=Math.random（）*4-2；
this.dy=Math.random（）*4-2；
这个颜色=颜色；
this.shape=possibleShapes[Math.floor（Math.random（）*possibleShapes.length）]；
}
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（“2d”）；
addEventListener（'resize'，resizeCanvas，false）；
window.addEventListener（'orientationchange'，resizeCanvas，false）；
调整画布的大小（）；
canvas.onclick=函数（事件）{
handleClick（event.clientX，event.clientY）；
};
定时器=设置间隔（resizeCanvas，20）；
timerTwo=设置间隔（newShape，200）；
}
函数newShape（）{
var x=Math.random（）*canvas.width；
var y=Math.random（）*canvas.height；
变量颜色=[“红色”、“绿色”、“蓝色”、“橙色”、“紫色”、“黄色”]；
var color=colors[Math.floor（Math.random（）*colors.length）]；
推送（新的形状（x，y，颜色））；
}
函数drawCircle（圆）{
context.beginPath（）；
弧（圆.x，圆.y，圆.size，0，度弧度（360），真）；
context.fillStyle=circle.color；
context.fill（）；
}
函数drawSquare（square）{
context.beginPath（）；
context.fillStyle=square.color；
context.fillRect（square.x，square.y，square.size，square.size）；
}  
函数drawTriangle（三角形）{
context.beginPath（）；
context.fillStyle=triangle.color；
moveTo（triangle.x+triangle.size，triangle.y）；
lineTo（triangle.x，triangle.y）；
lineTo（triangle.x，triangle.y+triangle.size）；
closePath（）；
context.fill（）；
}
函数drawCloud（cloud）{
context.beginPath（）；
moveTo（cloud.x，cloud.y）；
context.bezierCurveTo（cloud.x-40，cloud.y+20，cloud.x-40，cloud.y+70，cloud.x+60，cloud.y+70）；
（cloud.x+80，cloud.y+100，cloud.x+170，cloud.y+100，cloud.x+170，cloud.y+70）；
bezierCurveTo（cloud.x+250，cloud.y+70，cloud.x+250，cloud.y+40，cloud.x+210，cloud.y+20）；
背景：bezierCurveTo（cloud.x+260，cloud.y-40，cloud.x+200，cloud.y+50，cloud.x+170，cloud.y-30）；
bezierCurveTo（cloud.x+150，cloud.y-75，cloud.x+80，cloud.y-60，cloud.x+80，cloud.y-30）；
context.bezierCurveTo（cloud.x+30，cloud.y-75，cloud.x-20，cloud.y-60，cloud.x，cloud.y）；
//完全自定义形状
closePath（）；
context.lineWidth=5；
context.strokeStyle=cloud.color；
stroke（）；
}
函数drawDrop（drop）{
context.beginPath（）；
context.lineJoin='miter'；
moveTo（drop.x，drop.y）；
弧（下降x，下降y+68,34.5,5.75,3.66，假）；
二次曲线（下降x-3.5，下降y+15，下降x，下降y）；
closePath（）；
context.lineWidth=2；
context.fillStyle=drop.color；
context.fill（）；
}
函数drawText（）{
context.fillStyle='white'；
context.font='bold 2em sans serif'；
context.textAlign='right'；
context.fillText（'Art？'，canvas.width-40，canvas.height-40）；
}
函数resizeCanvas（）{
canvas.width=window.innerWidth-20；
canvas.height=window.innerHeight-20；
fillBackgroundColor（）；
对于（var i=0；i canvas.width | | shapes[i].x+shapes[i].dx<0）
形状[i].dx=-shapes[i].dx；
if（shapes[i].y+shapes[i].dy>canvas.height | | shapes[i].y+shapes[i].dy<0）
shapes[i].dy=-shapes[i].dy；
形状[i].x+=形状[i].dx；
形状[i].y+=shapes[i].dy；
}
drawText（）；
}
函数fillBackgroundColor（）{
//变量颜色=[“白色”、“黄色”、“蓝色”、“红色”]；
//var bgColor=colors[Math.floor（Math.random（）*colors.length）]；
context.fillStyle='black'；
context.fillRect（0,0，canvas.width，canvas.height）；
}
功能度弧度（度）{
//从度转换为弧度并返回
返回值（度*数学PI）/180；
}
window.onload=init；

您可以翻译整个画布，而无需修改代码。 假设螺栓是一个以x和y为属性的对象

    function drawBolt(bolt){
    context.save();
    context.translate(bolt.x, bolt.y);
    context.beginPath()
    context.moveTo(140,28);
    context.lineTo(164,28);
    context.moveTo(164,28);
    context.lineTo(138,53);
    context.moveTo(138,53);
    context.lineTo(157,53);
    context.moveTo(157,53);
    context.lineTo(122,81);
    context.moveTo(122,81);
    context.lineTo(137,82);
    context.moveTo(137,82);
    context.lineTo(93,105);
    context.moveTo(93,105);
    context.lineTo(109,87);
    context.moveTo(109,87);
    context.lineTo(100,87);
    context.moveTo(100,87);
    context.moveTo(126,61);
    context.lineTo(110,60);
    context.moveTo(110,60);
    context.lineTo(140,28);
    context.closePath();
    context.fill();
    context.restore();
};

---

这相当于绘制螺栓，修改所有点，将x和y添加到每个点。

您可以翻译整个画布，而不是修改代码。 假设螺栓是一个以x和y为属性的对象

    function drawBolt(bolt){
    context.save();
    context.translate(bolt.x, bolt.y);
    context.beginPath()
    context.moveTo(140,28);
    context.lineTo(164,28);
    context.moveTo(164,28);
    context.lineTo(138,53);
    context.moveTo(138,53);
    context.lineTo(157,53);
    context.moveTo(157,53);
    context.lineTo(122,81);
    context.moveTo(122,81);
    context.lineTo(137,82);
    context.moveTo(137,82);
    context.lineTo(93,105);
    context.moveTo(93,105);
    context.lineTo(109,87);
    context.moveTo(109,87);
    context.lineTo(100,87);
    context.moveTo(100,87);
    context.moveTo(126,61);
    context.lineTo(110,60);
    context.moveTo(110,60);
    context.lineTo(140,28);
    context.closePath();
    context.fill();
    context.restore();
};

---

这相当于绘制螺栓修改所有点，将x和y添加到每个点。

解决方案的问题在于，它是硬编码的，因此是静态的：它将始终位于相同的位置，如果需要移动云，这将是一个难题。你教授告诉你的是使用一个变量来保持你形状的x，y坐标，这样它就可以被改变。因此，如果您的形状是为x=0和y=0制作的，您只需执行

context.moveTo（x+140，y+28）等等。我相信我的困惑来自于她编辑云的解决方案？她“解除”了这个密码