用过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. Asset Catalog Help (十一)---Removing Images and Sets

    Removing Images and Sets Optimize the size of an asset catalog by removing unused images or sets. 通过 ...

  2. tcp/ip详解(转)

    与UDP不同的是,TCP提供了一种面向连接的.可靠的字节流服务.TCP协议的可靠性主要有以下几点保障: (1)应用数据分割成TCP认为最适合发送的数据块.这部分是通过“MSS”(最大数据包长度)选项来 ...

  3. c++中ctype常用函数总结(isprint isblank..)

    1 判断是否是二十六得字母中其中之一 isalpha(); #include <stdio.h> #include <ctype.h> #include <iostrea ...

  4. Git之常用的命令操作

    set LESSCHARSET=utf-8 git设置文件名大小写敏感 git branch -rgit checkout 'TestMaster'git checkout -b 'TestMaste ...

  5. memcached 命令详解

    memcached::get(); //查找key的值: 例:$mem->get($key): memcached::add() ; //添加,当key存在时,false,当key不存在则执行 ...

  6. IT兄弟连 JavaWeb教程 Servlet会话跟踪 Session优缺点

    ●  数据存储在服务器,安全. ●  session能保存Object类型数据,也就是说能存储任意数据. ●  可存储的数据大小,理论上是无限制的. ●  因为数据存储在服务器端,当用户比较多时,会占 ...

  7. 第三章 “我要点爆”微信小程序云开发之点爆方式页面和爆炸之音页面制作

    点爆方式选择页面制作 在app.json中配置页面路径增加selectbao点爆方式选择,编译创建页面文件,点爆方式选择页面通过单选按钮组选择跳转到相应的点爆页面. <view class=&q ...

  8. perl C/C++ 扩展（四）

    在前面三篇博客中,我们了解到如何使用c/c++ 扩展自己的perl 库,但是博主在学习过程中,对动态库或静态库的加载不是十分了解,后来自己又细挖一下.后来就有了这篇博文,再后来,没有再后来了,囧!! ...

  9. native-echarts 在安卓上无法显示出来

    1.native-echarts 的配置是百度echarts 2.模拟器上试了很多次都显示不出来(具体不清楚,我的是这样) 3.真机测试可以显示图表,以下是配置: a.将node_modules\na ...

  10. E. Cyclic Components (DFS)（Codeforces Round #479 (Div. 3)）

    #include <bits/stdc++.h> using namespace std; *1e5+; vector<int>p[maxn]; vector<int&g ...