HTML5 Canvas:使用构造函数创建复杂的Canvas形状 [英] HTML5 Canvas: Using constructor functions to create complex Canvas shapes

问题描述

我目前正在处理HTML5 Canvas项目(我对此做了一个单独的问题

I'm currently working on a HTML5 Canvas project (I wrote a separate question about it here). I think one of the solutions to the problems I am facing would be to create a reference for the path (saved as an object), and use the method ispointinpath to check if my mouse position is within the path or not – if its not, it resets the game.

我为创建复杂路径形状的构造函数而费尽心思.这是原始形状的复杂形状:

I took a stab at creating a constructor function for a complex path shape. Here's what the complex shape looks like as raw code:

var canvas = document.querySelector('canvas');

// returning a drawing context to a variable 'c'
// allows you to draw 2d elements
var c = canvas.getContext('2d'); 

  canvas.width = 1000;
  canvas.height = 700;
  canvas.style.width = 1000;
  canvas.style.height = 700;
  
        c.beginPath();
        c.moveTo(350, 650); //start
        c.lineTo(350, 200);
        c.lineTo(900, 200);
        c.lineTo(900, 250);
        c.lineTo(700, 250);
        c.lineTo(600, 250);
        c.lineTo(600, 650);
        c.fillStyle = "#C1EEFF";
        c.fill();

<canvas></canvas>

这是我尝试制作的构造函数:

Here's what it looks like as a constructor function that I tried to make:

var canvas = document.querySelector('canvas');

// returning a drawing context to a variable 'c'
// allows you to draw 2d elements
var c = canvas.getContext('2d');

  canvas.width = 1000;
  canvas.height = 700;
  canvas.style.width = 1000;
  canvas.style.height = 700;
  

var points = [(350, 200), (900, 200), (900, 250), (700, 250), (600, 250), (600, 650)];

function Path(startX, startY, array, color){
      c.beginPath();
      c.moveTo(startX, startY);

      // For however many element pairs in the array, create a lineTo statement
      for(i = 1; i < array.length; i++){
        c.lineTo(array[i][0], array[i][1]);
      }
  
      c.fillStyle = color;
      c.fill();
}

var blue = new Path(350, 200, points, '#C1EEFF');

<canvas></canvas>

它似乎不起作用.有人知道为什么吗?另外，什么是我要尝试的最佳语法?

It doesn't seem to be working. Does anyone know why that is? Also, what would be the best syntax for what I'm trying to do?

推荐答案

您似乎正在尝试使用以下语法访问数组坐标:array [i] [0]，array [i] [1]，但您的数组不是数组数组，它​​是括号数组.我没有时间玩，但尝试将其制成数组数组，以便随后可以访问元素[0]和[1].

You seem to be trying to access your array coordinates using this syntax array[i][0], array[i][1] however your array is NOT an array of arrays it is an array of parenthesis. I don’t have time to play with it but try making it an array of arrays so you can then access element [0] and [1].

[[350，200]，[400，250]]等

[[350, 200], [400, 250]] etc

我正在提供ES6类来创建您的地图.这只是此处提供的其他选项之上的另一个选项.

I am providing an ES6 class to create your maps. This is just another option on top of the others provided here.

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 700;
 
let points = [[300, 400], [400, 400], [400, 350], [400, 250], [700, 250], [700, 150], [750, 150], [750, 50], [775, 50], [775, 175], [725, 175], [725, 400], [500, 400], [500, 500], [500, 650], [300, 650] ];
let points2 = [[750, 50], [775, 50], [775, 100], [750, 100]];

class Map {
  constructor(start_x, start_y, arr, c) {
    this.start_x = start_x;
    this.start_y = start_y;
    this.arr = arr;
    this.color = c;
  }
  draw() {
    c.beginPath();
    c.moveTo(this.start_x, this.start_y); //start
    this.arr.forEach(point => c.lineTo(point[0], point[1]));
    c.fillStyle = this.color;
    c.fill();
    c.closePath(); 
  }
}
let map1 = new Map(300, 650, points, 'blue');
let map1Finish = new Map(750, 100, points2, 'red');
map1.draw();
map1Finish.draw();

这篇关于HTML5 Canvas:使用构造函数创建复杂的Canvas形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！