Heim >Web-Frontend >HTML-Tutorial >canvas-star3_html/css_WEB-ITnose
canvas-star3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:12997Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Sublime Text3 Package Control和Emmet插件安装方法_html/css_WEB-ITnoseNächster Artikel：css异常_html/css_WEB-ITnose