當(dāng)前位置：
首頁(yè) >
【JavaScript】Canvas绘制美丽的网螺旋旋转图形
發(fā)布時(shí)間：2025/3/15
44
豆豆
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】Canvas绘制美丽的网螺旋旋转图形
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/><title> 網(wǎng)頁(yè)螺旋旋轉(zhuǎn)圖形 </title>
</head>
<body><h1> 螺旋旋轉(zhuǎn)圖形 </h1><canvas id = "mc" width = "400", height = "400"style = "border:1px solid black"> </canvas><script languagetype = "text/javascript">var canvas = document.getElementById('mc');var context = canvas.getContext('2d');// 設(shè)置背景布為白色context.fillStyle = "#fff";// 創(chuàng)建一個(gè)畫(huà)布context.fillRect(0, 0, 400, 300);// 圖形繪制context.translate(200, 50);context.fillStyle = 'rgba(255, 0, 0, 0.25)';for (var i = 0; i < 50; i++) {// 圖形向左、向下各移動(dòng)25context.translate(25, 25);// 圖形縮放context.scale(0.95, 0.95);// 圖形旋轉(zhuǎn)context.rotate(Math.PI/10);context.fillRect(0, 0, 100, 50);}</script>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的【JavaScript】Canvas绘制美丽的网螺旋旋转图形的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MIT研究生解说数学体系
- 下一篇： 解读Spring MVC项目技术架构