用过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. SSH框架搭建的时候遇到的问题

    1.spring-web.jar包问题:使用user libaries方式,识别不到,于是出现了下面问题 java.lang.ClassNotFoundException: org.springfra ...

  2. python模块datetime

    1. 日期输出格式化 datetime => string import datetime now = datetime.datetime.now() now.strftime('%Y-%m-% ...

  3. UVa 1627 Team them up! (01背包+二分图)

    题意:给n个分成两个组,保证每个组的人都相互认识,并且两组人数相差最少,给出一种方案. 析:首先我们可以知道如果某两个人不认识,那么他们肯定在不同的分组中,所以我们可以根据这个结论构造成一个图,如果两 ...

  4. 535. Encode and Decode TinyURL(rand and srand)

    Note: This is a companion problem to the System Design problem: Design TinyURL. TinyURL is a URL sho ...

  5. 让你头晕的VR头显，背后发生了什么？

    随着虚拟现实渐渐兴起,国内现在做虚拟现实的厂商也增多了起来.但是我经常听到有体验者向我表示:他戴上国外大厂诸如Oculus.Sony和Valve的VR头显的时候,体验十分出色,但是戴上国产的VR头显, ...

  6. 聪明的质监员（codevs 1138）

    题目描述 Description 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有n 个矿石,从1到n 逐一编号,每个矿石都有自己的重量wi 以及价值vi.检验矿产的流程是:见图   ...

  7. [Xcode 实际操作]九、实用进阶-(10)定位设备的使用

    目录:[Swift]Xcode实际操作 本文将演示定位设备的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //导入需要用到的定位 ...

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

    第三讲扩展库使用c++实现,在调用函数后,返回对象变量,perl 能正确使用所有对象成员 使用h2xs 命令生成初始文件 h2xs -A -n three_test 登录目录 cd three_tes ...

  9. Trie树（小）总结 By cellur925

    关于\(Trie\)树的详细介绍,还请移步这篇深度好文 基本操作 插入 void insert() { int p=0; int len=strlen(tmp+1); for(int i=1;i< ...

  10. 集成Activiti工作流的J2EE快速开发框架

    框架简介 enos款快速开发模块化脚手架,实现功能有系统模块:菜单管理.用户管理.角色管理,系统监控:系统日志.接口api.sql监控. 系统功能 系统管理:菜单管理.用户管理.角色管理 统一查询 p ...