<!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画布内部重复画圆的更多相关文章

  1. canvas入门(画圆)

    1.想在H5上画一个canvas,必须在页面上你需要的地方添加canvas标签, <canvas id="myCanvas"></canvas>   接着需 ...

  2. 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  3. 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  4. canvas之画圆

    <canvas id="canvas" width="500" height="500" style="background ...

  5. Html5学习2(Html表格、Html列表、Html5新元素、Canvas (坐标、路径、画圆、文本、渐变、图像))

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  6. Canvas 画圆

    原文地址:http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b --------------------------------------- ...

  7. 用canvas画布画一个画板

    前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DO ...

  8. canvas画圆又毛边

    canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en" ...

  9. 【HTML5】Canvas画布

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

随机推荐

  1. day19常用模块2

    常用模块21 shelve模块  也是一种序列化方式    使用方法        1.open     sl = shelve.open("shelvetest.txt")   ...

  2. JVM总结-反射

    反射是 Java 语言中一个相当重要的特性,它允许正在运行的 Java 程序观测,甚至是修改程序的动态行为. 举例来说,我们可以通过 Class 对象枚举该类中的所有方法,我们还可以通过 Method ...

  3. Structs 2 session 学习

    后台获取 值类型  request.getSession().setAttribute("username", user.getUserName());  对象类型   reque ...

  4. uva-270-排序

    题意:很多个点,问,最多有多少个点在同一条直线上 #include <algorithm> #include <iostream> #include <string> ...

  5. 键值对操作 之 combineByKey

    combineByKey( createCombiner,mergeValue,mergeCombiners,partitioner) combineByKey() 是最为常用的基于键进行聚合的函数. ...

  6. tensorflow实战系列(二)TFRecordReader

    前面写了TFRecordWriter的生成.这次写TFRecordReader. 代码附上: def read_and_decode(filename):    #根据文件名生成一个队列    fil ...

  7. 功能测试-UI测试思考点

    界面是否美观 元素大小 界面元素是否对齐方式统一 界面字体属性是否正确 界面链接及触发动作( 链接的地址是否正确,不允许存在死链的情况 链接打开方式,当前页面还是新开页面 鼠标点击后的颜色是否美观,不 ...

  8. chattr 改变文件、目录属性 (chmod、passwd等涉及文件修改的命令提示Operation not permitted)

    与chmod这个命令相比,chmod只是改变文件的读写.执行权限,更底层的属性控制是由chattr来改变的. lsattr查看文件或目录属性 chattr命令的用法:chattr [ -RVf ] [ ...

  9. 关于webstorm链接不上SVN的解决办法

    使用WEBSTROM上传代码是很方便的,但是通过它调用SVN时,经常会出现问题,我在使用它调用TortoiseSVN时就出现了一些问题,好在问题已经解决,现在把解决办法分享给大家: 首先,看看,安装时 ...

  10. input点击后的 默认边框去除

    转自 http://blog.sina.com.cn/s/blog_9f1cb4670102v47g.html css文件里加句话:*:focus { outline: none; } 或 input ...