基于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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
Django 中 cookie的使用
2017/08/17 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
js实现用户输入的小写字母自动转大写字母的方法
2017/01/21 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
eBay德国站:eBay.de
2017/09/14 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
电子银行业务授权委托书
2014/10/10 职场文书
稽核岗位职责
2015/02/10 职场文书
单身证明格式样本
2015/06/15 职场文书
单位证明范文
2015/06/18 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
《认识年月日》教学反思
2016/02/19 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书