首页 > Web开发 > 详细

canvas-a13prototype.html

时间:2015-11-24 14:38:16      阅读:273      评论:0      收藏:0      [点我收藏+]
<!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>

 

canvas-a13prototype.html

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!