search

Home >Web Front-end >HTML Tutorial >canvas-star3_html/css_WEB-ITnose

canvas-star3_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:33:12997browse

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

 

Statement：
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
Previous article：Sublime Text3 Package Control和Emmet插件安装方法_html/css_WEB-ITnoseNext article：css异常_html/css_WEB-ITnose

Related articles

See more