用过canvas的人都知道，在这个画布上面可以制作各种各样的动画效果，想必大家都用过这个。

晒晒刚刚用这个做的一个demo：

现在来画一个圆看看:

demo.js:

var can,ctx,count = 1,w,h,i;

can = document.getElementById('can');

ctx = can.getContext('2d');

w = document.body.scrollWidth;

h = document.body.scrollHeight;

can.setAttribute('width',w)

can.setAttribute('height',h)

 // angle for

    angle = Math.PI/2 * count;

    x = w/2 + Math.sin(angle);

    y = h/2 + Math.sin(angle);

    ctx.beginPath();

    ctx.arc(x,y ,h/6,0,2*Math.PI);

    ctx.fillStyle = '#3ff';

    ctx.strokeStyle = '#333';

    ctx.stroke();

    ctx.fill();

对应的.html：

<!DOCTYPE html>

<html >

  <head>

    <meta charset="UTF-8">

    <title>demo</title>

  </head>

  <body bgColor='#000'>

    <canvas id="can"></canvas>

    <script src="js/demo.js"></script>

  </body>

</html>

这个太单调了，我们可以把angle这段代码循环一下，看看demo是什么效果？

demo.js:

for( i = 0; i <count;i++){

    angle = Math.random(Math.PI/2 * i);

    x = (w/3)*Math.sin(angle);

    y = h/3 + (1 + angle)*Math.sin(angle);

    ctx.beginPath();

    ctx.arc(2*x,y,h/8,0,2*Math.PI);

    ctx.fillStyle = '#3ff';

    ctx.strokeStyle = '#000';

    ctx.stroke();

    ctx.fill();

}

不想那么单调放水平，也可以这样有弧度：

有了它以后想做什么(神马)都可以! -/-

使用canvas能画各种各样的东西的更多相关文章

  1. （转）第02节：在Canvas上画简单的图形

    我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...

  2. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

  3. 根据多个点使用canvas贝赛尔曲线画一条平滑的曲线

    众所周知想用canvas画一条曲线我们可以使用这些函数: 二次曲线:quadraticCurveTo(cp1x, cp1y, x, y) 贝塞尔曲线:bezierCurveTo(cp1x, cp1y, ...

  4. Canvas 如何画一个四分之一圆

    转: Canvas 如何画一个四分之一圆 HTML: Document JS: var c = document.getElementById('ctx') var ctx = c.getContex ...

  5. 使用canvas 代码画小猪佩奇

    最近不是小猪佩奇很火嘛!!! 前几天 在知乎 看见了别人大佬用python写的 小猪佩奇,  顿时想学 ,可是 自己 没学过python(自己就好爬爬图片,,,,几个月没用 又丢了) 然后 就想画一个 ...

  6. canvas案例——画时钟

    基本思路,先画一个200半径的圆 ctx.arc(250,250,200,0,2*Math.PI); 然后再画时分刻度,可以先利用translate变化坐标到圆的中心点,然后再通过rotate旋转 / ...

  7. 用CSS3和Canvas来画网格

    我们经常使用一些excel表格来处理数据,在html中,我们可以用table来制成表格.今天来看一下一些不同的方法. 方法一:使用CSS3的background的linear-gradient属性 l ...

  8. canvas，画个纸飞机

    在浏览器中的效果图: 代码如下: 主要练习下用javascript在canvas画画,至于能不能画的好看,可能看美术细菌,嘿嘿.10分钟搞定

  9. canvas学习-----画直线

    画布 1.添加canvas标签  可以通过CSS或者JS来设置canvs标签的width,height;Ps: <canvas id="cvs"></canvas ...

随机推荐

  1. 方法名的string类型应用（补）

    string strClass = "stringConvertClass.test"; //命名空间+类名 string strMethod = "Method&quo ...

  2. C++ windows 多线程 互斥锁

    #include <opencv2/core/version.hpp> #include <opencv2/calib3d/calib3d.hpp> #include < ...

  3. 性能测试之Jmeter学习（三）

    一.Jmeter执行顺序规则: 元件执行顺序的规则很简单,在同一作用域名范围内,测试计划中的元件按照如下顺序执行. (1)配置元件(config elements ) (2)前置处理程序(Per-pr ...

  4. python读写mysql总结

    一.MySQLdb包的安装 1. 在win环境下,下载MySQL-python-1.2.3,有两种方式: (1) 下载src源码.tar.gz(这个源码需要build编译再安装.egg包(当于.jar ...

  5. TypeScript完全解读(26课时)_12.TypeScript完全解读-高级类型(1)

    12.TypeScript完全解读-高级类型(1) 高级类型中文网的地址:https://typescript.bootcss.com/advanced-types.html 创建新的测试文件 ind ...

  6. Lightoj1037【状压DP】

    题意: 给出n个怪的生命值,然后n个怪手里有一把枪,给出n*n的矩阵代表第i个怪对第j个怪的伤害值: 现在让你去干掉n个怪,只能平A使怪扣一滴血,干掉目标后, 可以把这个目标的武器拿进口袋然后用这个武 ...

  7. Unity Prefabs

    通过上一期的学习,我们知道为了如何向场景中添加一个物体.问题来了,如果需要对这个立方体进行修改应该怎么做呢?那我们肯定就得修改这段代码,能不能将立方体本身从我们的开发中单独提出来呢?这就涉及到我们今天 ...

  8. bzoj 3876: [Ahoi2014&Jsoi2014]支线剧情【有上下界有源汇最小费用最大流】

    每条边流量有下界有费用,很显然是有上下界有源汇最小费用最大流 连边(s,1,(0,inf),0),(i,t,(0,inf),0),表示从1出发inf次从每个点结束inf次 连边(i,j,(1,inf) ...

  9. 基础篇-psql帮助命令

    \? psql命令帮助 \h sql语句帮助 \?常用命令 1.默认  \d 后面不跟参数,则显示当前数据库所有的表 2. \d  表名  ,则显示这个表的定义 3.\d 索引名  ,显示索引的信息 ...

  10. get 和 post 请求的区别（转）

    转自 http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html http://www.nowamagic.net/librarys/ve ...