首页html5在画布上绘制轮盘

html5在画布上绘制轮盘

时间: 2023-09-16 22:15:54 浏览: 100

以下是一个简单的HTML5画布绘制轮盘的示例代码： ```html <!DOCTYPE html> <html> <head> <title>HTML5 Canvas Roulette Wheel</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 绘制轮盘 context.beginPath(); context.arc(canvas.width/2, canvas.height/2, canvas.width/2-10, 0, Math.PI*2); context.lineWidth = 10; context.strokeStyle = "#000"; context.stroke(); // 绘制扇形 var colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF"]; var startAngle = 0; var arc = Math.PI / 3; for (var i = 0; i < 6; i++) { context.beginPath(); context.moveTo(canvas.width/2, canvas.height/2); context.arc(canvas.width/2, canvas.height/2, canvas.width/2-10, startAngle, startAngle + arc); context.closePath(); context.fillStyle = colors[i]; context.fill(); startAngle += arc; } </script> </body> </html> ``` 该示例代码使用HTML5画布元素和JavaScript绘制了一个简单的轮盘，其中包含了6个等分的扇形。可以根据需要更改扇形数量和颜色。

阅读全文