基于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教程(1):什么是CSS3
Apr 02 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
May 07 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
iframe与window.onload如何使用详解
May 07 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php实例分享之mysql数据备份
2014/05/19 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
javascript函数库-集合框架
2007/04/27 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
使用python turtle画高达
2020/01/19 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL