Canvas HTML
HTML Canvas hoàn hảo cho các ô phân tán
HTML Canvas hoàn hảo cho Biểu đồ đường
HTML Canvas hoàn hảo để kết hợp Scatter và Lines
Điểm phân tán
Mã nguồn
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i]*400/150;
let y = yArray[i]*400/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
Biểu đồ đường
Mã nguồn
const xMax = canvas.height = canvas.width;
const slope = 1.2;
const intercept = 70;
// Plot Line
ctx.beginPath();
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, xMax * slope + intercept);
ctx.stroke();
kết hợp
Mã nguồn
let xMax = canvas.height;
let yMax = canvas.width;
let slope = 1.2;
let intercept = 70;
const xArray = [50,60,70,80,90,100,110,120,130,140,150];
const yArray = [7,8,8,9,9,9,10,11,14,14,15];
// Plot Scatter
ctx.fillStyle = "red";
for (let i = 0; i < xArray.length-1; i++) {
let x = xArray[i] * xMax/150;
let y = yArray[i] * yMax/15;
ctx.beginPath();
ctx.ellipse(x, y, 2, 3, 0, 0, Math.PI * 2);
ctx.fill();
}
// Plot Line
ctx.beginPath();
ctx.moveTo(0, intercept);
ctx.lineTo(xMax, xMax * slope + intercept);
ctx.stroke();
Có Plotter Object thì thật tuyệt khi nghiên cứu Trí tuệ nhân tạo:
- Làm cho AI thú vị hơn
- Làm cho AI trở nên trực quan hơn
- Làm cho AI dễ hiểu hơn
Tạo một đối tượng Plotter
Ví dụ
function XYPlotter(id) {
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext("2d");
this.xMin = 0;
this.yMin = 0;
this.xMax = this.canvas.width;
this.yMax = this.canvas.height;
.
.
Thêm phương pháp vẽ đường
Ví dụ
this.plotLine = function(x0, y0, x, y, color) {
this.ctx.moveTo(x0, y0);
this.ctx.lineTo(x, y);
this.ctx.strokeStyle = color;
this.ctx.stroke();
}
Thêm phương pháp chuyển đổi giá trị XY
Ví dụ
this.transformXY = function() {
this.ctx.transform(1, 0, 0, -1, 0, this.canvas.height)
}
Thêm phương pháp vẽ điểm
Ví dụ
this.plotPoints = function(n, xArr, yArr, color, radius = 3) {
for (let i = 0; i < n; i++) {
this.ctx.fillStyle = color;
this.ctx.beginPath();
this.ctx.ellipse(xArr[i], yArr[i], radius, radius, 0, 0, Math.PI * 2);
this.ctx.fill();
}
}
Vẽ một số điểm ngẫu nhiên
Ví dụ
// Create a Plotter
let myPlotter = new XYPlotter("myCanvas");
// Create random XY Points
numPoints = 500;
const xPoints = Array(numPoints).fill(0).map(function(){return Math.random() * myPlotter.xMax});
const yPoints = Array(numPoints).fill(0).map(function(){return Math.random() * myPlotter.yMax});
// Plot the Points
myPlotter.plotPoints(numPoints, xPoints, yPoints, "blue");
Đặt mã vào thư viện
Mã nguồn
function XYPlotter(id) {
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext("2d");
this.xMin = 0;
this.yMin = 0;
this.xMax = this.canvas.width;
this.yMax = this.canvas.height;
// Plot Line Function
this.plotLine = function(x0, y0, x, y, color) {
this.ctx.moveTo(x0, y0);
this.ctx.lineTo(x, y);
this.ctx.strokeStyle = color;
this.ctx.stroke();
}
// Transform XY Function
this.transformXY = function() {
this.ctx.transform(1, 0, 0, -1, 0, this.canvas.height)
}
// Pot Points Function
this.plotPoints = function(n, xArr, yArr, color, radius = 3) {
for (let i = 0; i < n; i++) {
this.ctx.fillStyle = color;
this.ctx.beginPath();
this.ctx.ellipse(xArr[i], yArr[i], radius, radius, 0, 0, Math.PI * 2);
this.ctx.fill();
}
}
} // End Plotter Object
Lưu nó vào một tệp (như "myplotlib.js")
Sử dụng nó trong các trang HTML của bạn
Bây giờ bạn có thể thêm đối tượng máy vẽ vào các trang HTML của mình:
