利用canvas实现的JS画圆圈特效代码

最新推荐文章于 2024-04-17 08:05:26 发布
最新推荐文章于 2024-04-17 08:05:26 发布
阅读量3k 收藏
点赞数
分类专栏： js
<body>


 <canvas id="myCanvas" width="1200"  height="300" style="border:1px solid #333;">
     您的浏览器不支持canvas！
 </canvas>
 <button οnclick="actiondo()">圆</button>
 <script> 
         var canvas = document.getElementById('myCanvas'),width = canvas.width,height = canvas.height,ctx = canvas.getContext('2d');  
         var step,startAngle,endAngle,add=Math.PI*2/100;
         ctx.shadowOffsetX = 0; // 设置水平位移
         ctx.shadowOffsetY = 0; // 设置垂直位移
         ctx.shadowBlur = 10; // 设置模糊度
         ctx.lineWidth = 1.0; 
         counterClockwise = false;
         var x;
         var y;
         var radius;
         var animation_interval = 20,n = 100;
         var varName;


         function actiondo(){
                 step=1;
                 startAngle=0;
                 ctx.strokeStyle ='#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//圆圈颜色                
                 ctx.shadowColor = '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6); // 设置阴影颜色
                 //圆心位置
                 x=Math.floor(Math.random()*1000+100);
                 y=Math.floor(Math.random()*100+100);
                 radius = Math.floor(Math.random()*50+50);                
                varName= setInterval(animation, animation_interval);
         }
 var animation = function () {  
     if (step <= n) {  
         endAngle = startAngle + add ;  
         drawArc(startAngle, endAngle); 
                 startAngle = endAngle;
         step++;  
     } else {  
         clearInterval(varName);  
     }  
         
 };
 function drawArc(s, e) {  
     ctx.beginPath();   
     ctx.arc(x, y, radius, s, e, counterClockwise);  
         ctx.lineWidth = 1.0;        
         ctx.stroke();  
 }  
 </script>
 </body>
山鹰的天空
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas-绘制圆形
nicecode
07-27 5225
角度与弧度的js表达式:radians(弧度)=(deg*Math.PI/180)。 canvas绘制圆形 arc(x, y, radius, startAngle, endAngle, anticlockwise) ​ 画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束， ​ 按照anticlockwise给定的方向（默认为顺时针）来生成。 ​ ture：逆时针 ​ false: 顺时针 ​ x,y为绘制圆弧所在圆上的圆心坐标
html5给图片加圆圈,js+canvas制作的用鼠标绘制圆形图案，可叠加产生不同色
weixin_32667433的博客
05-30 752
脚本代码(For Alixixi.com)如下:Documentbody{font-family: 微软雅黑;}canvas{display:block;border:1px dotted skyblue;}HTML5[鼠标绘制圆形]鼠标拖动绘制图形var nimo={};nimo.queue=[];nimo.storage={};//用于存储x坐标、y坐标、半径、背景色、边框色的存储器。nimo...
动态背景线条，鼠标移动线条汇聚---背景特效
热门推荐
青菜馒头web前段
10-19 1万+
html代码：<canvas></canvas>css代码：html, body { background: #000; margin: 0; }canvas { position: absolute; }js代码：$(function(){ var canvas = document.querySelector('canvas'), ctx = canvas.getCo
Delphi Canvas 填充 区域 图形
10-01
Delphi Canvas 填充区域图形，delphi全套源码，点击按钮，在窗口界面上画出一个蓝边红心的方框！
Flutter 画笔(Paint)、drawCircle(绘制圆)、PaintingStyle
最新发布
2401_84123201的博客
04-17 572
Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。所以：贵在坚持！上面分享的字节跳动公司2021年的面试真题解析大全，笔者还把一线互联网企业主流面试技术要点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。【Android高级架构视频学习资源】Android部分精讲视频领取学习后更加是如虎添翼！进军BATJ大厂等（备战）！
java canvas 画圆_js+canvas简单绘制圆圈的方法
weixin_36213934的博客
02-28 704
本文实例讲述了js+canvas简单绘制圆圈的方法。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">canvas画圆圈function drawCircle(id){var canvas = document.getElementById(id);i...
JS-canvas 渐变 绘制圆
态度决定一切
09-12 1678
菜鸟教程(runoob.com) 您的浏览器不支持 HTML5 canvas 标签。 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(50,50,10,50,50,30); grd.addColorStop(0.1,"#fff"
H5 Canvas粒子组成圆圈特效特效代码
03-20
在本文中，我们将深入探讨如何使用HTML5 Canvas技术来创建一个粒子组成的圆圈特效，以及相关的3D旋转动画。Canvas是HTML5中的一个重要元素，它提供了动态图形绘制的能力，允许开发者通过JavaScript直接在网页上进行...
圆圈滤镜泡泡动画Canvas特效
07-24
"圆圈滤镜泡泡动画Canvas特效"就是利用Canvas API创建的一种视觉效果，它通过JavaScript编程实现了一种动态的、不规则的圆圈泡泡动画，这些圆圈泡泡会在画布上逐渐变大然后消失，为网页增添了一种引人入胜的视觉体验...
H5 Canvas彩色圆圈旋转动画特效特效代码
03-20
综上所述，"H5 Canvas彩色圆圈旋转动画特效特效代码"涉及到HTML5 Canvas的图形绘制、CSS3动画和SVG图形的结合应用，以及JavaScript的事件处理和动画控制，为用户提供了一种吸引人的视觉效果和交互体验。通过学习这些...
H5 Canvas彩色圆圈旋转动画特效
04-25
在本文中，我们将深入探讨如何实现“H5 Canvas彩色圆圈旋转动画特效”。这个特效结合了CSS3 Animation属性和SVG技术，为网页交互提供了一种动态且吸引人的加载动画效果。这种特效通常用于按钮点击后展示加载状态，给...
jsp html网页特效大全,很全的各种特效和框架
05-30
jsp html网页特效大全,很全的各种特效和框架,想要的特效基本上都有
HTML5 Canvas圆形旋转加载动画特效
06-11
一组简单扁平风格的HTML5 Canvas圆形旋转加载动画特效，圆环转动网页加载动画，包含6种样式。
canvas——绘制弧、圆形、饼状图
sleepwalker_1992的专栏
06-04 7362
1、绘制圆形（arc) 概述：arc() 方法创建弧/曲线（用于创建圆或部分圆）。 * 语法：ctx.arc(x , y, r, sAngle, eAngle, counterclockwise); * arc: 弧（度）弧形物；天穹 英 [ɑːk] 美 [ɑrk] * counter 反击，还击；反向移动，对着干；反驳，回答 ['kaʊntə] 美 ['...
使用canvas生成一个圆形的图片
现在学习也不晚
11-07 1万+
之前发现在网上无法找到相关的内容，找的内容测试也发现有bug。遂，整理思路，自己研究一个可以实现效果的功能。 具体思路就是：首先获取到图片的资源，如果使用img加载的，那一定要等img触发onload以后处理。 我使用的图片是等宽高的图片，获取到图片资源以后，额外的创建一个canvas，将图像使用drawImage方法画到画布上，我们在这个canvas上面处理图像。通过canvas对象的conte...
canvas画圆形图片
沫沫酱
05-02 7880
效果图：实现环境在微信小程序中参考网站https://www.jianshu.com/p/9a6ee2648d6f先封装circleImg（）方法 circleImg: function (ctx, img, x, y, r){ ctx.save(); var d = 2 * r; var cx = x + r; var cy = y + r; ctx.beginP...
js canvas 绘制任意弧度的圆
m0_48488612的博客
08-17 487
canvas 绘制任意弧度圆 demo图 save和restore方法 ctx.strokeStyle = "red"; // 线条色为red // 使用save ctx.save(); // 局部属性,只在下一个restore之中有效 ctx.strokeStyle = "blue"; // 线条色为red ctx.restore(); // 在使用strokeStyle为red 代码 <!DOCTYPE html> <html lang="en"> <head&gt
HTML5 Canvas 开发 绘图方法整理 【四、canvas曲线图形 / 圆形】
freedomVenly的博客
02-14 1431
其实在Canvas 中的基本图形就只有两个 ： 直线图形 和 曲线图形 。 圆形也算是在曲线图形中，一般画圆的时候必须配套使用 beginPath() 和 closePath()，圆形属于一个“闭合图形”，先在画布上开辟一个路径，画完以后结束路径。 语法： ctx.beginPath(); ctx.arc(x,y,半径,开始角度,结束角度, 是否逆时针绘制); 默...
使用 JavaScript 绘制圆
m0_63639281的博客
09-05 3941
使用 JavaScript 绘制圆
html银河特效编码,利用HTML5实现Canvas绘画银河特效
05-26
好的，让我为您介绍一下HTML银河特效的编码和如何使用HTML5实现Canvas绘画银河特效。 首先，我们需要创建一个HTML页面，并在其中引用一个Canvas元素。然后，我们需要在JavaScript中编写代码，以实现银河特效的绘画和动画效果。 具体实现步骤如下： 1. 在HTML页面中创建一个Canvas元素，设置其宽度和高度，并为其设置一个ID，以便在JavaScript中引用它。 ```html <canvas id="myCanvas" width="800" height="600"></canvas> ``` 2. 在JavaScript中，获取Canvas元素的上下文，并设置一些绘画参数，例如线条颜色和宽度。 ```javascript var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "white"; ctx.lineWidth = 1; ``` 3. 编写一个名为“drawStar”的函数，该函数将绘制一个星星形状，并随机生成其位置和大小。该函数将在每一帧中被调用，以创建银河特效的动画效果。 ```javascript function drawStar() { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var size = Math.random() * 3; ctx.beginPath(); ctx.moveTo(x, y - size); ctx.lineTo(x + size, y); ctx.lineTo(x, y + size); ctx.lineTo(x - size, y); ctx.lineTo(x, y - size); ctx.stroke(); } ``` 4. 创建一个名为“animate”的函数，该函数将在每一帧中被调用，并在Canvas上绘制星星。该函数还将使用setTimeout方法，在一定的时间间隔后再次调用自身，以创建动画效果。 ```javascript function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < 30; i++) { drawStar(); } setTimeout(function() { requestAnimationFrame(animate); }, 100); } ``` 5. 最后，在JavaScript中调用“animate”函数，即可开始绘制银河特效的动画。 ```javascript animate(); ``` 以上就是使用HTML5 Canvas绘制银河特效的基本步骤，您可以根据自己的需要对其进行更多的定制和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值