canvas-a13prototype.html

最新推荐文章于 2024-03-11 21:19:40 发布

weixin_33754913

最新推荐文章于 2024-03-11 21:19:40 发布

阅读量48

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cynthia-wuqian/p/4991199.html

本文介绍如何利用Canvas API的扩展方法fillStar绘制五角星，并通过实例演示了其应用。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展方法</title>
</head>
<body>
    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid">
        The current browser does not support Canvas, can replace the browser a try!
    </canvas>

    <script>
        var canvas = document.getElementById('canvas');

        // 新的API
        CanvasRenderingContext2D.prototype.fillStar = function(r,R,x,y,rot){
            this.beginPath();
            for(var 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(){
            
            canvas.width = 1024;
            canvas.height = 768;

            if(canvas.getContext('2d')){
                var context = canvas.getContext('2d');

                // begin
                context.fillStyle = "#058";
                // 调用新的API
                context.fillStar(150,300,400,400,0)

            }else{
                alert('当前游览器不支持Canvas，请更换游览器后再试！');
            }
        }

    </script>
</body>
</html>