svg生成矩形效果程式碼
分享一段程式碼例項,它利用svg實現了矩形效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body> <svg id="svg" width="500px" height="500px" style="background-color: #f2f2f2"></svg> <script> var svg = document.getElementById("svg"); svg.onclick = function(event){ var rect = document.createElementNS("http://www.w3.org/2000/svg","rect"); rect.setAttribute("x",event.offsetX); rect.setAttribute("y",event.offsetY); rect.setAttribute("width",50); rect.setAttribute("height",50); rect.setAttribute("fill",randomColor()); svg.appendChild(rect); } function randomColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return `rgb(${r},${g},${b})`; } </script> </body> </html>
相關文章
- svg實現矩形水平運動動畫效果SVG動畫
- svg矩形圍繞自身中心旋轉效果SVG
- SVG拖動繪製矩形程式碼例項SVG
- SVG九宮格密碼效果程式碼SVG密碼
- svg濾鏡效果程式碼例項SVG
- css實現矩形切角效果程式碼例項CSS
- SVG <rect> 繪製矩形SVG
- SVG矩形旋轉動畫SVG動畫
- SVG 繪製圓角矩形SVG
- canvas矩形拖拽效果Canvas
- CSS3 矩形切角效果CSSS3
- javascript矩形碰撞檢測程式碼JavaScript
- canvas透明度的矩形效果Canvas
- canvas具有漸變效果的矩形Canvas
- SVG繪製矩形缺角問題解決方案SVG
- SVG 漸變動畫效果SVG動畫
- css帶有空心箭頭矩形效果CSS
- CSS3矩形左右擺動效果CSSS3
- SVG圓形鐘錶效果SVG
- SVG線性漸變程式碼SVG
- css3實現的矩形切角效果CSSS3
- canvas繪製圓角矩形程式碼例項Canvas
- 《程式碼大全》程式碼生成
- 程式碼雨效果
- JavaScript驗證碼生成和驗證效果JavaScript
- SVG實現的圓環旋轉效果SVG
- SVG實現動態模糊動畫效果SVG動畫
- SVG 實現動態模糊動畫效果SVG動畫
- 生成驗證碼程式程式碼
- SVG程式碼構成簡單介紹SVG
- svg繪製半圓程式碼例項SVG
- css3實現的矩形圓角切角效果CSSS3
- canvas繪製矩形並填充顏色程式碼例項Canvas
- HTML5利用canvas繪製矩形程式碼例項HTMLCanvas
- SVG 帶有過渡效果的按鈕SVG
- 使用svg作為背景圖程式碼例項SVG
- css空心三角形箭頭矩形效果CSS
- CSS帶有三角小箭頭的矩形效果CSS