zoukankan      html  css  js  c++  java
  • HTML5生成玫瑰线图案

    一个HTML5的效果。

    PS:IE8不能看出效果,新版火狐和谷歌浏览器可以看出。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>HTML5生成玫瑰线图案</title>
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
    #can {background-color:#ece9d8;}
    -->
    </style>
    <style type="text/css" mce_bogus="1">
    #can {background-color:#ece9d8;}
    </style>
    </head>
    <body>
    <canvas id="can" width="500" height="500"></canvas>
    
    <script type="text/javascript">
    
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    var _x = 250, _y = 200;
    ctx.beginPath();
    ctx.shadowOffsetX = 1;
    ctx.shadowOffsetY = 1;
    ctx.shadowBlur    = 4;
    ctx.shadowColor   = 'rgba(255, 255, 255, 1)';
    ctx.strokeStyle = "#000";
    ctx.lineWidth = 1;
    for (i = 0; i <= 360; i++)
    {
    	var point0 = getPoint(i - 1);
    	var point = getPoint(i);
    	ctx.moveTo(_x + point0[0], _y + point0[1]);
        ctx.lineTo(_x + point[0], _y + point[1]);
    }
    ctx.stroke();
    function getPoint(i)
    {
    	var len = 200 * Math.sin(5 * i );
    	return [parseInt(len * Math.cos(i)), parseInt(len * Math.sin(i))];
    }
    
    </script>
    </body>
    </html>
    

  • 相关阅读:
    cron表达式解释
    mysql explain执行计划
    基于Groovy编写Ngrinder脚本常用方法
    JVM内存结构、参数调优和内存泄露分析
    Jmeter教程 简单的压力测试
    jmeter接口测试之登录测试
    jmeter之线程组的使用
    使用ANT自动执行JMeter用例
    Jmeter参数化随机取值实现
    Jmeter测试接口文档
  • 原文地址:https://www.cnblogs.com/Music/p/1785528.html
Copyright © 2011-2022 走看看