扩充canvas的方法

最新推荐文章于 2022-11-07 18:26:56 发布

面条请不要欺负汉堡

最新推荐文章于 2022-11-07 18:26:56 发布

阅读量572

点赞数

CC 4.0 BY-SA版权

分类专栏： html5 文章标签： canvas CanvasRenderingConte 五角星扩充canvas的方法 prototype

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/58596890

html5 专栏收录该内容

20 篇文章

订阅专栏

了解下知识点：

1.prototype 属性使您有能力向对象添加属性和方法。

2.CanvasRenderingContext2D

CanvasRenderingContext2D 接口提供的 2D 渲染背景用来绘制<canvas>元素，为了获得这个接口的对象，需要在 <canvas> 上调用 getContext() ，并提供一个 "2d" 的参数。

canvas所有的API接口都是放在这里的，所以用这个扩充canvas的方法

下面我们来做个列子：在canvas内绘制五角星的方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
    当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 800;
    var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.fillStyle="#f00";
        context.strokeStyle="black";
      //num 是你要绘制几角形
    CanvasRenderingContext2D.prototype.fillStar=function (r,R,x,y,rot,num) {
        this.beginPath();
        for(var i=0;i<num;i++){
            this.lineTo(Math.cos(2*((90-(360/num))+i*(360/num)-rot)*Math.PI / 360)*R+x,
                            -Math.sin(2*((90-(360/num))+i*(360/num)-rot)*Math.PI / 360)*R+y );
            this.lineTo(Math.cos(2*((90-(360/2/num))+i*(360/num)-rot)*Math.PI / 360)*(R/2)+x,
                            -Math.sin(2*((90-(360/2/num))+i*(360/num)-rot)*Math.PI / 360)*(R/2)+y );
        }
        this.closePath();
        this.fill();
        this.stroke();
    }
    context.fillStar(150,300,400,400,0,5);
</script>
</body>
</html>