canvas画圆、随机统计图以及清除画布

_enzo

已于 2022-08-28 12:44:50 修改

阅读量343

点赞数 1

分类专栏： Canvas 文章标签： canvas

于 2021-06-21 14:32:58 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118085881

版权

本文介绍了如何使用HTML5的canvas元素进行图形绘制，包括精确地画圆和圆弧，创建随机统计图，以及有效地清除画布上的内容。每个部分都配以实际效果展示。

摘要由CSDN通过智能技术生成

1.画圆以及圆弧

<style>
    canvas {
   
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>   
    <script>
        var canvas = document.querySelector("#cont");
        //获取画布上下文
        var ctx = canvas.getContext('2d');
        //画圆
        ctx.beginPath();
        ctx.arc(250, 250, 150, 0, Math.PI*2, false);
        ctx.fillStyle = 'gold';
        ctx.fill();
        ctx.lineWidth = 3;