在HTML画布上绘图将使用JavaScript完成。使用HTML DOM方法getElementById()
,并getContext()
在画布上绘制前。要在HTML中绘制星形,请使用canvas元素。
对于画布,请使用该lineTo()
方法绘制星形。该lineTo()
方法包括x和y参数值,这些参数值可定位线以帮助您进行绘图。
要在HTML文档上绘制画布:
您可以尝试运行以下代码以使用HTML5 canvas绘制星星
<!DOCTYPE HTML> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id="newCanvas" width="300" height="250"></canvas> <script> var canvas = document.getElementById('newCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "blue"; ctx.beginPath(); ctx.moveTo(108, 0.0); ctx.lineTo(141, 70); ctx.lineTo(218, 78.3); ctx.lineTo(162, 131); ctx.lineTo(175, 205); ctx.lineTo(108, 170); ctx.lineTo(41.2, 205); ctx.lineTo(55, 131); ctx.lineTo(1, 78); ctx.lineTo(75, 68); ctx.lineTo(108, 0); ctx.closePath(); ctx.fill(); </script> </body> </html>