用过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. 【网络爬虫】【java】微博爬虫（四）：数据处理——jsoup工具解析html、dom4j读写xml

    之前提到过,对于简单的网页结构解析,可以直接通过观察法.手工写正则解析,可以做出来,比如网易微博.但是对于结构稍微复杂点的,比如新浪微博,如果还用正则,用眼睛一个个去找,未免太麻烦了. 本文介绍两个工 ...

  2. UVa 11825 Hackers' Crackdown (状压DP)

    题意:给定 n 个计算机的一个关系图,你可以停止每台计算机的一项服务,并且和该计算机相邻的计算机也会终止,问你最多能终止多少服务. 析:这个题意思就是说把 n 台计算机尽可能多的分成一些组,使得每组的 ...

  3. sublime入门文章

    http://www.iplaysoft.com/sublimetext.html http://code-tech.diandian.com/post/2012-07-18/40030958791 ...

  4. 使用Try.NET创建可交互.NET文档

    原文地址:Create Interactive .NET Documentation with Try .NET 原文作者:Maria 译文地址:https://www.cnblogs.com/lwq ...

  5. 企业级SpringBoot与Dubbo的使用方式

    企业级SpringBoot与Dubbo的使用方式 SpringBoot越来越热门以至于达到满大街可见的程度,而Dubbo这个基于二进制的微服务框架又捐献给Apache孵化,如果不会如何使用那么是不是很 ...

  6. jpa使用原生SQL查询数据库like的用法

    jpa使用like查询,需要拼接字符串,如下 oracle用法: //dao层代码 @Query(value = "SELECT * FROM TABLENAME WHERE USER_NA ...

  7. jzoj5986. 【WC2019模拟2019.1.4】立体几何题 （权值线段树）

    传送门 题面 题解 不难看出每个点的大小为行列限制中较小的那一个(因为数据保证有解) 对于行的每个限制,能取到的个数是列里限制大于等于它的数的个数,同理,对于列是行里大于它的个数(这里没有等于,为了避 ...

  8. 浅谈H5技术

    1.什么是H5:HTML5将成为HTML.XHTML以及HTML  DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...

  9. E.华华给月月准备礼物

    链接:https://ac.nowcoder.com/acm/contest/392/E 题意: 二月中旬虐狗节前夕,华华决定给月月准备一份礼物.为了搭建礼物的底座,华华需要若干根同样长的木棍.华华手 ...

  10. mac下启动lnmp的方式

    mac air 系列由于各种原因使得我不得不重启,重启后发现lnmp全部都关闭了, nginx: sudo nginx   php-fpm: sudo php-fpm mysql: cd /usr/l ...