基于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实现地球自转实现代码(图文教程附送源码)
Dec 26 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 HTML / CSS
纯CSS3实现扇形动画菜单(简化版)实例源码
Jan 17 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php-fpm配置详解
2014/02/12 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
浅谈React中组件间抽象
2018/01/27 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python列表操作实例
2015/01/14 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
python每天定时运行某程序代码
2019/08/16 Python
pygame实现五子棋游戏
2019/10/29 Python
python__name__原理及用法详解
2019/11/02 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
求职简历自荐信
2014/06/18 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
人力资源部工作计划
2019/05/14 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server