HTML5画布形状填充教程

来源：互联网发布：汉诺塔问题python 编辑：程序博客网时间：2024/05/11 16:32

来填补一个HTML5画布形状与一个坚实的颜色,我们可以设置fillStyle属性颜色字符串如蓝色,如# 0000 ff十六进制值,或一个RGB值如RGB(0，0，255),然后我们可以使用fill()方法来填补形状。除非另有说明,默认填充风格对于一个HTML5画布形状是黑色的。

<!DOCTYPE HTML><html>  <head>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body>    <canvas id="myCanvas" width="578" height="200"></canvas>    <script>      var canvas = document.getElementById('myCanvas');      var context = canvas.getContext('2d');      // begin custom shape      context.beginPath();      context.moveTo(170, 80);      context.bezierCurveTo(130, 100, 130, 150, 230, 150);      context.bezierCurveTo(250, 180, 320, 180, 340, 150);      context.bezierCurveTo(420, 150, 420, 120, 390, 100);      context.bezierCurveTo(430, 40, 370, 30, 340, 50);      context.bezierCurveTo(320, 5, 250, 20, 250, 50);      context.bezierCurveTo(200, 5, 150, 20, 170, 80);      // complete custom shape      context.closePath();      context.lineWidth = 5;      context.fillStyle = '#8ED6FF';      context.fill();      context.strokeStyle = 'blue';      context.stroke();    </script>  </body></html>

0 0