HTML5画布椭圆形教程

最新推荐文章于 2023-06-12 13:55:46 发布

limeiyans

最新推荐文章于 2023-06-12 13:55:46 发布

阅读量1.3k

点赞数

分类专栏： HTML5画布椭圆形教程文章标签： HTML5画布椭圆形教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18742693

版权

HTML5画布椭圆形教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个椭圆形使用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');
      var centerX = 0;
      var centerY = 0;
      var radius = 50;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布椭圆形教程

创建一个椭圆形使用HTML5画布,我们可以保存上下文状态,伸展画布背景水平,画一个圆,恢复画布的状态,然后应用样式。 body { margin: 0px; padding: 0px; } var canvas = document.getElementById('m
复制链接

扫一扫