canvas-star3_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

canvas-star3_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>添加天空渐变</title></head><body>    <canvas id="canvas" style="margin:0 auto;">        The current browser does not support Canvas, can replace the browser a try!    </canvas>    <script>        window.onload = function(){            var canvas = document.getElementById('canvas');            canvas.width = 1200;            canvas.height = 800;            if(canvas.getContext('2d')){                var context = canvas.getContext('2d');                // context.fillStyle = "#000";                var skyStyle = context.createLinearGradient(0,0,0,canvas.height);                skyStyle.addColorStop(0.0,'black');                skyStyle.addColorStop(1.0,'#035');                context.fillStyle = skyStyle;                                context.fillRect(0,0,canvas.width,canvas.height)                for(var i=0;i<200;i++){                    var r = Math.random() * 5 + 5;                    var x = Math.random() * canvas.width;                    var y = Math.random() * canvas.height * 0.65;                    var a = Math.random() * 360;                    drawStar(context , x , y , r , a )                }            }else{                alert('当前游览器不支持Canvas，请更换游览器后再试！');            }        }        function drawStar(cxt,x,y,R,rot){            cxt.save();                cxt.translate(x,y);                cxt.rotate(rot/180*Math.PI);                cxt.scale(0.05*R,0.05*R)                starPath(cxt);                cxt.fillStyle = "#fb3";                cxt.strokeStyle = "#fd5";                cxt.lineWidth = 3;                cxt.lineJoin = "round";                cxt.fill();                cxt.stroke();            cxt.restore()        }            function starPath(cxt){                    cxt.beginPath();            for(var i=0;i<5;i++){                cxt.lineTo(Math.cos( (18+i*72) / 180 * Math.PI )*20,                                -Math.sin( (18+i*72) / 180 * Math.PI )*20);                cxt.lineTo(Math.cos( (54+i*72) / 180 * Math.PI )*0.5*20,                                -Math.sin( (54+i*72) / 180 * Math.PI )*0.5*20);            }            cxt.closePath();        }    </script></body><script>    /*图形变换        位移 translate(x,y)        旋转 rotate(deg)        缩放 scale(sx,sy)    */</script></html>

Copy after login

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn