基于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的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 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
php中对2个数组相加的函数
2011/06/24 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
PHP的自定义模板引擎
2017/03/24 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
高中生活自我鉴定
2014/01/18 职场文书
医院检讨书范文
2014/02/01 职场文书
学校捐书活动总结
2015/05/08 职场文书
交通事故协议书范本
2016/03/19 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript