canvas-a13prototype.html 

<!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>

 

posted @ 2015-11-24 12:13  Cynthia娆墨旧染  阅读(421)  评论(0)  编辑  收藏  举报