基于canvas的渐变图形

最新推荐文章于 2024-08-14 00:51:11 发布

对着阳光微笑

最新推荐文章于 2024-08-14 00:51:11 发布

阅读量479

点赞数 1

分类专栏： html5+css3

本文链接：https://blog.csdn.net/qq_35768238/article/details/79908791

版权

html5+css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、绘制线性渐变

getContext（）返回一个指定contextId的上下文对象，如果指定的id不被支持，则返回null，目前唯一被强制必须支持的是“2d”，也许将来会有“3d”。id对大小写敏感，不可写成“2D”。绘制线性渐变的重要方法：

createLinearGradient(x0,y0,x1,y1); //沿直线从（x0,y0）至（x1,y1）绘制渐变

addColorStop（）； // offset为0的地方为开始地点的颜色，offset为1的则为结束地点的颜色。另外，很明显的，x0=x1并且y0=y1的时候，不会有渐变效果出现。颜色为填充使用的RGB颜色。

下面为代码和效果图：

<canvas id="canvas" width="300" height="200" style="border:1px solid red"></canvas>

<script type="text/javascript">
   var c = document.getElementById("canvas");
   var ctx = c.getContext("2d");
   var gradient=ctx.createLinearGradient(0,0,0,canvas.height);
   gradient.addColorStop(0,"#fff");
   gradient.addColorStop(1,"#000");
   ctx.fillStyle = gradient;
   ctx.fillRect(0,0,400,400);
</script>

二、绘制径向渐变

createRadialGradient（x0，y0，r0，x1，y1，r1）方法表示沿着两戈圆之间的锥面绘制渐变，前三个参数代表开始圆，后三个参数代表结束圆。

下面为代码和效果图：

<canvas id="canvas1" width="300" height="200" style="border:1px solid red"></canvas>

<script type="text/javascript">
   var c = document.getElementById("canvas1");
   var ctx = c.getContext("2d");
   var gradient=ctx.createRadialGradient(canvas1.width/2,canvas1.height/2,0,canvas1.width/2,canvas1.height/2,150);
   gradient.addColorStop(0,"#fff");
   gradient.addColorStop(1,"#000");
   ctx.fillStyle = gradient;
   ctx.fillRect(0,0,400,400);
</script>

三、变换原点坐标

translate（x，y）方法表示在平面上平移，即原来原点为参考，然后便宜后的位置最为坐标原点。原来在（100，100），然后translate（1，1）新的坐标原点在（101，101），而不是（1，1）。

下面为代码和效果图：

<body οnlοad="draw('canvas2');">
  <canvas id="canvas2" width="300" height="200" style="border:1px solid red"></canvas>

  <script type="text/javascript">
    function draw(id){
       var c = document.getElementById(id);
       if(c ==null)
          return false;
          var ctx = c.getContext("2d");
          ctx.fillStyle = "#eeeeff";
          ctx.fillRect(0,0,400,300);
          ctx.translate(200,50);
          ctx.fillStyle = 'rgba(255,0,0,0.25)';

      for(var i = 0; i< 50;i++){
         ctx.translate(10,10);
         ctx.fillRect(0,0, 200,50);
      }
  }
  </script>
</body>

四、图形缩放

scale（x，y）方法实现图形缩放，该函数的两个参数分别代表在x、y两个方向上的值。x为2，代表所绘制图像中全部元素都会变成两倍宽，y为0.5，则绘制出来的图像全部元素都会变成之前的一半高。

下面为代码和效果图：

<body οnlοad="draw('canvas2');">
  <canvas id="canvas2" width="300" height="200" style="border:1px solid red"></canvas>

  <script type="text/javascript">
    function draw(id){
       var c = document.getElementById(id);
       if(c ==null)
          return false;
          var ctx = c.getContext("2d");
          ctx.fillStyle = "#eeeeff";
          ctx.fillRect(0,0,400,300);
          ctx.translate(200,50);
          ctx.fillStyle = 'rgba(255,0,0,0.25)';

      for(var i = 0; i< 50;i++){
         ctx.scale(3,0.5);
         ctx.fillRect(0,0, 200,50);
      }
  }
  </script>
</body>

五、图形旋转

rotate（angle）方法实现图形旋转，该函数默认地从左上端的（0，0）开始旋转，通过指定一个角度，改变画布坐标和Web浏览器中的<canvas>元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转，但它并没有旋转<canvas>元素本身，这个角度是用弧度指定的。

下面为代码和效果图：

<body οnlοad="draw('canvas2');">
  <canvas id="canvas2" width="300" height="200" style="border:1px solid red"></canvas>

  <script type="text/javascript">
    function draw(id){
       var c = document.getElementById(id);
       if(c ==null)
          return false;
          var ctx = c.getContext("2d");
          ctx.fillStyle = "#eeeeff";
          ctx.fillRect(0,0,400,300);
          ctx.translate(200,50);
          ctx.fillStyle = 'rgba(255,0,0,0.25)';

      for(var i = 0; i< 50;i++){
         ctx.rotate(Math.PI/10);
         ctx.fillRect(0,0, 100,50);
      }
  }
  </script>
</body>