2.3_矩形的绘制

信封中的阳光

于 2017-05-02 10:17:20 发布

阅读量344

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.youkuaiyun.com/jun_sun_shine/article/details/71077983

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章

订阅专栏

本文介绍了一个简单的HTML5 Canvas矩形绘制实例，演示了如何使用strokeRect和fillRect方法来绘制和填充矩形，并通过鼠标点击事件实现画布的清空功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.3_矩形的绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>矩形的绘制</title>
        <style>
            body{
                background: #000;
            }
            #canvas{
                background: #fff;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d');

            context.lineJoin = 'round';
            context.lineWidth = 30;

            context.font = '24px Helvetica';
            context.fillText('Click anywhere to erase', 175,40);

            context.strokeRect(75,100,200,200);
            context.fillRect(325,100,200,200);

            context.canvas.onmousedown = function(e){
                context.clearRect(0,0,canvas.width,canvas.height);
            }
    </script>
</html>