<svg width="900" height="900"></svg>
//js部分
<script>
var svg = document.getElementsByTagName('svg')[0]
svg.onclick = function (e) {
var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle')
//鼠标点击时的位置
var x = e.offsetX
var y = e.offsetY
//添加的属性和值
circle.setAttribute('cx', x)
circle.setAttribute('cy', y)
circle.setAttribute('r', getnum(5, 300))
circle.setAttribute('fill', getColor(0, 255))
circle.setAttribute('fill-opacity', Math.random(0, 1))
//添加到svg标签中
svg.appendChild(circle)
}
//随机数
function getnum(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min
}
//随机颜色
function getColor(min, max) {
return 'rgb(' + getnum(min, max) + ',' + getnum(min, max) + ',' + getnum(min, max) + ')'
}
</script>
利用svg点击屏幕时有随机大小,颜色的圆出现
最新推荐文章于 2024-07-24 11:09:48 发布