基于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特性绘制简易版围棋效果
Sep 28 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 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实现搜索自动提示(实例)
2013/06/09 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
numpy实现RNN原理实现
2021/03/02 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
高一学生评语大全
2014/04/25 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
python+opencv实现目标跟踪过程
2022/06/21 Python