首页html5 多啦a梦,HTML5利用canvas绘制哆啦A梦头部（代码实例）

html5 多啦a梦,HTML5利用canvas绘制哆啦A梦头部（代码实例）

时间: 2023-11-18 09:02:15 浏览: 222

好的，下面是利用 canvas 绘制哆啦A梦头部的 HTML5 代码实例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>哆啦A梦头部绘制</title> </head> <body> <canvas id="myCanvas" width="400" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制头部 ctx.beginPath(); ctx.arc(200, 200, 150, 0, 2 * Math.PI); ctx.fillStyle = "#f0d8a8"; ctx.fill(); ctx.stroke(); // 绘制耳朵 ctx.beginPath(); ctx.arc(110, 105, 60, 0, 2 * Math.PI); ctx.fillStyle = "#f0d8a8"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(290, 105, 60, 0, 2 * Math.PI); ctx.fillStyle = "#f0d8a8"; ctx.fill(); ctx.stroke(); // 绘制眼睛 ctx.beginPath(); ctx.arc(145, 190, 30, 0, 2 * Math.PI); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(255, 190, 30, 0, 2 * Math.PI); ctx.fillStyle = "#ffffff"; ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.arc(145, 190, 15, 0, 2 * Math.PI); ctx.fillStyle = "#000000"; ctx.fill(); ctx.beginPath(); ctx.arc(255, 190, 15, 0, 2 * Math.PI); ctx.fillStyle = "#000000"; ctx.fill(); // 绘制鼻子 ctx.beginPath(); ctx.arc(200, 240, 20, 0, 2 * Math.PI); ctx.fillStyle = "#f08080"; ctx.fill(); ctx.stroke(); // 绘制嘴巴 ctx.beginPath(); ctx.arc(200, 280, 60, 0.3 * Math.PI, 0.7 * Math.PI); ctx.strokeStyle = "#000000"; ctx.lineWidth = 5; ctx.stroke(); </script> </body> </html> ``` 这段代码会生成一个带有 canvas 的页面，在 canvas 上绘制出哆啦A梦的头部，包括头部、耳朵、眼睛、鼻子和嘴巴。你可以复制粘贴到一个 HTML 文件中，然后用浏览器打开查看效果。

阅读全文