一篇文章读懂canvas

一.canvas简介

<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

二.基本用法

要使用<canvas>元素，必须设置其width和height属性，指定可以绘图的区域大小，出现开始和结束标签中的内容是后背信息，如果浏览器不支持<canvas>元素，就会显示这些信息

<canvas id = 'drawing' width = '200' height = '200'  > A darwing of something <canvas>

如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。

要在这块画布上绘图，需要取得绘图上下文，需要调用getContext（）方法并传入上下文的名字，传入‘2d’

var drawing = document.getElementById('tutorial');
// 确定浏览器支持<canvas>元素
if(drawing.getContext){
   var context = drawing.getContext('2d');
//更到代码
}

三.绘制矩形

矩形是一种可以直接在2D上下文绘制的形状，有关的方法为：fillRect(),strokeRect(),clearRect().

这三个方法都可以接受4个参数：矩形的x坐标，矩形的y坐标，矩形的宽度和矩形的高度

1.fillRect(),方法在画布上绘制矩形，填充的颜色通过fillStyle属性指定

    <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.fillStyle = '#ff0000';
           context.fillRect(10,10,50,50);
           context.fillStyle =' rgba(0,0,255,0.5)';
           context.fillRect(30,30,50,50);
       }
    </script>

2.strokeRect()方法在画布上会描边矩形，描边颜色通过syrokeStyle属性指定

   <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.strokeStyle = '#ff0000';
           context.strokeRect(10,10,50,50);
           context.strokeStyle =' rgba(0,0,255,0.5)';
           context.strokeRect(30,30,50,50);
       }
    </script>

描边线条的宽度由lineWidth属性控制，该属性可以使任意整数，另外，通过lineCap属性可以控制线条末端的形状是平头，圆头还是方头('butt','round','square') ， 通过lineJoin属性可以控制线条相交的方式是圆交，斜交还是斜接（'round','bevel','miter'）;

var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++){
   ctx.beginPath();
   ctx.moveTo(20 + 30 * i, 30);
   ctx.lineTo(20 + 30 * i, 100);
   ctx.lineWidth = 20;
   ctx.lineCap = lineCaps[i];
   ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100)

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    var lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 20;

    for (var i = 0; i < lineJoin.length; i++){
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();
    }

}
draw();

3.clearRect(x, y, widh, height)

清除指定的矩形区域，然后这块区域会变的完全透明。

    <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.fillStyle = '#ff0000';
           context.fillRect(10,10,50,50);
           context.fillStyle =' rgba(0,0,255,0.5)';
           context.fillRect(30,30,50,50);
           context.clearRect(15, 15, 25, 25);
       }

四、绘制路径(path)

1. 创建路径起始点
2. 调用绘制方法去绘制出路径
3. 把路径封闭
4. 一旦路径生成，通过描边或填充路径区域来渲染图形。

1. beginPath()

   新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径

2. moveTo(x, y)

   把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

3. closePath()

   闭合路径之后，图形绘制命令又重新指向到上下文中

4. stroke()

   通过线条来绘制图形轮廓

5. fill()

   通过填充路径的内容区域生成实心的图形

绘制线段： 

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineWidth = '10';
           context.closePath();
           context.stroke();
        }

绘制三角形

虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineTo(200,120);
           context.closePath();
           context.stroke();
        }

填充三角形

fill会填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。

       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineTo(200,120);
           context.fill();
           context.stroke();
        }

绘制圆

arc(x, y, r, startAngle, endAngle, counterclockwise):

以(x, y)为圆心，以r为半径，从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针，false表示顺时针。(默认是顺时针)

注意：

1. 这里的度数都是弧度。
2. 0弧度是指的x轴正方形

       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.arc(100,100,50,0,Math.PI,false);
           context.stroke();
        }

绘制一个不带数字的始终表盘

       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.arc(100,100,99,0,2* Math.PI,false);
           context.moveTo(194,100)
           context.arc(100,100,94,0,2* Math.PI,false);
           context.moveTo(100,100);
           context.lineTo(100,20);
           context.moveTo(100,100);
           context.lineTo(20,100);
           context.stroke();
        }

举几个例子：

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext("2d");
           for (var i = 0; i < 3; i++){
             for (var j = 0; j < 10; j++){
                 context.fillStyle = 'rgb(' + Math.floor(255 - 75 * i) + ',' +
                 Math.floor(255 - 22.5 * j) + ',0)';
                 context.fillRect(j * 50, i * 50, 50, 50);
            }
           }
        }

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var ctx = drawing.getContext("2d");
           for (var i = 0; i < 6; i++){
            for (var j = 0; j < 6; j++){
                ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }
    function randomInt(from, to){
        return parseInt(Math.random() * (to - from + 1) + from);
    }
    
} 

虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组，来指定线段与间隙的交替；lineDashOffset属性设置起始偏移量.

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
}
draw();

五.绘制文本

canvas 提供了两种方法来渲染文本:

1. fillText(text, x, y [, maxWidth])

   在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的.

2. strokeText(text, x, y [, maxWidth])

   在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的.

var ctx;
function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.font = "100px sans-serif"
    ctx.fillText("hh", 10, 100);
    ctx.strokeText("hh", 10, 200)
}
draw();

给文本添加样式

1. font = value

   当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif。

2. textAlign = value

   文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。

3. textBaseline = value

   基线对齐选项，可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

4. direction = value

   文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

六、绘制图片

三参数：context.drawImage(image,起点的x坐标，起点的y坐标)

五参数：context.drawImage(image,起点的x坐标，起点的y坐标，目标宽度和目标高度)

九参数：context.drawImage(image,源图像的x坐标，源图像的y坐标，源图像的宽度，源图像的高度，

                                             目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度)