JavaScript画圆

最新推荐文章于 2023-01-31 17:40:13 发布
最新推荐文章于 2023-01-31 17:40:13 发布
阅读量180 收藏
点赞数
分类专栏： javascript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uningabc/article/details/84478815
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<h2>draw circle</h2>
<form action="nonexist.asp">
颜色1：<input id="color1" name="color1" type="color"/>
颜色2：<input id="color2" name="color2" type="color"/>
<input id="startButton" name="startButton" type="button" value="开始" οnclick="start();"/>
<input id="endButton" name="endButton" type="button" value="停止" οnclick="end();"/>
</form>
<br/>
<canvas id="mc" width="400" height="280" style="border:1px solid black"></canvas>
<script language="JavaScript" type="text/javascript">
var canvas = document.getElementById('mc');
var ctx = canvas.getContext('2d');

var r=10;
var x=200;
var y=140;
var i=0;
var col = new Array();

var ind = 0;

function start(){
col[0]=color1.value;
col[1]=color2.value;
ttt=window.setInterval(drawCircle,200);
}

function end(){
window.clearInterval(ttt);
}

function drawCircle(){
var r_x=Math.cos(i)*50;
var r_y=Math.sin(i)*50;
ctx.beginPath();
ctx.arc(x+r_x, y+r_y, r, 0, Math.PI*2, true);
ctx.closePath();
ctx.fillStyle=col[ind];
ctx.fill();
i=i+Math.PI/6;
if(i>=Math.PI*2){
col[0]=color1.value;
col[1]=color2.value;
i=0;
ind=(ind+1)%2;
}
}

</script>
</body>
</html>
uningabc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript画圆代码
02-26
JS画圆代码，不是用画布实现，是纯代码通过 document.write('.')来实现的
使用 JavaScript 绘制圆
m0_63639281的博客
09-05 3943
使用 JavaScript 绘制圆
JS画圆
Cupid
06-29 1439
js画圆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
使用js实现画圆中圆
m0_50687157的博客
01-31 350
实现自动画圆，并移动圆心
JavaScript在网页中画圆的函数arc使用方法
10-23
主要介绍了JavaScript在网页中画圆的函数arc使用方法的相关资料,需要的朋友可以参考下
spaceGame:JavaScript 画布游戏
07-03
2. **绘图方法**：使用 `ctx` 对象提供的方法，如 `fillRect()` 绘制矩形，`beginPath()` 开始路径，`arc()` 画圆等。这些方法可以组合起来创建复杂的图形和场景。 3. **动画原理**：游戏中的动态效果通常通过...
game:游戏的 JavaScript 代码
07-13
例如，使用fillRect画矩形、beginPath和stroke画线，以及arc画圆等。 五、动画与帧率控制 游戏中的动画效果可以通过定时器（如setInterval或requestAnimationFrame）实现。requestAnimationFrame优化了动画性能，...
javascript经典特效---JavaScript绘图.rar
12-25
通过JavaScript，我们可以获取到这个Canvas元素的2D渲染上下文（`canvas.getContext('2d')`），这个上下文提供了大量的方法和属性，如`fillRect()`用于填充矩形，`strokeRect()`用于描边矩形，`beginPath()`开始一条...
基于js的坐标轴画圆和简单函数的示例代码
01-05
基于js的坐标轴画圆和简单函数的示例代码
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"
drawCircle方法：绘制圆形
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
12-22 2万+
drawCircle方法：绘制圆形 【功能说明】该方法用于在画布上绘制圆形，通过指定圆形圆心的坐标和半径来实现。该方法是绘制圆形的主要方法，同时也可以通过设置画笔的空心效果来绘制空心的圆形。 【基本语法】public void drawCircle (float cx, float cy, float radius, Paint paint) 参数说明 cx：圆心的x坐标。
js canvas 绘制任意弧度的圆
m0_48488612的博客
08-17 489
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
three.js 绘制圆弧（圆）
yinge0508的博客
02-17 4285
先看效果： 该效果是通过 ArcCurve渲染圆或者圆弧，参数：ArcCurve( x, y, r, srange, erange ); x,y 圆弧坐标原点, r：圆弧半径 ; srange, erange：圆弧起始角度； // 一些教程中介绍说 ArcCurve是 EllipseCurve 的别名，查看参数，发现两者类似 //和椭圆曲线 EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRo
js在web页面上绘制圆形
热门推荐
叉叉哥的BLOG
05-12 2万+
在web页面上，想要画出一个圆形，方法有很多，SVG、canvas都可以绘图。但是本文不采用这两种方式，而是使用一个div。div一般是一个矩形，但是如果设置一个圆角样式border-radius就可以将div变成圆形。用jQuery实现这样一个交互：用鼠标在画布上按下左键拖动的方式来绘制圆，圆心是鼠标按下的位置，鼠标左键松开圆绘制完成。
JS公式实例一：画圆
dolin88的博客
04-25 7114
已知条件：圆点坐标（x0,y0）,半径r,角度degree计算：Math.sin(x) x的正弦值，返回值在-1.0到1.0之间；Math.cos(x) x的余弦值，返回值在-1.0到1.0之间；x弧度的计算公式为，2*PI/360*degree小球圆形运动轨迹：&lt;style&gt; #wrap{position: relative;margin:40px auto;width: 4...
html 用函数画圆,JavaScript在网页中画圆的函数arc使用方法
weixin_42509569的博客
06-25 1131
一、arc所需要的参数设置arc(x, y, radius, startAngle, endAngle, counterclockwise);其中x,y,radius都很容易理解，那么重点说说startAngle,endAngle和counterclockwise三个参数！二、arc参数详解1，startAngle和endAngle分别指圆开始的角度和结束的角度，手册上面说的是开始的角度为0，结束...
canvas动态画圆
最新发布
12-03
以下是使用canvas和JavaScript实现动态画圆的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas动态画圆</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = canvas.width / 2; var y = canvas.height / 2; var radius = 75; var endPercent = 101; var curPerc = 0; var counterClockwise = false; var circ = Math.PI * 2; var quart = Math.PI / 2; context.lineWidth = 10; context.strokeStyle = '#ad2323'; context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 10; context.shadowColor = '#656565'; function animate(current) { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false); context.stroke(); curPerc++; if (curPerc < endPercent) { requestAnimationFrame(function () { animate(curPerc / 100) }); } } animate(); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值