canvas笔记-画一片星空
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-画一片星空
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">當前瀏覽器不支持Canvas，請更換瀏覽器后再試 </canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.fillStyle = "black";context.fillRect(0, 0, canvas.width, canvas.height);for(let i = 0; i < 200; i++){let r = Math.random() * 10 + 10;let x = Math.random() * canvas.width;let y = Math.random() * canvas.height;let a = Math.random() * 360;drawStar(context, x, y, r, r / 2.0, a);}}function drawStar(cxt, x, y, outerR, innerR, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * outerR + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * outerR + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * innerR + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * innerR + y);}cxt.closePath();cxt.fillStyle = "#fb3";cxt.strokeStyle = "#fd5";cxt.lineWidth = 3;cxt.lineJoin = "round";cxt.fill();cxt.stroke();}</script></body> </html>?
總結
以上是生活随笔為你收集整理的canvas笔记-画一片星空的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux笔记-scp或ftp或sftp
- 下一篇： Android笔记-雷电模拟器（Andr