пятница, 25 декабря 2020 г.
четверг, 24 декабря 2020 г.
Canvas, Examples
1. Canvas
https://www.youtube.com/watch?v=ib9y6uJr6PQ
D:\VC\TypeScript\Train\canvas\rxjs-youtube-course
npm run start
2.Axis
file:///D:/VC/TypeScript/Canvas/Axis/graph.html
graph.html + index.js
3. DrawGrid
ile:///D:/VC/TypeScript/Canvas/Axis/graph.html
graph.html + drawgrid.js
среда, 23 декабря 2020 г.
среда, 16 декабря 2020 г.
воскресенье, 13 декабря 2020 г.
Canvas, Prototype, Examples
Green Lesson11
TP = {};
TP.init = function(){
var self = this;
this.canvas = document.getElementById('canvas');
this.ctx = canvas.getContext('2d');
this.width = canvas.width;
this.height = canvas.height;
this.shapeList = [];
this.animId = null;
canvas.onclick = function(e){
var square = new TP.Square(
e.layerX, e.layerY, 40, self.ctx
);
self.shapeList.push(square);
};
this.animate();
}
TP.animate = function(){
var self = this;
this.render();
this.animId = requestAnimationFrame(function(){
self.animate();
});
}
TP.play = function(){
var self = this;
if (!this.animId) {
this.animId = requestAnimationFrame(function(){
self.animate();
});
}
}
TP.pause = function(){
cancelAnimationFrame(this.animId);
this.animId = null;
}
TP.render = function(){
this.ctx.clearRect(0, 0, this.width, this.height);
for(var index in this.shapeList){
this.shapeList[index].animate();
}
}
TP.Square = function(x, y, size, ctx){
this.x = x;
this.y = y;
this.size = size;
this.ctx = ctx;
this.color = '#'+Math.floor(
Math.random()*16777215
).toString(16);
}
TP.Square.prototype.render = function(){
this.ctx.beginPath();
this.ctx.rect(
this.x, this.y, this.size, this.size
);
this.ctx.fillStyle = this.color;
this.ctx.fill();
this.ctx.closePath();
}
TP.Square.prototype.move = function(newX, newY){
this.x = newX;
this.y = newY;
}
TP.Square.prototype.animate = function(){
this.move(this.x - 1, this.y - 1);
this.render();
}