canvas基本矩形

最新推荐文章于 2024-08-18 10:07:21 发布

JinmyHe

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量281

点赞数

分类专栏： web前端-动画图形文章标签： canvas 矩形

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82622616

版权

web前端-动画图形专栏收录该内容

19 篇文章 1 订阅

订阅专栏

绘制矩形有3种不同的方式：填充，搭边或清除。当然，创建矩形还可以使用路径。

实现这3种操作的API函数如下：

fillRect(x,y,width,height)

在位置(x,y)处以宽为width,高为height绘制一个填充的矩形

strokeRect(x,y,width,height)

在位置(x,y)处以宽为width,高为height绘制一个矩形边框。它需要使用当前的strokeStyle,lineWidth,lineJoin以及miterLimit设置

clearRect(x,y,width,height)

在位置(x,y)处以宽width,高height，清除指定区域并使其完全透明

以下完整案例代码：

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);
        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //绘图
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                context.fillStyle = '#000'; //设置或返回用于填充绘画的颜色、渐变或模式
                context.strokeStyle = '#ff00ff'; //设置或返回用于笔触的颜色、渐变或模式
                context.lineWidth = 2; //设置或返回当前的线条宽度
                context.fillRect(10, 10, 40, 40); //绘制“被填充”的矩形
                context.strokeRect(0, 0, 60, 60); //绘制矩形（无填充）
                context.clearRect(20, 20, 20, 20); //在给定的矩形内清除指定的像素
            }
        }
    </script>
</head>

<body>
    <div style="position: absolute;top:50px;left: 50px; z-index: 10;">
        <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
        </canvas>
    </div>

</body>

</html>