Canvas如何绘制精美的图?

Posted 2021-03-11 crown-v

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas如何绘制精美的图?相关的知识，希望对你有一定的参考价值。

一.Canvas的基本使用

首先在使用Canvas一般先在<body>中添加:

1  <canvas id="Canvas" width="200" height="200"></canvas>

然后使用Js进行获取canvas和创建画笔:

 <script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
  </script>

继续将创建的画笔绘制一个圆:

  <script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
       pen.fillStyle = "#3648DA";
       pen.beginPath()
       pen.arc(100,100,10,0,2*Math.PI);
       pen.stroke()  
  </script>

技术图片

二.JS&Canvas的相关属性

1.颜色、样式和阴影

技术图片

fillStyle  ------  设置或返回用于填充绘画的颜色、渐变或模式。
fillRect()

 <script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
       pen.fillStyle = "#3648DA";     //设置填充颜色
       pen.fillRect(20,20,150,100);
  </script>

技术图片

strokeStyle  ------------  设置或返回用于笔触的颜色、渐变或模式。
strokeRect()

  <script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
       pen.strokeStyle = "blue";
       pen.fillRect(20,20,150,100);
  </script>

技术图片

shadowColor  ---------  设置或返回用于阴影的颜色。
shadowBlur   --------- 设置或返回用于阴影的模糊级别。

<script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
       pen.shadowBlur = 44;             //模糊度
       pen.shadowColor = "black";       //阴影颜色
       pen.fillStyle="blue";
       pen.fillRect(20,20,150,100);
  </script>

技术图片

shadowOffsetX  --------  设置或返回阴影与形状的水平距离。
shadowOffsetY  --------  设置或返回阴影与形状的垂直距离。

 <script>
       var Canvas = document.getElementById("Canvas");
       var pen = Canvas.getContext("2d");
       pen.shadowBlur = 44;
       pen.shadowColor = "black";
       pen.shadowOffsetX=30;
       pen.shadowOffsetY=20;
       pen.fillStyle="blue";
       pen.fillRect(20,20,150,100);
  </script>

技术图片

createLinearGradient() --------- 创建线性渐变（用在画布内容上）。

  <script>
       var c=document.getElementById("Canvas");  //获取画布
       var ctx=c.getContext("2d");              //创建2d画笔
       
       var grd=ctx.createLinearGradient(0,0,170,0);  //创建线性渐变
       grd.addColorStop(0,"black");                  //起始位置
       grd.addColorStop(1,"white");                  //结束位置
       
       ctx.fillStyle=grd;
       ctx.fillRect(20,20,150,100);
  </script>

技术图片

createPattern(object,model) ------- 在指定的方向上重复指定的元素。

  <script>
       var c=document.getElementById("Canvas");  //获取画布
       var ctx=c.getContext("2d");              //创建2d画笔
       ctx.clearRect(0,0,200,200);   //清除
       var earth = document.getElementById("earth"); //获取
       var pat=ctx.createPattern(earth,"repeat");   //创建模式
           ctx.rect(0,0,220,128);                 //
           ctx.fillStyle=pat;    //填充
           ctx.fill();
      
  </script>

createRadialGradient ------ 创建放射状/环形的渐变（用在画布内容上）。

addColorStop() --------  在指定的方向上重复指定的元素。

 1   <script>
 2     var canvas = document.getElementById("Canvas");
 3     var ctx = canvas.getContext("2d");
 4     
 5      var grd = ctx.createLinearGradient(75,50,5,90,60,100);
 6      grd.addColorStop(0,"red");
 7      grd.addColorStop(1,"white");
 8      ctx.fillStyle = grd;
 9      ctx.fillRect(10,10,150,100);
10   </script>

技术图片

2.线条样式

lineCap  -------- 设置或返回线条的结束端点样式。

lineWidth -------- 设置或返回当前的线条宽度。

var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    
     var grd = ctx.createLinearGradient(75,50,5,90,60,100);
     ctx.beginPath();
     ctx.lineWidth=10;
     ctx.lineCap="round";   //线的结束线帽
     ctx.moveTo(20,20);
     ctx.lineTo(20,200);
     ctx.stroke();

技术图片

lineJoin   ---------    设置或返回两条线相交时，所创建的拐角类型。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");

     ctx.beginPath();
     ctx.lineWidth =10;
     ctx.lineJoin="round";
     ctx.moveTo(20,20);
     ctx.lineTo(100,50);
     ctx.lineTo(20,100);
     ctx.stroke();
  </script>

技术图片

miterLimit  ---------设置或返回最大斜接长度

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");

    ctx.lineWidth=10;
    ctx.lineJoin="miter";
    ctx.miterLimit=5;
    ctx.moveTo(20,20);
    ctx.lineTo(50,27);
    ctx.lineTo(20,34);
    ctx.stroke();
  </script>