HTML5 Canvas：使用构造函数创建复杂的 Canvas 形状

Question

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?

Answer 1

It would be better if you use an object with position x, y

 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 = [ { x: 350, y: 200 }, { x: 900, y: 200 }, { x: 900, y: 250 }, { x: 700, y: 250 }, { x: 600, y: 250 }, { x: 600, y: 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 (var i = 1; i < array.length; i++) { c.lineTo(array[i].x, array[i].y); } c.fillStyle = color; c.fill(); } var blue = new Path(350, 200, points, "#C1EEFF");

 <canvas></canvas>

Answer 2

First issue is your points array:
var points = [(350, 200), (900, 200),...
that is not a correct bi-dimensional array, maybe you meant:
var points = [[350, 200], [900, 200],...

also in your code Path is a function not a class, not sure why you doing new Path(...) maybe you got that mixed with new Path2D() but that is completely different...
Look at the parameters for isPointInPath:
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInPath#syntax

Here is a working example

 var canvas = document.querySelector('canvas'); var c = canvas.getContext('2d'); canvas.width = 1000; canvas.height = 700; // Function to generate a Path2D object function Path(array) { let path = new Path2D(); path.moveTo(array[0][0], array[0][1]); for (i = 1; i < array.length; i++) { path.lineTo(array[i][0], array[i][1]); } path.lineTo(array[0][0], array[0][1]); return path } //Create the paths var big = [[350,200], [900,200], [900,250], [700,250], [600,250], [600,650], [350,650]]; var blue = Path(big); var triangle = [[25,10], [70,10], [90,85]]; var red = Path(triangle); // Draw all the paths c.beginPath() c.fillStyle = "blue"; c.fill(blue); c.beginPath() c.fillStyle = "red"; c.fill(red); // use isPointInPath console.log(c.isPointInPath(blue, 10, 10)) console.log(c.isPointInPath(blue, 351,201))

 <canvas></canvas>

---

Now on the now closed question my suggestion to using isPointInPath is to improve scalability, you had a bunch of hard coded if statement, that approach for more complex polygons just would not do... BUT you still have the problem in your game how to handle the transition between levels, that was the root problem on that question.

Answer 3

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]] etc

EDIT: 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();