canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失

一、canvas随机渲染泡泡，鼠标单击后变大变淡消失

完整代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>svg{background:#f2f2f2;}</style><script></script></head><body><svg id="svg" width="500" height="400"><!-- <circle cx="60" cy="60" r="50" stroke="#f00" stroke-width="10" fill="green" id="circle"></circle>--></svg> <script>var c1=document.createElementNS('http://www.w3.org/2000/svg','circle');var cxs=[];var cys=[];var rs=[];var fills=[];var circles=[];for(var i=0;i<5;i++){cxs[i]=Math.floor(Math.random()*500);cys[i]=Math.floor(Math.random()*400);rs[i]=Math.floor(Math.random()*75+50);fills[i]=randColor();circles[i]=document.createElementNS('http://www.w3.org/2000/svg','circle');circles[i].setAttribute('cx',cxs[i]);circles[i].setAttribute('cy',cys[i]);circles[i].setAttribute('r',rs[i]);circles[i].setAttribute('fill',fills[i]);circles[i].onclick=function(){var me=this;console.log(me);var r=me.getAttribute('r');console.log(r);var o=me.getAttribute('opacity');console.log(o);if(o===null){o=1;}var timer=setInterval(function(){r++;o-=0.01;me.setAttribute('r',r);me.setAttribute('opacity',o);if(o<=0){clearInterval(timer);svg.removeChild(me);}},10);/**/}svg.appendChild(circles[i]);}function randColor(){var r=Math.floor(Math.random()*155+100);var g=Math.floor(Math.random()*155+100);var b=Math.floor(Math.random()*155+100);return 'rgba('+r+','+g+','+b+')';}</script></body>
</html>

二、鼠标单击后，canvas再绘制随机大小颜色泡泡后变大消失（可以给小孩玩hahaha~）

完整代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>svg{background:#f2f2f2;}</style><script></script></head><body><svg id="svg" width="1500" height="900"></svg> <script>svg.onclick=function(event){var x=event.offsetX;var y=event.offsetY;draw(x,y);}function draw(x,y){var cx=x;var cy=y;var r=Math.floor(Math.random()*270+30);var circle=document.createElementNS('http://www.w3.org/2000/svg','circle');circle.setAttribute('cx',cx);circle.setAttribute('cy',cy);circle.setAttribute('r',r);circle.setAttribute('fill',randColor());svg.appendChild(circle);var timer=setInterval(function(){r++;circle.setAttribute('r',r);var opa=circle.getAttribute('opacity');if(opa===null){opa=1;}opa-=0.01;circle.setAttribute('opacity',opa);if(opa<=0){clearInterval(timer);}},10);}function randColor(){var r=Math.floor(Math.random()*155+100);var g=Math.floor(Math.random()*155+100);var b=Math.floor(Math.random()*155+100);return 'rgba('+r+','+g+','+b+')';}</script></body>
</html>

canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失相关推荐

html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...
图片随鼠标滑轮滚动变大变小
* 图片随鼠标滑轮滚动变大变小,最大不超过屏幕宽度-360 */ <HTML> <HEAD> <meta http-equiv="Content-Type&qu ...
canvas生成随机（颜色位置）验证码
一.什么是canvas? 1.HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 2.<canvas> 标签只是图形容器,您必须 ...
Canvas 绘制背景小球、与鼠标交互的小球
canvas入门,跟随掘金小册如何使用 Canvas 制作出炫酷的网页背景特效学习,完成一个简单的 canvas demo 下面是代码,操作解释都有注释: <!DOCTYPE html> ...
html5添加随机率,HTML5 canvas 绘制随机曲线并实现放大功能
正在开发一个无线监控系统,要显示频率波形图,所以最近一段时间再研究HTML5 canvas 标签,本例实现了根基传经来的数据绘制曲线,并对整个图实行局部放大功能. js代码(canvas_06.js) ...
浏览器页面跟随鼠标滑轮变大变小
使用谷歌时,打开了YouTobe,结果页面开始随鼠标缩放.嗯,为了避免忘了怎么处理,记录一下. 原因就是Ctrl按键卡住了,按了好几下,嗯,恢复了.
Linux命令行字体变大变小,如何更改Linux控制台字体类型和大小，
如何更改Linux控制台字体类型和大小, 如果你有图形桌面环境,那么就很容易更改文本的字体以及大小.但你如何在没有图形环境的 Ubuntu 无头服务器中做到?别担心!本指南介绍了如何更改 Linux ...
Js鼠标放上去图片变大变小
<img src="" οnmοuseοver="bigger()" οnmοuseοut="smaller()" id=" ...
bootstrap div变大变小_Bootstrap3基础栅格系统页面布局随浏览器大小的变化而变化...
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor Visual Studio Code 1 ...

canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失

canvas绘制随机大小颜色泡泡,鼠标单击后变大变淡消失相关推荐

最新文章

热门文章