canvas-star7.html
生活随笔
收集整理的這篇文章主要介紹了
canvas-star7.html
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!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.createRadialGradient(canvas.width/2,canvas.height,0,canvas.width/2,canvas.height,canvas.height);skyStyle.addColorStop(0.0,'#035');skyStyle.addColorStop(1.0,'black');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 )}// 月亮
fillMoon(context,2,900,200,100,30)// 土地
drawLand(context)}else{alert('當(dāng)前游覽器不支持Canvas，請(qǐng)更換游覽器后再試！');}}function drawLand(cxt){cxt.save();cxt.beginPath();cxt.moveTo(0,600);cxt.bezierCurveTo(540,400,660,800,1200,600);cxt.lineTo(1200,800);cxt.lineTo(0,800);cxt.closePath();var landStyle = cxt.createLinearGradient(0,800,0,0);landStyle.addColorStop(0.0,'#030');landStyle.addColorStop(1.0,'#580');cxt.fillStyle = landStyle;cxt.fill();cxt.restore();}function fillMoon(cxt,d,x,y,R,rot,fillColor){cxt.save();cxt.translate(x,y);cxt.rotate(rot*Math.PI/180);
cxt.scale(R,R);pathMoon(cxt,d);cxt.fillStyle = fillColor || "#fb5";cxt.fill();cxt.restore();}function pathMoon(cxt,d){cxt.beginPath();cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);moveTo(0,-1);cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
cxt.closePath();}function dis(x1,y1,x2,y2){return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))}function createBackgroundCanvas(){var backCanvas = document.createElement("canvas");backCanvas.width = 100;backCanvas.height = 100;var backCanvasContext = backCanvas.getContext('2d');drawStar(backCanvasContext,50,50,50,0);return backCanvas}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)旋轉(zhuǎn) rotate(deg)縮放 scale(sx,sy)*/
</script>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/cynthia-wuqian/p/4981628.html
總結(jié)
以上是生活随笔為你收集整理的canvas-star7.html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [密码学基础][每个信息安全博士生应该知
- 下一篇： typedef 深入剖析