canvas-a13prototype.html，_AG环亚集团官网_AG亚游平台_AG8环亚集团

IT技术新闻

IT技术新闻您当前的位置：主页 > IT技术新闻 >

canvas-a13prototype.html，

发布时间:2019-01-14 编辑:AG88

canvas-a13prototype.html，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展方法</title>
</head>
<body>
    <canvas id="canvas" >
        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>

http://www.bkjia.com/HTML5/1074221.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1074221.htmlTechArticlecanvas-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 #d...

本文源自: AG环亚集团官网

上一篇：HT图形组件设计之道（二），ht图形组件之道下一篇：没有了