canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题

最新推荐文章于 2024-08-14 20:41:17 发布

IT1995

最新推荐文章于 2024-08-14 20:41:17 发布

阅读量1.3k

点赞数 52

本文链接：https://blog.csdn.net/qq78442761/article/details/106522758

版权

web前端同时被 3 个专栏收录

181 篇文章 6 订阅

订阅专栏

Web相关技术

160 篇文章 8 订阅

订阅专栏

canvas

11 篇文章 1 订阅

订阅专栏

首先是扩展canvas的context

比如扩展一个画五角星的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    CanvasRenderingContext2D.prototype.fillStar = function(r, R, x, y, rot){

        this.beginPath();
        for(let i = 0; i < 5; i++){

            this.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,
                -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * R + y);
            this.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,
                -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);
        }

        this.closePath();
        this.fill();
    }

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        context.fillStyle = "#087";
        context.fillStar(150, 300, 400, 400, 0);
    }

</script>

</body>
</html>

运行截图如下：

通过CanvasRenderingContext2D.prototype中定义函数可实现扩展。

下面是画椭圆，程序运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
    当前浏览器不支持canvas
</canvas>

<script>

    window.onload = function(){

        let canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 800;
        let context = canvas.getContext("2d");

        if(context.ellipse){

            context.beginPath();
            context.ellipse(400, 400, 300, 200, 0, 0, Math.PI * 2);
            context.stroke();
        }
        else{

            alert("no ellipse");
        }
    }

</script>

</body>
</html>

下面是兼容性问题，就是这段代码：

if(context.ellipse){

    context.beginPath();
    context.ellipse(400, 400, 300, 200, 0, 0, Math.PI * 2);
    context.stroke();
}
else{

    alert("no ellipse");
}

如果浏览器不支持context.ellipse那么值会为undefined，这样就会进入else里面。