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>

3.矩形

rect(x,y,width,height)  -------  创建矩形

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

    ctx.rect(20,20,150,100);
    ctx.stroke();
  </script>

fillRect(x,y,w,h) ------- 绘制"被填充"的矩形。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(0,0,100,100);
    
  </script>

strokeRect(x,y,w,h)  --------- 绘制矩形（无填充）。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeRect(0,0,100,100)
    
  </script>

clearRect()  -------  在给定的矩形内清除指定的像素。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);
  </script>

4.路径

fill ------- 填充当前绘图（路径）。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.fillStyle="red";
    ctx.fill();     //当前路径填充
  </script>

stroke()   --------  绘制已定义的路径。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
   ctx.beginPath();
   ctx.moveTo(20,20);
   ctx.lineTo(20,100);
   ctx.lineTo(70,100);
   ctx.strokeStyle="red"; 
   ctx.stroke();  
  </script>

beginPath()   ---------  起始一条路径，或重置当前路径。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="green"; // Green path
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // Draw it

ctx.beginPath();
ctx.strokeStyle="purple"; // Purple path
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // Draw it
  </script>

moveTo()   -------------- 把路径移动到画布中的指定点，不创建线条。
lineTo()   -------------- 添加一个新点，然后在画布中创建从该点到最后指定点的线条。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
  </script>

clothPath()    ---------     创建从当前点回到起始点的路径

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.closePath();
    ctx.stroke();
  </script>

clip() -----  从原始画布剪切任意形状和尺寸的区域。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    // Clip a rectangular area
    ctx.rect(50,20,200,120);      //
    ctx.stroke();
    ctx.clip();                  //用上面的框截取下面
    // Draw red rectangle after clip()
    ctx.fillStyle="red";
    ctx.fillRect(0,0,150,100);
  </script>

quadraticCurveTo()   ----------   创建二次贝塞尔曲线。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    
   ctx.beginPath();
   ctx.moveTo(20,20);
   ctx.quadraticCurveTo(20,100,200,20);
   ctx.stroke();
  </script>

bezierCurveTo()     ----------   创建三次贝塞尔曲线。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    
      ctx.beginPath();
      ctx.moveTo(20,20);
      ctx.bezierCurveTo(20,100,200,100,200,20);    //贝塞尔
      ctx.stroke();
  </script>

arc()    ---------    创建弧/曲线（用于创建圆形或部分圆）。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
  </script>

arcTo()    --------    创建两切线之间的弧/曲线。

<script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.beginPath(); 
    ctx.moveTo(20,20);           // 创建起始点
    ctx.lineTo(100,20);          // 创建水平线 
    ctx.arcTo(150,20,150,70,50); // 创建弧
    ctx.lineTo(150,120);         // 创建垂直线
    ctx.stroke();                // 画出来
  </script>

isPointlnPath()  --------  如果指定的点位于当前路径中，则返回 true，否则返回 false。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.rect(20,20,150,100);
    if (ctx.isPointInPath(20,50))  //如果路径经过(20,50)为True
       {
       ctx.stroke();     //绘制
       };
  </script>

5.转换

scale(x,y)       --------     缩放当前绘图至更大或更小。   1--100%    0.5---50%

<script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeRect(5,5,25,15);
    ctx.scale(2,2);
    ctx.strokeRect(5,5,25,15);
  </script>

rotate()   --------  旋转当前绘图。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.rotate(20*Math.PI/180);
    ctx.fillRect(50,20,100,50);
  </script>

translate(x,y)     --------  替换绘图的当前转换矩阵。

 <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillRect(10,10,100,50);
    ctx.translate(70,70);
    ctx.fillRect(10,10,100,50);
  </script>

setTransform   ------  将当前转换重置为单位矩阵。然后运行 transform()。

  <script>
    var canvas = document.getElementById("Canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="yellow";
    ctx.fillRect(0,0,250,100)
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="red";
    ctx.fillRect(0,0,250,100);
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,250,100);
  </script>

6.文本

7.图像绘制

8.像素操作

9.合成

10.其他

三.精美的Canvas案例

M54