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

时间：2015-11-30 01:11:18

标签： html5 html5-canvas coordinates shapes

EDIT :: 我已经按照我的意愿将各个点转换为（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;

1 个答案:

答案 0 :(得分：0)

您可以翻译整个画布而不是修改代码。 让我们假设bolt是一个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添加到每个点。

相关问题
最新问题