首页HTML5的canvas标签

HTML5的canvas标签

时间: 2023-08-10 20:51:26 浏览: 92

好的，下面是使用HTML5的canvas标签绘制一个底边长为200，上边长为100，高为80，底下两个角是反圆角的梯形： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>梯形绘制</title> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(250, 20); ctx.quadraticCurveTo(300, 20, 300, 70); ctx.lineTo(300, 110); ctx.quadraticCurveTo(300, 160, 250, 160); ctx.lineTo(50, 160); ctx.quadraticCurveTo(0, 160, 0, 110); ctx.lineTo(0, 70); ctx.quadraticCurveTo(0, 20, 50, 20); ctx.fillStyle = "#f9c2ff"; ctx.fill(); </script> </body> </html> ``` 运行上述代码，即可在浏览器中看到绘制的梯形。

阅读全文