canvas

canvas

canvas标签用于在JavaScript中绘制图像，这个标签本身没有绘画能力，只能作为一个容器，真正执行画图操作的还是JavaScript

<canvas id="myCan" width="500" height="800"></canvas>

canvas标签只有两个属性，长和宽，canvas初始化时会默认宽300px，长150px

注：该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

渲染上下文

canvas元素创造了一个自定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容，我们将会将注意力放在2D渲染上下文中。

canvas元素一开始只是一个空白的画布，需要通过脚本来渲染上下文，为它提供内容

var c = document.getElementById("myCan");
var cxt = c.getContext("2d"); //创建 context 对象

getContext()这个方法就是用来获得渲染上下文和它的绘画功能，返回一个用于在画布上绘图的环境。当前的唯一值就是‘2d’，它指定了二维绘图，并且导致这个方法返回一个二维的画布。

使用canvas绘制图形

我们绘制的图像都是绘制在canvas的画布中的，画布中是有明确的坐标的，通常通常情况下在画布的左上角点为（0,0）点，画布中是以每个像素为单位的坐标。

canvas绘制图形只支持两种方法：

• 矩形
• 路径（由一系列点连成的线段）

绘制矩形

fillRect() 方法绘制已填色的矩形。默认的填充颜色是黑色。

context.fillRect(x,y,width,height);

• x:矩形左上角的 x 坐标
• y:矩形左上角的 y 坐标
• width:矩形的宽度，以像素计
• height:矩形的高度，以像素计

var c = document.getElementById("myCan");
var ctx = c.getContext("2d"); //创建 context 对象
ctx.fillRect(10, 10, 55, 50);

strokeRect()方法绘制一个矩形的边框

strokeRect(x, y, width, height);

• x:矩形左上角的 x 坐标
• y:矩形左上角的 y 坐标
• width:矩形的宽度，以像素计
• height:矩形的高度，以像素计

ctx.strokeRect(50, 50, 55, 50);

clearRect( )方法用于清除指定矩形区域，清除的部分变成透明。

clearRect(x, y, width, height)

• x:被清除矩形左上角的 x 坐标
• y:被清除矩形左上角的 y 坐标
• width:被清除矩形的宽度，以像素计
• height:被清除矩形的高度，以像素计

此方法是有层级顺序的，如果此区域先绘制再清除的话最后效果为全部清除，如果先清除后在绘制新的那么会在透明的图片上继续绘制

1. <script>
       /** @type {HTMLCanvasElement} */
       var c = document.getElementById("myCan");
       var ctx = c.getContext("2d"); //创建 context 对象
       ctx.fillStyle = "rgb(200,0,0)";
       ctx.fillRect(10, 10, 55, 50); //绘制一个红色的矩形
       // ctx.clearRect(20, 20, 35, 30);
       ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
       ctx.fillRect(30, 30, 55, 50); //绘制一个紫色的矩形
   
       ctx.clearRect(20, 20, 35, 30);
       ctx.strokeRect(50, 50, 55, 50); //绘制一个矩形的框
   </script>
   

2. <script>
       /** @type {HTMLCanvasElement} */
       var c = document.getElementById("myCan");
       var ctx = c.getContext("2d"); //创建 context 对象
       ctx.fillStyle = "rgb(200,0,0)";
       ctx.fillRect(10, 10, 55, 50); //绘制一个红色的矩形
       ctx.clearRect(20, 20, 35, 30);
       ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
       ctx.fillRect(30, 30, 55, 50); //绘制一个紫色的矩形
   
       // ctx.clearRect(20, 20, 35, 30);
       ctx.strokeRect(50, 50, 55, 50); //绘制一个矩形的框
   </script>
   

绘制路径

图形的基本元素是路径。路径是通过不同的颜色和宽度的线段或曲线连接不同的点的集合。一个路径，甚至一个子路径，都是闭合的。使用路径绘制图形需要一个额外的步骤：

1. 首先，你需要创建路径起始点。
2. 然后使用画图命令去画出路径。
3. 之后你把路径封闭。
4. 一旦路径生成，就能通过描边或填充路径区域来渲染图形。

需要用到一下函数：

• beginPath()：新建一条路径，生成之后，之后再使用图形绘制命令都会被指向刚生成的这条路径。
• closePath()：使路径闭合，此步操作之后再使用的图形绘制命令又会重新指向到上下文中。
• stroke()：通过线条绘制推行轮廓。
• fill()：通过填充绘制路径的内容生成实心的图形

注意：当调用fill()函数时，所有没有闭合的形状都会自动闭合，所有调用完之后不用在调用closePath()使路径闭合成图形，但是strike()函数不会强制是路径闭合

例：下面画一个三角形

<script>
    var c = document.getElementById("myCan");
    var ctx = c.getContext("2d"); //创建 context 对象

    ctx.beginPath();
    ctx.moveTo(75, 50);
    ctx.lineTo(100, 75);
    ctx.lineTo(100, 25);
    ctx.fill();
</script>

移动笔触

上述代码中有一个非常重要的函数，可实际上这个代码并不能画出任何东西，也是上面所描述的路径列表的一部分，这个函数就是moveTo()。

moveTo(x, y)

将笔触移动到指定（x，y）的点上。好比写字时笔尖第一下点的位置，即开始位置。

当canvas初始化或者是beginPath()调用后，要使用moveTo()来设置起点位置。

绘制直线

lineTo()用于绘制一条从当前笔触位置到指定位置的直线

lineTo(x,,y);

该方法中的参数x，y为直线结束点的位置，开始的点为moveTo()指定的点或者是之前绘制别的图像时的结束的点，如果想改变开始的点需要用moveTo()函数。

ctx.beginPath();
ctx.moveTo(125, 125);
ctx.lineTo(125, 45);
ctx.lineTo(45, 125);
ctx.closePath();
ctx.stroke();

绘制圆弧

绘制圆弧或者圆，用arc()方法。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

• x：圆心的x坐标
• y：圆心的y坐标
• radius：绘制的圆会以radius为半径进行绘制
• startAngle：用弧度定义了开始的弧度
• endAngle：用弧度定义了结束的弧度
• anticlockwise：布尔值，true为顺时针方向，false为逆时针方向

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)\*角度

<script>
    /** @type {HTMLCanvasElement} */
    var c = document.getElementById("myCan");
    var ctx = c.getContext("2d"); //创建 context 对象
    ctx.beginPath();
    ctx.arc(150, 150, 50, 0, (Math.PI / 180) * 360, true)
    ctx.stroke()
</script>

色彩

给图形上色，有两个重要的属性可以做到：

• fillStyle = color：设置图形的填充颜色
• strokeStyle= color：设置图形轮科的颜色

注意：一旦设置了strokeStyle 或者fillStyle 的值话，那么这个新值就是后面绘制图形的默认值，如果希望给图形设置不同的颜色，需要重新设置新的值

<script>
    /** @type {HTMLCanvasElement} */
    var c = document.getElementById("myCan");
    var ctx = c.getContext("2d"); //创建 context 对象
    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);
        }
    }
    ctx.strokeStyle = "red";
    ctx.arc(200, 220, 80, 0, (Math.PI) * 2)
    ctx.stroke()
</script>

线性Line style

• lineWidth = value：设置线条宽度

• lineCap = type：设置线条末端样式

• lineJoin = type：设置线条与线条间接合处的样式

• miterLimit = value：限制当两条线相交时交接处最大长度，所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

两线相交时交接处最大长度为图中标出的两个角，而miterLimit 控制的就是交接处的两个角直接的直接距离，如果超过了设置的最大长度，边角会以 lineJoin 的 “bevel” 类型来显示，来通过修改交接处的样式达到减少两条线直接的交接长度。

长度，所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。

[外链图片转存中…(img-4seorYeV-1600344154764)]

两线相交时交接处最大长度为图中标出的两个角，而miterLimit 控制的就是交接处的两个角直接的直接距离，如果超过了设置的最大长度，边角会以 lineJoin 的 “bevel” 类型来显示，来通过修改交接处的样式达到减少两条线直接的交接长度。[外链图片转存中…(img-IMlPlq0a-1600344154765)]

后续会补上