1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <script type="text/javascript" src="../js/jQuery.js"></script>
  7.     <style type="text/css">
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             outline: none;
  12.             border: none;
  13.         }
  14.         #canvas{
  15.             width: 7rem;
  16.             margin: .25rem 0 0 1.5rem;
  17.             border: 1px solid black;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <canvas id="canvas" width="1000" height="600"></canvas>
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26.     /**
  27.      * rem 布局初始化
  28.      */
  29.     $('html').css('font-size', $(window).width()/10);
  30.     /**
  31.      * 获取 canvas 画布
  32.      * 获取 canvas 绘图上下文环境
  33.      */
  34.     var canvas = $('#canvas')[0];
  35.     var cxt = canvas.getContext('2d');
  37.     /**
  38.      * 径向渐变 RadialGradient( 小圆圆心横坐标, 小圆圆心纵坐标, 小圆半径, 大圆圆心横坐标, 大圆圆心纵坐标, 大圆半径 )
  39.      */
  40.     var radial =  cxt.createRadialGradient(500, 300, 0, 500, 300, 300); //创建径向渐变
  41.     radial.addColorStop(0.0, 'yellow');
  42.     radial.addColorStop(0.5, 'red');
  43.     radial.addColorStop(1.0, 'blue');
  44.     cxt.fillStyle = radial;
  45.     cxt.fillRect(0, 0, 1000, 600);
  46. </script>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <script type="text/javascript" src="../js/jQuery.js"></script>
  7.     <style type="text/css">
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.             outline: none;
  12.             border: none;
  13.         }
  14.         #canvas{
  15.             width: 7rem;
  16.             margin: .25rem 0 0 1.5rem;
  17.             border: 1px solid black;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <canvas id="canvas" width="1000" height="600"></canvas>
  23. </body>
  24. </html>
  25. <script type="text/javascript">
  26.     /**
  27.      * rem 布局初始化
  28.      */
  29.     $('html').css('font-size', $(window).width()/10);
  30.     /**
  31.      * 获取 canvas 画布
  32.      * 获取 canvas 绘图上下文环境
  33.      */
  34.     var canvas = $('#canvas')[0];
  35.     var cxt = canvas.getContext('2d');
  37.     /**
  38.      * 绘制一片星空
  39.      */
  40.     var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);
  41.     skyStyle.addColorStop(0.0, '#035');
  42.     skyStyle.addColorStop(1.0, 'black');
  43.     cxt.fillStyle = skyStyle;
  45.     cxt.fillRect(0, 0, canvas.width, canvas.height);
  46.     for(var i = 0; i < 150; i++){
  47.         var fiveStart = {};
  48.         fiveStart.Radius = Math.random()*6+6;
  49.         fiveStart.offsetX = Math.random()*canvas.width;
  50.         fiveStart.offsetY = Math.random()*canvas.height*0.65;
  51.         fiveStart.RotationAngle = Math.random()*360;
  53.         drawFiveStar(cxt, fiveStart);
  54.     }
  56.     /**
  57.      * 控制五角星的方法
  58.      */
  59.     function drawFiveStar(cxt, fiveStart){
  60.         cxt.save();
  61.         cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量
  62.         cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)
  63.         cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )
  64.         fiveStartPath(cxt);
  65.         cxt.fillStyle = "yellow";
  66.         cxt.fill();
  67.         cxt.restore();
  68.     }
  70.     /**
  71.      * 绘制标准五角星路径的方法
  72.      */
  73.     function fiveStartPath(cxt){
  74.         cxt.beginPath();
  75.         var x = 0; y = 0;
  76.         for(var i = 0; i < 5; i++){
  77.             x = Math.cos((18+72*i)/180*Math.PI);
  78.             y = Math.sin((18+72*i)/180*Math.PI);
  79.             cxt.lineTo(x, 0-y);
  80.             x = Math.cos((54+72*i)/180*Math.PI)/2.0;
  81.             y = Math.sin((54+72*i)/180*Math.PI)/2.0;
  82.             cxt.lineTo(x, 0-y);
  83.         }
  84.         cxt.closePath();
  85.     }
  86. </script>

HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient的更多相关文章

  1. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. html5 canvas 径向渐变2

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. html5 canvas 径向渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML5 Canvas ( 图形变换, 升级版的星空 ) translate, rotate, scale

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. canvas径向渐变详解

    创建径向渐变步骤如下: 1,创建径向渐变对象 createRadialGradient(x0,y0,r0,x1,y1,r1),其中x0,y0,r0分别为起始圆的位置坐标和半径,x1,y1,r1为终止圆 ...

  7. html5 canvas 对角线渐变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html5 canvas 垂直渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. html5 canvas 水平渐变描边

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. （2）流程控制（for循环、if...else判断、while循环）

    for循环 for item in names:  #结构语法 print(item) for循环嵌套for循环 for循环配合range()可以直接指定要打印的数量 例:打印一个金字塔 for i ...

  2. 各大OJ题目分类

    http://www.pythontip.com/acm/problemCategory

  3. java并发编程-Executor框架 + Callable + Future

    from: https://www.cnblogs.com/shipengzhi/articles/2067154.html import java.util.concurrent.*; public ...

  4. 【LGR-054】洛谷10月月赛II

    [LGR-054]洛谷10月月赛II luogu 成功咕掉Codeforces Round #517的后果就是,我\(\mbox{T4}\)依旧没有写出来.\(\mbox{GG}\) . 浏览器 \( ...

  5. MySQL Transaction--RC和RR区别

    在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...

  6. Monocular 集成harbor helm 仓库

      harbor 已经支持了helm 仓库(使用chartmuseum),Monocular 是一个不错的helm 仓库可视化工具 测试Monocular集成harbor 私服功能 使用docker- ...

  7. Linux下的Nginx、php、mysql、apache部署

    待补充,先搞几个博客链接: https://www.cnblogs.com/Candies/p/8282934.html http://sujianjob.com/2017/12/18/yum%E5% ...

  8. oracle之 redo过高诊断

    一.诊断过度redo 要找到生成大量重做的会话,您可以使用以下任何一种方法.这两种方法都检查生成的撤销量.当一个事务生成撤销,它将自动生成重做. 当需要检查生成大量的程序时,使用第一个查询.当这些程序 ...

  9. spring考试

  10. 开始转型学习java

    什么编程语言这些都是一样的,编程思想都是一样的.只不过是表现形式. 标识符 每一个字符在ascll码表例都有对应的数字 所以字符和数字是可以相加的   'a'+1 也可以显示数字对应的字符   (ch ...