用过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. Bootstrap表格分页（一）

    最近在学习Bootstrap的分页,有一种方法用“Bootstrap-Paginator”的东西来做. 先预览一下: 为了能够局部刷新页面,我创建了一个PartialView 页面的HTML部分如下: ...

  2. MySql用户配置

    数据库:MySQL5.7 注意事项: MySQL5.7 mysql.user 表没有 password字段 改 authentication_string: 一.前言 我们在创建数据库和权限的时候才用 ...

  3. 51nod1267(双指针)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1267 题意:中文题诶- 思路:双指针 求a+b+c+d=0,令 ...

  4. IT兄弟连 JavaWeb教程 JSP访问JavaBean

    在JSP网页中,既可以通过程序代码来访问JavaBean,也可以通过特定的JSP标签来访问JavaBean.采用后一种方法,可以减少JSP网页中的程序代码,使他更接近与HTML页面.下面介绍访问Jav ...

  5. hyperledger fabric 1.0.5 分布式部署 （一）

    环境是个人虚拟机ubuntu 16.04 64 位版本 前期用户需要先安装好:gcc.g++.git 软件 安装 golang 首先给环境安装一个 go 语言环境,版本最好在1.8 以上 golang ...

  6. JS与JQ的对比与提高

    来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...

  7. Windows服务使用Windsor容器

    该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. Windsor是ABP框架自带的IOC容器. 关于什么是IOC,你可以Bing或者Go ...

  8. MyBatis逆向工程代码的生成以及使用详解(持续更新)

    逆向工程简介什么是逆向工程:        mybatis需要程序员自己编写sql语句,mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.ma ...

  9. Java程序员都应该去使用一下这款强大的国产工具类库

    这不是标题党,今天给大家推荐一个很棒的国产工具类库:Hutool.可能有很多朋友已经知道这个类库了,甚至在已经在使用了,如果你还没有使用过,那不妨去尝试一下,我们项目组目前也在用这个.这篇文章来简单介 ...

  10. 转：php中的匿名函数和闭包(closure)

    一:匿名函数 (在php5.3.0 或以上才能使用) php中的匿名函数(Anonymous functions), 也叫闭包函数(closures), 允许指定一个没有名称的函数.最常用的就是回调函 ...