首页HTML写一个散点涟漪图

HTML写一个散点涟漪图

时间: 2024-05-06 22:21:39 浏览: 64

可以使用JavaScript和HTML5的Canvas API来绘制散点涟漪图。以下是一段示例代码可供参考： ```html <!DOCTYPE html> <html> <head> <title>散点涟漪图</title> <style> canvas { border: 1px solid gray; margin: 10px; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script> // 创建 Canvas 对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 定义散点数据 var data = [ { x: 50, y: 50, r: 5 }, { x: 100, y: 100, r: 10 }, { x: 200, y: 150, r: 15 }, { x: 250, y: 200, r: 20 }, { x: 300, y: 250, r: 25 } ]; // 绘制涟漪图 ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "blue"; for (var i = 0; i < data.length; i++) { var radius = data[i].r; var gradient = ctx.createRadialGradient(data[i].x, data[i].y, 0, data[i].x, data[i].y, radius); gradient.addColorStop(0, "#ffffff"); gradient.addColorStop(1, "#0000ff"); ctx.beginPath(); ctx.arc(data[i].x, data[i].y, radius, 0, Math.PI * 2); ctx.fillStyle = gradient; ctx.fill(); ctx.closePath(); } </script> </body> </html> ``` 该代码会在网页上绘制一个包含5个散点涟漪的图形。其中每一个散点的位置和大小由 `data` 数组中的元素定义。涟漪效果通过使用 `ctx.createRadialGradient()` 方法创建径向渐变来实现。请注意，代码中使用了 `fillRect()` 方法来在每次绘制前清空画布。

阅读全文