zoukankan      html  css  js  c++  java
  • html5 Canvas颜色渐变(画图很重要)

    如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle。
       fillStyle = color
       strokeStyle = color

      strokeStyle 是用于设置图形轮廓的颜色,而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。

    下面的例子都表示同一种颜色。
      // 这些 fillStyle 的值均为 '橙色'
      ctx.fillStyle = "orange";
      ctx.fillStyle = "#FFA500";
      ctx.fillStyle = "rgb(255,165,0)";
      ctx.fillStyle = "rgba(255,165,0,1)";

      注意: 目前 Gecko 引擎并没有提供对所有的 CSS 3 颜色值的支持。例如,hsl(100%,25%,0) 或者 rgb(0,100%,0) 都不可用。

      注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值,那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle 或 strokeStyle 的值。

     

      Canvas填充样式fillStyle
      说明
      在本示例里,我会再度用两层for循环来绘制方格阵列,每个方格不同的颜色。结果如图,但实现所用的代码却没那么绚丽。我用了两个变量i和j 为每一个方格产生唯一的RGB色彩值,其中仅修改红色和绿色通道的值,而保持蓝色通道的值不变。你可以通过修改这些颜色通道的值来产生各种各样的色板。通 过增加渐变的频率,你还可以绘制出类似 Photoshop 里面的那样的调色板。
    代码:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gbk" />
    <script type="text/javascript">
    function draw(){
    var ctx = document.getElementById('canvas').getContext('2d');
     for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +Math.floor(255-42.5*j) + ',0)';
        ctx.fillRect(j*25,i*25,25,25);
      }
     }
    }
    </script>
    <title>测试fillStyle</title>
    </head>
    <body onload="draw();" >
    <canvas id="canvas" width="400" height="300">
    </canvas>
    </body>
    </html>

    效果



    Canvas strokeStyle 案例
    说明
      这个示例与上面的有点类似,但这次用到的是 strokeStyle 属性,而且画的不是方格,而是用 arc 方法来画圆。
    代码
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function draw() {
       var ctx = document.getElementById('canvas').getContext('2d');
        for (var i=0;i<6;i++){
         for (var j=0;j<6;j++){
          ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ')';
          ctx.beginPath();
          ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
          ctx.stroke();
         }
        }
    }
    </script>
    <title>测试strokeStyle</title>
    </head>
    <body onload="draw();" >
      <canvas id="canvas" width="400" height="300">
    </canvas>
    </body>
    </html>
    ====================================================

    效果


    透明度 Transparency
      除了可以绘制实色图形,我们还可以用 canvas 来绘制半透明的图形。通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。

     globalAlpha = transparency value

     globalAlpha属性在需要绘制大量拥有相同透明度的图形时候相当高效。不过,我认为下面的方法可操作性更强一点。
    因为strokeStyle和fillStyle 属性接受符合CSS3 规范的颜色值,那我们可以用下面的写法来设置具有透明度的颜色。
     ctx.strokeStyle = "rgba(255,0,0,0.5)";
     ctx.fillStyle = "rgba(255,0,0,0.5)";
    rgba() 方法与 rgb() 方法类似,就多了一个用于设置色彩透明度的参数。它的有效范围是从 0.0(完全透明)到 1.0(完全不透明)。

    Canvas透明度globalAlpha
    说明
      在这个例子里,我用四色格作为背景,设置globalAlpha 为 0.2后,在上面画一系列半径递增的半透明圆。最终结果是一个径向渐变效果。圆叠加得越更多,原先所画的圆的透明度会越低。通过增加循环次数,画更多的 圆,背景图的中心部分会完全消失。
    代码
    <html>
     <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <script type="text/javascript">
       function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        // draw background
        ctx.fillStyle = '#FD0';
        ctx.fillRect(0,0,75,75);
        ctx.fillStyle = '#6C0';
        ctx.fillRect(75,0,75,75);
        ctx.fillStyle = '#09F';
        ctx.fillRect(0,75,75,75);
        ctx.fillStyle = '#F30';
        ctx.fillRect(75,75,150,150);
        ctx.fillStyle = '#FFF';
        ctx.globalAlpha = 0.2;
        // Draw semi transparent circles
        for (var i=0;i<7;i++){
          ctx.beginPath();
          ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
          ctx.fill();
       }
      }
    </script>
    <title>测试strokeStyle</title>
    </head>
    <body onload="draw();" >
     <canvas id="canvas" width="400" height="300">
    </canvas>
    </body>
    </html>
    ====================================================

    效果:

    在网页上画一个三角形(HTML5 Canvas作图)

    简化作图步骤,重写作图函数(画一个三角形):

     function DrawTriangle(Canvas,A,B,C)

    {

    //画个三角形,“A、B、C”是顶点

    with (Canvas)

     {

     moveTo(A[0],A[1]);

     lineTo(B[0],B[1]);

     lineTo(C[0],C[1]);

     lineTo(A[0],A[1]);

     }

    }

     把这个函数写进“bigengineer.js”中。

    下面是更多的实例,这些例子都很有代表性,一通百通:

    4、画个三角形:

     <html><head>

    <title>Google搜索:HTML 5 金海龙</title>

    <script type="text/javascript" src="bigengineer.js"></script>

    </head>

    <body><canvas id="cc" width="800" height="200"></canvas>

    <script type="text/javascript">

    var c=document.getElementById("cc");

    var hb=c.getContext("2d");

    hb.beginPath();

     

    var A=new Array(10,10);

    var B=new Array(50,40);

    var C=new Array(80,80);

    DrawTriangle(hb,A,B,C);

     

    hb.stroke(); 

    hb.endPath();

    </script>

    </body>

    </html>

    自己画的三角形

    ///////
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script type="text/javascript" src="bigengineer.js"></script>

    </head>

    <body>
    <canvas id="cc" width="800" height="200"></canvas>

    <script type="text/javascript">

    var c=document.getElementById("cc");

    var hb=c.getContext("2d");

    hb.beginPath();



    var A=new Array(10,10);

    var B=new Array(40,10);

    var C=new Array(70,70);

    hb.closePath();
    hb.strokeStyle="red";

    hb.fillStyle="red";

    DrawTriangle(hb,A,B,C);

    hb.stroke();
    hb.fill();
    hb.endPath();

    </script>

    </body>

    </html>
    </html>
    /////////js
    /**
    * Created by 冰渊 on 2016/1/17.
    */
    function DrawTriangle(Canvas,A,B,C)

    {

    //画个三角形,“A、B、C”是顶点

    with (Canvas)

    {

    moveTo(A[0],A[1]);

    lineTo(B[0],B[1]);

    lineTo(C[0],C[1]);

    lineTo(A[0],A[1]);

    }

    }
    摘自博客
  • 相关阅读:
    Windows CMD中 find命令(字符串查找)
    网络地址转换静态NAT
    网络地址转换静态NAT
    Android 的暗示 hint 用法
    Android 的暗示 hint 用法
    SQL Server 扩展事件
    SQL Server 扩展事件
    SqlServer中Exists的使用
    SqlServer中Exists的使用
    数据库还原,System.Data.SqlClient.SqlError: 因为数据库正在使用,所以无法获得对数据库的独占访问权。
  • 原文地址:https://www.cnblogs.com/Sugar-bingyuan/p/5138122.html
Copyright © 2011-2022 走看看