此ISS作为JS插件数据库

[jeremyjia]

//加载任意路径的合法插件, ref: https://www.codenong.com/cs106081348 //支持URL方式及源代码方式 var selObj = document.getElementById("selPlugIns");

//读取数据的回调函数 function _CBackComments(o) { for(i in o){ var body = o[i].body; var str = JSON.stringify(body); var str = str.substring(1, str.length-1); //去掉两端的引号 if( str.startsWith("//code") == true ){ var s = body; var i = s.indexOf("name"); if(i !=-1){ s = s.substring(i+5); s = s.substring(0, s.indexOf("\n")); } var link = body; var optObj= new Option(s, link); optObj.style="color:#FF00FF"; //源码方式用紫色显示 selObj .add(optObj); }else{ var obj = JSON.parse(body); var name=obj.name; var link = obj.link; var optObj= new Option(name,link); optObj.style="color:green"; selObj .add(optObj); }
}//end for } var _src = "https://api.github.com/repos/jeremyjia/Games/issues/901/comments"; w3.getHttpObject(_src, _CBackComments);

[jeremyjia]

{"name":"fireworks","link":"https://jeremyjia.github.io/Games/Spring/script/firework.js"}

[jeremyjia]

{"name":"跳舞的小人","link":"https://jeremyjia.github.io/Games/Spring/script/so646a.js"}

[jeremyjia]

{"name":"移动的棋盘","link":"https://littleflute.github.io/cchess/plxChessBoard.js" }

[jeremyjia]

//code name=源码插件动画 var canvas; var ctx; var width = 300; var height = 200;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 2048, 1536); ctx.fillStyle = "red"; ctx.font = "40px Arial"; var x1 = (time+200)%width; ctx.fillText("动画演示!", x1, height/2); ctx.fillStyle = "yellow"; var y1 = (time+200)%height; ctx.fillRect(30, y1, 60, 60); var myDate = new Date(); var strTime = myDate.toLocaleString(); ctx.fillStyle = "Blue"; ctx.fillText(strTime, 10, height/3); }

[jeremyjia]

//code name=国际象棋棋盘 var canvas; var context; var background; var width = 400; var height = 400; var cloud; var cloud_x=1; var squareSize = 50; var initialState = [ ['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'], ['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', ''], ['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'], ['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'] ]; var currentState = JSON.parse(JSON.stringify(initialState)); function animateFrame(time) { canvas = document.getElementById('myCanvas'); context = canvas.getContext('2d'); context.clearRect(0, 0, 2048, 1536); drawBoard(); }

// Function to draw the chessboard and pieces function drawBoard() { // Loop through each row and column to draw the squares and pieces for (var row = 0; row < 8; row++) { for (var col = 0; col < 8; col++) { // Calculate the position of each square var x = col squareSize; var y = row squareSize;

                // Alternate the colors of the squares
                if ((row + col) % 2 === 0) {
                    context.fillStyle = 'white';
                } else {
                    context.fillStyle = 'lightblue';
                }

                // Draw each square
                context.fillRect(x, y, squareSize, squareSize);

                // Draw the chess pieces on the squares
                var piece = currentState[row][col];
                if (piece != '') {
                    context.fillStyle = 'black';
                    context.font = '32px Arial';
                    context.fillText(piece, x + squareSize / 2 - 12, y + squareSize / 2 + 12);
                }
            }
        }
    }

[waynexw]

//code name=Canvas Clock_v1.0.0.4 var width = 400; var height = 400; var trans = 220; var radius = 200;

function animateFrame(time) { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); //ctx.clearRect(0, 0, 2048, 1536); ctx.translate(trans, trans); //jeremyjia fixed drawClock(ctx); ctx.translate(-trans, -trans); //jeremyjia fixed

ctx.fillStyle = "lightblue"; ctx.font = "50px arial"; ctx.fillText("Hello clock", 200, 500);

}

function drawClock(ctx) { drawFace(ctx, radius); drawNumbers(ctx, radius); drawTime(ctx, radius); }

function drawFace(ctx, radius) { var grad; ctx.beginPath(); ctx.fillStyle = "#87CEFA"; ctx.arc(0, 0, radius, 0, 2Math.PI); ctx.fill(); //grad = ctx.createRadialGradient(0,0,radius0.95, 0,0,radius1.05); //grad.addColorStop(0, '#333'); //grad.addColorStop(0.5, 'white'); //grad.addColorStop(1, '#333'); //ctx.strokeStyle = "#0ff0ff"; //grad; //ctx.lineWidth = 15; //ctx.stroke(); ctx.beginPath(); ctx.fillStyle = 'yellow'; ctx.arc(0, 0, radius0.1, 0, 2*Math.PI); ctx.fill(); }

function drawNumbers(ctx, radius) { var ang; var num; ctx.font = "30px arial"; //ctx.textBaseline="middle"; //ctx.textAlign="center"; for(num = 1; num < 13; num++){ ang = num Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius*0.85); ctx.rotate(-ang); } }

function drawTime(ctx, radius){ var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); //hour hour=hour%12; hour=(hourMath.PI/6)+ (minuteMath.PI/(660))+ (secondMath.PI/(36060)); drawHand(ctx, hour, radius0.5, radius0.07); //minute minute=(minuteMath.PI/30)+(secondMath.PI/(3060)); drawHand(ctx, minute, radius0.8, radius0.07); // second second=(secondMath.PI/30); drawHand(ctx, second, radius0.9, radius*0.02); }

function drawHand(ctx, pos, length, width) { ctx.beginPath(); ctx.strokeStyle = "#7B68EE"; ctx.lineWidth = width; //ctx.lineCap = "round"; ctx.moveTo(0,0); ctx.rotate(pos); ctx.lineTo(0, -length); ctx.stroke(); ctx.rotate(-pos); } //在下面“表盘_JS”应用中，修改了高度和宽度参数，但是表盘大小并无改变。答：有些字符丢失在非编辑模式下

[waynexw]

{"name":"表盘_JS","link":"https://waynexw.github.io/waynexw/res/clock_canvas.js" }

[jeremyjia]

//code name=卡拉OK字幕特效 var canvas; var ctx; var w = 1024; var h = 768; // Text content and font settings var text = "欢迎来到漂泊者乐园一起交流学习"; var font = "36px Arial"; var fontColor = "rgba(0, 255, 0, 0.3)"; // Green color var highlightColor = "rgba(255, 0, 0, 1)"; // Red color // Calculate the duration in milliseconds for each character var frameDuration = 700; // 0.7 second duration

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, w, h); ctx.fillStyle = "white";

drawOverlay(time);

}

function drawOverlay(time) {
// Calculate the current frame index var frameIndex = Math.floor(time * 1000 / frameDuration);

frameIndex = frameIndex%text.length;

// Calculate the position to start drawing the text
var startX = 50;
var startY = 200;//345;  
// Set the font style and color
ctx.font = font;
ctx.fillStyle = fontColor;

// Iterate over each character in the text
for (var i = 0; i < text.length; i++) {
  // Calculate the position for the current character
  var x = startX + (i * ctx.measureText(text[i]).width);
  var y = startY;
  // Set the fill color based on whether the character should be highlighted or not
  ctx.fillStyle = (frameIndex >= i) ? highlightColor : fontColor;
  // Draw the character at the appropriate position
  ctx.fillText(text[i], x, y);
}

}

[jeremyjia]

//code name=Cars v1.0.2 //Get the canvas element and the drawing context var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d");

// Define the animation function function animateFrame() { // Clear the canvas ctx.clearRect(0, 0, 1024, 768); // Draw and update each tree trees.forEach(function(tree) { tree.draw(); });

// Update and draw each car
cars.forEach(function(car) {
  car.update();
  car.draw();
});

}

// Define the car object function Car(x, y, color) { this.x = x; this.y = y; this.color = color; this.speed = Math.random() * 3 + 1; // Random speed between 1 and 4 // Draw the car this.draw = function() { ctx.fillStyle = this.color; ctx.fillRect(this.x, this.y, 60, 30); };

// Update the car's position this.update = function() { this.x += this.speed; if (this.x > 1024) { this.x = -60; // Reset position if car goes off-screen } }; }

// Create an array to hold the cars var cars = []; cars.push(new Car(10, 100, "red")); cars.push(new Car(50, 150, "blue")); cars.push(new Car(100, 200, "green")); cars.push(new Car(150, 250, "#FFA500")); cars.push(new Car(200, 300, "#800080"));

// Define the tree object function Tree(x, y) { this.x = x; this.y = y;

// Draw the tree this.draw = function() { ctx.fillStyle = "#A52A2A"; ctx.fillRect(this.x, this.y, 20, 40); ctx.fillStyle = "green"; ctx.beginPath(); ctx.arc(this.x + 10, this.y - 20, 30, 0, Math.PI * 2); ctx.fill(); }; }

// Create an array to hold the trees var trees = []; trees.push(new Tree(100, 370)); trees.push(new Tree(300, 370)); trees.push(new Tree(500, 370));

[jeremyjia]

//code name=牛牛 var canvas; var ctx; var w = 1024; var h = 768;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, w, h); ctx.fillStyle = "white";
drawNiu(time, ctx);

}

function drawNiu(time, ctx) {
// 设置牛的尺寸和位置 var width = 200; var height = 200; var x = canvas.width / 2 - width / 2; var y = canvas.height / 2 - height / 2;

// 绘制牛的头部 ctx.beginPath(); ctx.arc(x, y, 50, 0, 2 * Math.PI); ctx.fillStyle = '#000'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke();

// 绘制牛的身体 ctx.beginPath(); ctx.rect(x, y - 50, width, height); ctx.fillStyle = '#c3c3c3'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke();

// 绘制牛的眼睛 ctx.beginPath(); ctx.arc(x + 40, y + 60, 10, 0, 2 Math.PI); ctx.fillStyle = '#000'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke(); ctx.beginPath(); ctx.arc(x + 100, y + 60, 10, 0, 2 Math.PI); ctx.fillStyle = '#000'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke();

// 绘制牛的耳朵和嘴巴 ctx.beginPath(); ctx.moveTo(x + 35, y + 80); ctx.lineTo(x + 165, y + 80); ctx.arc(x + 135, y + 80, 20, -5 * Math.PI / 3, -Math.PI / 3); ctx.moveTo(x + 35, y + 115); ctx.lineTo(x + 165, y + 115); ctx.arc(x + 135, y + 115, 20, -Math.PI / 3, -Math.PI / 6); ctx.fillStyle = '#f8f8f8'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke();

// 画脸 ctx.beginPath(); ctx.arc(100, 95, 40, 0, Math.PI 2, true); // 调整脸的位置 ctx.fillStyle = 'peachpuff'; ctx.fill(); // 画眼睛 ctx.beginPath(); ctx.arc(85, 85, 5, 0, Math.PI 2, true); ctx.fillStyle = 'black'; ctx.fill();

ctx.beginPath(); ctx.arc(115, 85, 5, 0, Math.PI * 2, true); ctx.fillStyle = 'black'; ctx.fill();

// 画嘴巴 ctx.beginPath(); ctx.moveTo(80, 110); // 调整嘴巴位置 ctx.quadraticCurveTo(100, 120, 120, 110); ctx.lineWidth = 2; ctx.strokeStyle = 'red'; ctx.stroke();

}

[jeremyjia]

//code name=正弦曲线测试 var canvas; var ctx; var w = 1024; var h = 768;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, w, h); ctx.fillStyle = "yellow"; ctx.fillRect(20, 20, 10, 10); drawSineWave(canvasId, amplitude, frequency, phase, lineWidth, strokeStyle,ctx); amplitude+=10; if(amplitude>=200){amplitude=50;} }

function drawSineWave(canvasId, amplitude, frequency, phase, lineWidth, strokeStyle, ctx) { var width = w;//canvas.width; var height = h; //canvas.height;

var yCenter = height / 2; var xStart = 0; var xEnd = width;

ctx.clearRect(0, 0, width, height); ctx.lineWidth = lineWidth; ctx.strokeStyle = strokeStyle;

ctx.beginPath(); ctx.moveTo(xStart, yCenter);

for (var x = xStart; x <= xEnd; x++) { var y = yCenter + amplitude Math.sin((x % width) frequency 2 Math.PI + phase); ctx.lineTo(x, y); ctx.fillRect(x, y, 10, 10); }

ctx.stroke(); }

// 示例用法 var canvasId = 'myCanvas'; // Canvas元素的id var amplitude = 50; // 振幅 var frequency = 0.01; // 频率 var phase = 0; // 相位 var lineWidth = 2; // 线宽 var strokeStyle = 'red'; // 线条颜色

[jeremyjia]

//code name=折扇旋转测试 var canvas; var ctx; var width = 300; var height = 200;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d'); //ctx.clearRect(0, 0, 800, 600); var colors = ['#D0021B','#F5A623','#8B572A','#417505','#9013FE','#000000'] for ( var i = 0; i < colors.length; i++ ) { ctx.fillStyle = colors[i]; ctx.fillRect(0,0,200,50); ctx.rotate(15 Math.PI / 180); } ctx.fillText("Hello, world", 100,400); ctx.fillStyle = "blue"; //ctx.translate(100, 100); //ctx.fillRect(100,100,100,50); //ctx.rotate(30Math.PI/180); //ctx.fillRect(100,100,100,50); //ctx.translate(-100, -100); }

[jeremyjia]

//code name=张嘴的小人_1.0.2 var canvas; var ctx; var width = 300; var height = 200;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); ctx = canvas.getContext('2d');

// Draw Doraemon's body (blue) ctx.fillStyle = "#2196F3"; ctx.fillRect(100, 200, 200, 100);

  // Draw Doraemon's face (white)
  ctx.fillStyle = "yellow";
  ctx.beginPath();
  ctx.arc(200, 200, 80, 0, Math.PI * 2);
  ctx.fill();

  // Draw Doraemon's eyes (black)
  var eyeRadius = 12;
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.arc(180, 180, eyeRadius, 0, Math.PI * 2);
  ctx.arc(220, 180, eyeRadius, 0, Math.PI * 2);
  ctx.fill();

  // Draw Doraemon's nose (black)
  ctx.beginPath();
  ctx.moveTo(200, 195);
  ctx.lineTo(190, 215);
  ctx.lineTo(210, 215);
  ctx.closePath();
  ctx.fill();

  // Draw Doraemon's mouth with talking effect (red half-circle)
  var mouthX = 200;
  var mouthY = 240;
  var mouthRadius = 20;
  var talkingAngle = Math.PI / 4 * Math.abs(Math.sin(time % 100));
  var startAngle = 1.5 * Math.PI - talkingAngle; // 90度偏移
  var endAngle = 1.5 * Math.PI + talkingAngle; // 90度偏移
  ctx.fillStyle = "#FF0000";
  ctx.beginPath();
  ctx.arc(mouthX, mouthY, mouthRadius, startAngle, endAngle, true); // 注意：true表示逆时针绘制
  //ctx.lineTo(mouthX + mouthRadius * Math.cos(startAngle), mouthY);
  ctx.fill();

  // Draw Doraemon's hair (black)
  ctx.strokeStyle = "green";
  ctx.lineWidth = 10;
  ctx.beginPath();
  ctx.moveTo(140, 130);
  ctx.lineTo(160, 80);
  ctx.lineTo(180, 130);
  ctx.lineTo(200, 80);
  ctx.lineTo(220, 130);
  ctx.lineTo(240, 80);
  ctx.lineTo(260, 130);
 ctx.stroke();

}

[waynexw]

//code name=中国象棋盘(高仿) var canvas; var context; // Define the size of each square on the chessboard var squareSize = 70;

function animateFrame(time) { canvas = document.getElementById('myCanvas'); context = canvas.getContext('2d'); context.clearRect(0, 0, 2048, 1536); // Call the function to draw the chessboard drawBoard(context); }

// Function to draw the chessboard function drawBoard(context) { // Draw the background context.fillStyle = '#f0d9b5'; // Loop through each row and column to draw the lines for (var row = 0; row < 10; row++) { //origin row<11 for (var col = 0; col < 9; col++) { // Calculate the position of each square var x = col squareSize; var y = row squareSize; // Alternate the colors of the squares if ((row + col) % 2 === 0) { context.fillStyle = '#e69a66'; } else { context.fillStyle = '#b37342'; } // Draw each square context.fillRect(x, y, squareSize, squareSize); // Draw the border of the chessboard context.strokeStyle = 'black'; context.strokeRect(x, y, squareSize, squareSize); // Draw chess pieces var piece = getChessPiece(row, col); if (piece != '') { context.fillStyle = 'black'; context.font = '32px Arial'; context.fillText(piece, x + squareSize / 2 - 12, y + squareSize / 2 + 12); } } } }

// Function to get the chess piece at a given position on the chessboard function getChessPiece(row, col) { // Define the initial chess pieces var initialState = [ ['车', '马', '象', '士', '将', '士', '象', '马', '车'], ['', '', '', '', '', '', '', '', ''], ['', '炮', '', '', '', '', '', '炮', ''], ['卒', '', '卒', '', '卒', '', '卒', '', '卒'], ['', '', '', '', '', '', '', '', ''], ['', '', '', '', '', '', '', '', ''], ['兵', '', '兵', '', '兵', '', '兵', '', '兵'], ['', '砲', '', '', '', '', '', '砲', ''], ['', '', '', '', '', '', '', '', ''], ['車', '馬', '相', '仕', '帥', '仕', '相', '馬', '車'] ];

return initialState[row][col];

}

[jeremyjia]

//code name=自由落体动画_1.0.1 var ctx; var canvas; var width = 1024; var height = 768; function animateFrame(time) { canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, width, height);

// 更新小球位置
ball.y += ball.velocity;
ball.velocity += ball.gravity;

// 碰撞检测：小球落地
if (ball.y + ball.radius >= height-50) {
    if (ball.bouncesLeft > 0) {
        ball.velocity = -ball.velocity * ball.bounceFactor;
        ball.bouncesLeft--;
    } else {
        // 反弹次数用完后停止动画
        ball.velocity = 0;
    }
}

// 绘制小球
drawBall(ctx);
// 动画循环
if (ball.velocity != 0 || ball.bouncesLeft > 0) {
}

}

    // 小球初始位置和速度
    var ball = {
        x: 1024 / 2,
        y: 50,
        radius: 20,
        velocity: 0, // 初始速度为0
        gravity: 0.5, // 重力加速度
        bounceFactor: 0.8, // 反弹系数
        bouncesLeft: 3 // 反弹次数
    };

    function drawBall(ctx) {
        ctx.beginPath();
        ctx.fillStyle = "blue";
        ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    }

[waynexw]

//code name=太阳系(部分)v1.1 var sun; var earth; var moon; var canvas; var ctx;

function animateFrame(time) { init(); draw(); } function init(){ sun = new Image(); earth = new Image(); moon = new Image(); sun.src = "https://waynexw.github.io/waynexw/res/Sun.jpg"; earth.src = "https://waynexw.github.io/waynexw/res/earth.png"; moon.src = "https://waynexw.github.io/waynexw/res/moon.jpg";

canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');    

}

function draw(){ ctx.clearRect(0, 0, 2048, 1536); //清空所有的内容 ctx.drawImage(sun, 0, 0, 30, 30); //ctx.save(); ctx.translate(150, 150);

//绘制earth轨道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,0,0.5)";
ctx.arc(0, 0, 100, 0, 2 * Math.PI)
ctx.stroke()

var time = new Date();
//绘制地球
ctx.rotate(2 * Math.PI / 60 * time.getSeconds() + 2 * Math.PI / 60000 * time.getMilliseconds())
ctx.translate(100, 0);
ctx.drawImage(earth, -12, -12)

//绘制月球轨道
ctx.beginPath();
ctx.strokeStyle = "rgba(255,255,255,.3)";
ctx.arc(0, 0, 40, 0, 2 * Math.PI);
ctx.stroke();

//绘制月球
ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
ctx.translate(40, 0);
ctx.drawImage(moon, -3.5, -3.5);
//ctx.restore();    

}

[jeremyjia]

//code name=打鼓节拍器 var nTimes = 0; function animateFrame(time) { if(time%2==0){ nTimes++; if(nTimes>8) nTimes = 1; } var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 2048, 1536);

ctx.fillStyle = "red";
for(var n = 0; n < nTimes; n++){
    ctx.fillRect(10 + n*110, 10, 100, 100); 
    ctx.font = "30px Arial";
    ctx.fillText(n+1, 10 + n*110, 210); 
}

var nn = Math.floor(nTimes); var x = time; ctx.fillStyle = "Green"; for (var i = 0; i < 110; i++) { var x = 10+i; var y = 122; if(nn%2) y = 122 + i; else y = 244 - i; x += 110(nn-1); ctx.beginPath(); ctx.arc(x, y, 5, 0, Math.PI 2, true); ctx.fill(); } }