JS project start
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Shapes</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// set the size of the canvas
|
||||
// we'll use block scope variable declarations throughout
|
||||
const maxWidth = 500;
|
||||
const maxHeight = 500;
|
||||
|
||||
// declare the base class (most generic class)
|
||||
// Shape has a string "id", a fill style string
|
||||
// and x, y coordinates
|
||||
class Shape {
|
||||
//constructor declares property set
|
||||
constructor(id, fillStyle, x, y) {
|
||||
this._id = id;
|
||||
this._fillStyle = fillStyle;
|
||||
this._x = x;
|
||||
this._y = y;
|
||||
}
|
||||
// create native getters for the x, y coordinates
|
||||
// and the fill style
|
||||
get id(){
|
||||
return this._id;
|
||||
}
|
||||
get fillStyle(){
|
||||
return this._fillStyle;
|
||||
}
|
||||
get x(){
|
||||
return this._x;
|
||||
}
|
||||
get y() {
|
||||
return this._y;
|
||||
}
|
||||
get style() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// declare the first extended class
|
||||
// Rectangle is a specific kind of Shape with width and height
|
||||
class Rectangle extends Shape {
|
||||
// constructor declares all properties, including the
|
||||
// super class (Shape) properties
|
||||
constructor (id, fillStyle, x, y, width, height) {
|
||||
super(id, fillStyle, x, y);
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
|
||||
}
|
||||
// create native getters and setters for the
|
||||
// width and height
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
// log the properties for this shape (rectangle)
|
||||
render(){
|
||||
console.log(super.id);
|
||||
console.log(super.fillStyle, super.x, super.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
// declare the second extended class
|
||||
// Circle is a specific kind of Shape with x, y centre point and radius
|
||||
class Circle extends Shape {
|
||||
constructor (id, fillStyle, x, y, radius) {
|
||||
super(id, fillStyle, x, y)
|
||||
this._radius = radius;
|
||||
}
|
||||
// native setter and getter for the radius property
|
||||
set radius(radius){
|
||||
this._radius = radius;
|
||||
}
|
||||
|
||||
get radius(){
|
||||
return this._radius;
|
||||
}
|
||||
// define the render method specifically for this shape (circle)
|
||||
render(){
|
||||
console.log(super.id);
|
||||
console.log(super.fillStyle, super.x, super.y, this.radius);
|
||||
}
|
||||
}
|
||||
|
||||
function startMeUp() {
|
||||
// create a rectangle object
|
||||
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
|
||||
r1.render();
|
||||
|
||||
// change the width and height and re-render
|
||||
r1.width = 100;
|
||||
r1.height = 100;
|
||||
r1.render();
|
||||
|
||||
// create a circle
|
||||
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
|
||||
c1.render();
|
||||
|
||||
// change the radius and re-render
|
||||
c1.radius = 100;
|
||||
c1.render();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,128 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 2d Shapes and Drawing</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// set the size of the canvas
|
||||
// we'll use block scope variable declarations throughout
|
||||
const maxWidth = 500;
|
||||
const maxHeight = 500;
|
||||
|
||||
// declare the base class (most generic class)
|
||||
// Shape has a string "id", a fill style string
|
||||
// and x, y coordinates
|
||||
class Shape {
|
||||
//constructor declares property set
|
||||
constructor(id, fillStyle, x, y) {
|
||||
this._id = id;
|
||||
this._fillStyle = fillStyle;
|
||||
this._x = x;
|
||||
this._y = y;
|
||||
}
|
||||
// create native getters for the x, y coordinates
|
||||
// and the fill style
|
||||
get id(){
|
||||
return this._id;
|
||||
}
|
||||
get fillStyle(){
|
||||
return this._fillStyle;
|
||||
}
|
||||
get x(){
|
||||
return this._x;
|
||||
}
|
||||
get y() {
|
||||
return this._y;
|
||||
}
|
||||
get style() {
|
||||
return this._fillStyle;
|
||||
}
|
||||
}
|
||||
|
||||
// declare the first extended class
|
||||
// Rectangle is a specific kind of Shape with width and height
|
||||
class Rectangle extends Shape {
|
||||
// constructor declares all properties, including the
|
||||
// super class (Shape) properties
|
||||
constructor (id, fillStyle, x, y, width, height) {
|
||||
super(id, fillStyle, x, y);
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
|
||||
}
|
||||
// create native getters and setters for the
|
||||
// width and height
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
// define the render method specifically for this shape (rectangle)
|
||||
render(context){
|
||||
context.fillStyle = super.style;
|
||||
context.fillRect(super.x, super.y, this.width, this.height);
|
||||
}
|
||||
}
|
||||
// declare the second extended class
|
||||
// Circle is a specific kind of Shape with x, y centre point and radius
|
||||
class Circle extends Shape {
|
||||
constructor (id, fillStyle, x, y, radius) {
|
||||
super(id, fillStyle, x, y)
|
||||
this._radius = radius;
|
||||
}
|
||||
// native setter and getter for the radius property
|
||||
set radius(radius){
|
||||
this._radius = radius;
|
||||
}
|
||||
|
||||
get radius(){
|
||||
return this._radius;
|
||||
}
|
||||
// define the render method specifically for this shape (circle)
|
||||
render(context){
|
||||
context.fillStyle = super.style;
|
||||
context.arc(super.x, super.y, this.radius, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
}
|
||||
}
|
||||
|
||||
function startMeUp() {
|
||||
let drawing = document.getElementById("drawing");
|
||||
|
||||
// make sure <canvas> is completely supported
|
||||
// if drawing.getContext returns true, it's supported
|
||||
if (drawing.getContext){
|
||||
let context = drawing.getContext("2d");
|
||||
|
||||
// create a new rectangle
|
||||
let r1 = new Rectangle("r1", "#ff0000", 10, 10, 50, 50);
|
||||
r1.render(context);
|
||||
|
||||
// change the width and height and re-render
|
||||
r1.width = 100;
|
||||
r1.height = 100;
|
||||
r1.render(context);
|
||||
|
||||
// create a new circle
|
||||
let c1 = new Circle("c1", "rgba(0,0,255,0.5)", 200, 200, 50);
|
||||
c1.render(context);
|
||||
|
||||
// change the radius and re-render
|
||||
c1.radius = 100;
|
||||
c1.render(context);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="startMeUp();">
|
||||
<canvas id="drawing" width="500" height="500"></canvas>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Rectangle Class</title>
|
||||
<script language="JavaScript" type="text/JavaScript">
|
||||
// declare a Rectangle class
|
||||
class Rectangle {
|
||||
constructor (width, height) {
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
}
|
||||
// create native getters and setters
|
||||
set width(width){
|
||||
this._width = width;
|
||||
}
|
||||
|
||||
get width(){
|
||||
return this._width;
|
||||
}
|
||||
|
||||
set height(height){
|
||||
this._height = height;
|
||||
}
|
||||
|
||||
get height(){
|
||||
return this._height;
|
||||
}
|
||||
|
||||
get area(){
|
||||
return this._width * this._height;
|
||||
}
|
||||
|
||||
// create a static method that we can call without
|
||||
// first creating an object
|
||||
static defaultRectangle () {
|
||||
return new Rectangle(100, 100);
|
||||
}
|
||||
}
|
||||
var r = new Rectangle(50, 20)
|
||||
|
||||
r.width = 60;
|
||||
|
||||
if (r.area === 1000) {
|
||||
console.log(true);
|
||||
}
|
||||
else {
|
||||
console.log(false);
|
||||
}
|
||||
|
||||
// call the static method directly
|
||||
var defaultRect = Rectangle.defaultRectangle();
|
||||
console.log(defaultRect.area);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user