canvas画布内部重复画圆
<!DOCTYPE html>
<html>
<head>
<title>canvas example</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="canvas" width="600px" height="600px" style="background: deeppink;"></canvas> <script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
const WIDTH=canvas.width;
const HEIGHT=canvas.height;
function calculate(){ var r=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
var x,y,R;
while(true){
x=WIDTH*Math.random();
y=HEIGHT*Math.random();
R=Math.min(Math.random()*HEIGHT,Math.random()*WIDTH);
if(x+R<=WIDTH&&y+R<=HEIGHT&&x>=R&&y>=R){
break;
}
}
context.beginPath();
context.strokeStyle="rgb("+r+","+g+","+b+")";
context.arc(x,y,R,0,Math.PI*2,false);
context.stroke();
setTimeout('calculate()',500);
}
calculate(); </script>
</body>
</html>
效果图如下所示:
canvas画布内部重复画圆的更多相关文章
- canvas入门(画圆)
1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas> 接着需 ...
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...
- 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
- canvas之画圆
<canvas id="canvas" width="500" height="500" style="background ...
- Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))
Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...
- Canvas 画圆
原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...
- 用canvas画布画一个画板
前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...
- canvas画圆又毛边
canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en" ...
- 【HTML5】Canvas画布
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
随机推荐
- day19常用模块2
常用模块21 shelve模块 也是一种序列化方式 使用方法 1.open sl = shelve.open("shelvetest.txt") ...
- JVM总结-反射
反射是 Java 语言中一个相当重要的特性,它允许正在运行的 Java 程序观测,甚至是修改程序的动态行为. 举例来说,我们可以通过 Class 对象枚举该类中的所有方法,我们还可以通过 Method ...
- Structs 2 session 学习
后台获取 值类型 request.getSession().setAttribute("username", user.getUserName()); 对象类型 reque ...
- uva-270-排序
题意:很多个点,问,最多有多少个点在同一条直线上 #include <algorithm> #include <iostream> #include <string> ...
- 键值对操作 之 combineByKey
combineByKey( createCombiner,mergeValue,mergeCombiners,partitioner) combineByKey() 是最为常用的基于键进行聚合的函数. ...
- tensorflow实战系列(二)TFRecordReader
前面写了TFRecordWriter的生成.这次写TFRecordReader. 代码附上: def read_and_decode(filename): #根据文件名生成一个队列 fil ...
- 功能测试-UI测试思考点
界面是否美观 元素大小 界面元素是否对齐方式统一 界面字体属性是否正确 界面链接及触发动作( 链接的地址是否正确,不允许存在死链的情况 链接打开方式,当前页面还是新开页面 鼠标点击后的颜色是否美观,不 ...
- chattr 改变文件、目录属性 (chmod、passwd等涉及文件修改的命令提示Operation not permitted)
与chmod这个命令相比,chmod只是改变文件的读写.执行权限,更底层的属性控制是由chattr来改变的. lsattr查看文件或目录属性 chattr命令的用法:chattr [ -RVf ] [ ...
- 关于webstorm链接不上SVN的解决办法
使用WEBSTROM上传代码是很方便的,但是通过它调用SVN时,经常会出现问题,我在使用它调用TortoiseSVN时就出现了一些问题,好在问题已经解决,现在把解决办法分享给大家: 首先,看看,安装时 ...
- input点击后的 默认边框去除
转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...