You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
// https://stackoverflow.com/a/29676404
|
|
|
|
context = document.getElementById("canvas").getContext("2d");
|
|
let defaultFillStyle = '#000';
|
|
let shapeDebug = true;
|
|
let shapeDebugColour = '#FF00FF';
|
|
|
|
class Shape extends Path2D{
|
|
constructor(params){
|
|
super();
|
|
this.shape = params.shape || 'rectangle';
|
|
this.name = params.name;
|
|
this.x = params.x || 0;
|
|
this.y = params.y || 0;
|
|
this.width = params.width || 0;
|
|
this.height = params.height || 0;
|
|
this.fillStyle = params.fillStyle || "#FFFFFF";
|
|
this.strokeStyle = params.strokeStyle || false;
|
|
this.lineWidth = params.lineWidth || 0;
|
|
}
|
|
draw(){
|
|
//console.log('Draw Shape: '+this.name);
|
|
//console.log('X: '+this.x+' Y: '+this.y);
|
|
//console.log('W: '+this.width+' H: '+this.height);
|
|
//console.log('');
|
|
|
|
if (this.fillStyle) {
|
|
context.fillStyle = this.fillStyle;
|
|
if(this.shape == 'circle'){
|
|
// X,Y,Radius, start, end
|
|
context.beginPath();
|
|
context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
|
|
context.fill();
|
|
context.closePath();
|
|
}else if(this.shape == 'semi'){
|
|
context.beginPath();
|
|
context.arc(this.x, this.y, this.width/2, Math.PI, 0);
|
|
context.fill();
|
|
context.closePath();
|
|
}else if (this.shape == 'rectangle'){
|
|
context.fillRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
context.fillStyle = defaultFillStyle; // Reset back to default
|
|
}
|
|
if (this.strokeStyle && this.lineWidth || shapeDebug) {
|
|
context.strokeStyle = this.strokeStyle;
|
|
context.lineWidth = this.lineWidth;
|
|
context.lineWidth = 2;
|
|
|
|
if(!this.strokeStyle && shapeDebug){
|
|
context.strokeStyle = shapeDebugColour;
|
|
}
|
|
if(this.shape == 'circle'){
|
|
// X,Y,Radius, start, end
|
|
context.beginPath();
|
|
context.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI);
|
|
context.stroke();
|
|
context.closePath();
|
|
}else if(this.shape == 'semi'){
|
|
context.beginPath();
|
|
context.arc(this.x, this.y, this.width/2, Math.PI, 0);
|
|
context.stroke();
|
|
context.closePath();
|
|
}else if (this.shape == 'rectangle'){
|
|
context.strokeRect(this.x, this.y, this.width, this.height);
|
|
}
|
|
context.strokeStyle = defaultFillStyle;
|
|
}
|
|
}
|
|
}
|
|
|