基于html5绘制圆形多角图案


Posted in HTML / CSS onApril 21, 2016

先看看最简单的效果图:

基于html5绘制圆形多角图案

代码如下:

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById('my'), ctx = canvas.getContext('2d');   
  2. setInterval(

    function(){   
  3. ctx.clearRect(0,0,400,400);   

  4. ctx.save();   

  5.   ctx.translate(200,200);   

  6. var ci =90, pi = Math.PI / ci, x1 = 100, y1 =0, x2 =0, y2 =0, x3 =0, y3 =0;   
  7. ctx.beginPath();   

  8. for(var i = ci *2; i >0; i--){   
  9.   

    ctx.rotate(pi);   

  10. ctx.moveTo(x1,y1);   

  11. y2 = x1 * Math.sin(pi);   

  12. x2 = x1 * Math.cos(pi);   

  13. x3 = (x1 - x2) /2+ x2 +10+ Math.random() *20;   

  14. y3 = y2 /2;   

  15. ctx.lineTo(x3,y3);   

  16. ctx.lineTo(x2,y2);   

  17. }   

  18.   ctx.stroke();   

  19. ctx.restore();   

  20. },100);  

在上面多角形的基础上进一步之后为:

基于html5绘制圆形多角图案

代码如下:

JavaScript Code复制内容到剪贴板
  1. var canvas = document.getElementById('my'), ctx = canvas.getContext('2d'), r =10;   
  2.   

    setInterval(

    function(){   
  3.   

    ctx.clearRect(0,0,400,400);   

  4.   

    ctx.save();   

  5.  

     ctx.translate(200,200);   

  6.    var grad = ctx.createRadialGradient(0,0,0,0,0,r+20);   
  7.  

     grad.addColorStop(0.2,

    'white');   
  8.  

     grad.addColorStop(0.7,

    'yellow');   
  9.     grad.addColorStop(0.8,

    'orange');   
  10.  

     ctx.beginPath();   

  11.   ctx.fillStyle = grad;   

  12.   ctx.arc(0,0,r,0,Math.PI*2,

    true);   
  13.   ctx.fill();   

  14. var ci =90, pi = Math.PI / ci, x2 =0, y2 =0, x3 =0, y3 =0;   
  15.  

     x1 =100;   

  16.   

    y1 =0;   

  17.   

    ctx.beginPath();   

  18.    for(var i = ci *2; i >0; i--){   
  19.   

    ctx.rotate(pi);   

  20.   

    ctx.moveTo(r,0);   

  21.   

    y2 = r * Math.sin(pi);   

  22.   

    x2 = r * Math.cos(pi);   

  23.   
  24.   

    x3 = (r - x2) /2+ x2 +10+ Math.random() *20;   

  25.   

    y3 = y2 /2;   

  26.   
  27.   

    ctx.lineTo(x3,y3);   

  28.   

    ctx.lineTo(x2,y2);   

  29.   

    }   

  30.   

    ctx.fill();   

  31.   

    ctx.restore();   

  32.   

    r <=100&& (r +=2);   

  33.  

    },100);   

  34.   

以上就是本文的全部内容,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
css3 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3 :not()选择器实现最后一行li去除某种css样式
Oct 19 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
Jan 27 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 #HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 #HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 #HTML / CSS
整理HTML5移动端开发的常用触摸事件
Apr 15 #HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 #HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 #HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 #HTML / CSS
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python实现感知器算法详解
2017/12/19 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
中学家长会邀请函
2014/01/17 职场文书
自强之星事迹材料
2014/05/12 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
薪资证明范本
2015/06/19 职场文书
python3 hdf5文件 遍历代码
2021/05/19 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android