首页我需要一个用canvas制作一个眼睛圆心（160,160），半径为20；眼白圆心一致半径为10，颜色为径向渐变，开始圆心为（165,160）半径为0；结束圆心为（160,160）半径为10））

我需要一个用canvas制作一个眼睛圆心（160,160），半径为20；眼白圆心一致半径为10，颜色为径向渐变，开始圆心为（165,160）半径为0；结束圆心为（160,160）半径为10））

时间: 2024-02-27 21:52:39 浏览: 55

以下是用canvas制作眼睛的代码，可以直接在HTML文件中使用： ```html <!DOCTYPE html> <html> <head> <title>Canvas Eye</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="320" height="320"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 画眼睛圆心 ctx.beginPath(); ctx.arc(160, 160, 20, 0, 2*Math.PI); ctx.fillStyle = "#000"; ctx.fill(); // 画眼白 var gradient = ctx.createRadialGradient(165, 160, 0, 160, 160, 10); gradient.addColorStop(0, "#fff"); gradient.addColorStop(1, "#000"); ctx.beginPath(); ctx.arc(160, 160, 10, 0, 2*Math.PI); ctx.fillStyle = gradient; ctx.fill(); </script> </body> </html> ``` 您可以将该代码复制到一个HTML文件中，然后用浏览器打开，就可以看到一个眼睛的效果了。

阅读全文