在画布中实现气泡

第一步:先定义一个 500*500的画布
<canvas id="wrap" width="500" height="500" ></canvas>

第二步:给画布设置样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{

background: #cccccc;
    }
    #wrap{
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

第三步: js代码

<script type="text/javascript">
    (function () {
        //获取画板
        var canvas = document.querySelector('#wrap');

if(!canvas.getContext){
            return;
        }
        //定义绘制对象
        var ctx = canvas.getContext('2d');

//定义一个数组存放小圆点
var circleArr=[];

//进行绘制
        //开启定时器
        setInterval(function () {
       //清除小圆点
            ctx.clearRect(0,0,canvas.width,canvas.height);
            for (var i = 0; i < circleArr.length; i++) {
              var circle = circleArr[i];
              circle.r ++; //半径不断变大
              circle.opacity -=0.01;//透明度不短减小

//点透明度少于0 直接清除
              if(circle.opacity<=0){
                  circleArr.splice(i,1);
              }

ctx.beginPath();
              ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')';
              ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
              ctx.fill();
            }

},16);

setInterval(function () {
            //开始绘制圆点
            var circle = {};
            //坐标
            circle.x = Math.random() * canvas.width;
            circle.y = Math.random() * canvas.height;

circle.r = 10; //半径
            circle.red = Math.random() * 255;
            circle.green = Math.random() * 255;
            circle.blue = Math.random() * 255;
            circle.opacity = 1; //透明度

circleArr.push(circle);
},50)

})()

</script>

希望对您有用

本人为前端菜鸟，如上面言论有误，希望大家能在下方评论指出，让菜鸟可以飞一飞~~

canvas画布中实现气泡相关推荐

ros中web端通过按钮加载本地静态 pgm 地图显示在canvas画布中
ros中web端通过按钮加载本地静态 pgm 地图显示在canvas画布中 var input = this.$("fielinput");if (typeof (FileRea ...
ros中web端通过 ajax 访问 nginx 加载静态 pgm 地图显示在canvas画布中
ros中web端通过 ajax 访问 nginx 加载静态 pgm 地图显示在canvas画布中 //mapName:地图名称 | robotfloor:楼层if(mapName.length ==0 ...
php画布怎么清除,JavaScript_JavaScript html5 canvas画布中删除一个块区域的方法，本文实例讲述了html5 canvas画布 - phpStudy...
JavaScript html5 canvas画布中删除一个块区域的方法本文实例讲述了html5 canvas画布中删除一个块区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 附:图 ...
【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心示例 )
文章目录一.鼠标滚轮缩放的中心点设置为当前鼠标中心点 - 要点分析 1.保存当前鼠标指针指向的位置 2.根据鼠标指针指向的位置以及比例重新计算图片位置二.绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩 ...
如何抓取canvas画布中的图片
如何抓取canvas画布中的图片网络页面中存放图片的形式有很多这里说一下canvas格式时怎么获取 String fullImgJs = "return document.getElem ...
原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
Canvas 画布中坐标系的位置问题(原点确定)
Canvas在后台数据可视化中十分重要,很多时候数据都会有Canvas化成一系列类似于折线图和饼状图的形式呈现.最近在学习Canvas过程中,学到建立坐标系过程中.在确定了步骤之后,发现原点确立有个小 ...
前端：JS/38/canvas状态的保存和恢复（canvas常用状态大全），canvas画布中图像的变形
canvas状态的保存和恢复 Saving and restoring state 在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法. canvas.save() 保存画布(canva ...
js将文字填充与canvas画布再转为图片
需求:封装consul服务的webUI: 原因:展示consul的服务信息时,需要嵌套动画,由于其没有内置的icon,所以将服务name放于图片位: 分析:展示信息时采用了卡片式的服务布局,缩放式的服 ...

canvas画布中实现气泡

在画布中实现气泡

第一步:先定义一个 500*500的画布
<canvas id="wrap" width="500" height="500" ></canvas>

第二步:给画布设置样式

<style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{

background: #cccccc;
    }
    #wrap{
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

第三步: js代码

<script type="text/javascript">
    (function () {
        //获取画板
        var canvas = document.querySelector('#wrap');

if(!canvas.getContext){
            return;
        }
        //定义绘制对象
        var ctx = canvas.getContext('2d');

//定义一个数组存放小圆点
var circleArr=[];

//点透明度少于0 直接清除
              if(circle.opacity<=0){
                  circleArr.splice(i,1);
              }

ctx.beginPath();
              ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')';
              ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
              ctx.fill();
            }

},16);

setInterval(function () {
            //开始绘制圆点
            var circle = {};
            //坐标
            circle.x = Math.random() * canvas.width;
            circle.y = Math.random() * canvas.height;

circle.r = 10; //半径
            circle.red = Math.random() * 255;
            circle.green = Math.random() * 255;
            circle.blue = Math.random() * 255;
            circle.opacity = 1; //透明度

circleArr.push(circle);
},50)

})()

希望对您有用

canvas画布中实现气泡相关推荐

最新文章

热门文章

canvas画布中实现气泡

在画布中实现气泡

第一步:先定义一个 500*500的画布 <canvas id="wrap" width="500" height="500" ></canvas>

第二步:给画布设置样式

<style> *{ margin: 0; padding: 0; } html,body{

background: #cccccc; } #wrap{ background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style>

第三步: js代码

<script type="text/javascript"> (function () { //获取画板 var canvas = document.querySelector('#wrap');

if(!canvas.getContext){ return; } //定义绘制对象 var ctx = canvas.getContext('2d');

//定义一个数组存放小圆点 var circleArr=[];

//进行绘制 //开启定时器 setInterval(function () { //清除小圆点 ctx.clearRect(0,0,canvas.width,canvas.height); for (var i = 0; i < circleArr.length; i++) { var circle = circleArr[i]; circle.r ++; //半径不断变大 circle.opacity -=0.01;//透明度不短减小

//点透明度少于0 直接清除 if(circle.opacity<=0){ circleArr.splice(i,1); }

ctx.beginPath(); ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')'; ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2); ctx.fill(); }

},16);

setInterval(function () { //开始绘制圆点 var circle = {}; //坐标 circle.x = Math.random() * canvas.width; circle.y = Math.random() * canvas.height;

circle.r = 10; //半径 circle.red = Math.random() * 255; circle.green = Math.random() * 255; circle.blue = Math.random() * 255; circle.opacity = 1; //透明度

circleArr.push(circle); },50)

})()

希望对您有用

canvas画布中实现气泡相关推荐

最新文章

热门文章

第一步:先定义一个 500*500的画布
<canvas id="wrap" width="500" height="500" ></canvas>

<style>
*{
margin: 0;
padding: 0;
}
html,body{

background: #cccccc;
}
#wrap{
background: #fff;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>

<script type="text/javascript">
(function () {
//获取画板
var canvas = document.querySelector('#wrap');

if(!canvas.getContext){
return;
}
//定义绘制对象
var ctx = canvas.getContext('2d');

//定义一个数组存放小圆点
var circleArr=[];

//进行绘制
//开启定时器
setInterval(function () {
//清除小圆点
ctx.clearRect(0,0,canvas.width,canvas.height);
for (var i = 0; i < circleArr.length; i++) {
var circle = circleArr[i];
circle.r ++; //半径不断变大
circle.opacity -=0.01;//透明度不短减小

//点透明度少于0 直接清除
if(circle.opacity<=0){
circleArr.splice(i,1);
}

ctx.beginPath();
ctx.fillStyle = 'rgba('+circle.red+','+circle.green+','+circle.blue+','+circle.opacity+')';
ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2);
ctx.fill();
}

setInterval(function () {
//开始绘制圆点
var circle = {};
//坐标
circle.x = Math.random() * canvas.width;
circle.y = Math.random() * canvas.height;

circle.r = 10; //半径
circle.red = Math.random() * 255;
circle.green = Math.random() * 255;
circle.blue = Math.random() * 255;
circle.opacity = 1; //透明度

circleArr.push(circle);
},50)