當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【JavaScript】Canvas绘制美丽的网螺旋旋转图形
生活随笔
收集整理的這篇文章主要介紹了
【JavaScript】Canvas绘制美丽的网螺旋旋转图形
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head><meta http-equiv = "content-type" content = "text/html" charset = "utf-8"/><title> 網頁螺旋旋轉圖形 </title>
</head>
<body><h1> 螺旋旋轉圖形 </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');// 設置背景布為白色context.fillStyle = "#fff";// 創建一個畫布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++) {// 圖形向左、向下各移動25context.translate(25, 25);// 圖形縮放context.scale(0.95, 0.95);// 圖形旋轉context.rotate(Math.PI/10);context.fillRect(0, 0, 100, 50);}</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的【JavaScript】Canvas绘制美丽的网螺旋旋转图形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MIT研究生解说数学体系
- 下一篇： 【数据结构与算法】数组动态分配方式的思考