--使用Canvas绘图

Posted 2020-06-17

一.基本用法

1.要使用<canvas>元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。能通过 CSS 为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

2.要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。在使用<canvas>元素之前，首先要检测 getContext()方法是否存在，这一步非常重要。检测可以用如下方法进行：

1 var drawing = document.getElementById("drawing");
2 //确定浏览器支持<canvas>元素
3 if (drawing.getContext){
4 var context = drawing.getContext("2d");
5 //更多代码
6 }

 

3.使用 toDataURL()方法，可以导出在<canvas>元素上绘制的图像。这个方法接受一个参数，即图像的 MIME 类型格式，而且适合用于创建图像的任何上下文。例如：

 1 var drawing = document.getElementById("drawing");
 2 //确定浏览器支持<canvas>元素
 3 if (drawing.getContext){
 4 //取得图像的数据 URI
 5 var imgURI = drawing.toDataURL("image/png");
 6 //显示图像
 7 var image = document.createElement("img");
 8 image.src = imgURI;
 9 document.body.appendChild(image);
10 }

 

二.2D上下文：

1.使用 2D 绘图上下文提供的方法，可以绘制简单的 2D 图形，比如矩形、弧线和路径。

 

2.2D 上下文的坐标开始于<canvas>元素的左上角，原点坐标是(0,0)。所有坐标值都基于这个原点计算， x 值越大表示越靠右， y 值越大表示越靠下。

3.填充与描边：

2D 上下文的两种基本绘图操作是填充和描边。这两个操作的结果取决于两个属性： fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是"#000000"。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、 rgba、 hsl 或 hsla。例如：

1 var drawing = document.getElementById("drawing");
2 //确定浏览器支持<canvas>元素
3 if (drawing.getContext){
4 var context = drawing.getContext("2d");
5 context.strokeStyle = "red";
6 context.fillStyle = "#0000ff";
7 }

 

4.绘制矩形：

矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect()、strokeRect()和 clearRect()。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

fillRect()：该方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过 fillStyle 属性指定。用法如下：

1 //绘制红色矩形
2 context.fillStyle = "#ff0000";
3 context.fillRect(10, 10, 50, 50);

strokeRect()：该方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过 strokeStyle 属性指定。用法如下：

1 //绘制红色描边矩形
2 context.strokeStyle = "#ff0000";
3 context.strokeRect(10, 10, 50, 50);

clearRect()：该方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。

5.绘制路径：

要绘制路径，首先必须调用 beginPath()方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径。

• arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)为圆心绘制一条弧线，弧线半径为 radius，起始和结束角度（用弧度表示）分别为 startAngle 和
  endAngle。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false表示按顺时针方向计算。
• arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径 radius 穿过(x1,y1)。
• bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点。
• lineTo(x, y)：从上一点开始绘制一条直线，到(x,y)为止。
• moveTo(x, y)：将绘图游标移动到(x,y)，不画线。
• quadraticCurveTo(cx, cy, x, y)：从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。
• rect(x, y, width, height)：从点(x,y)开始绘制一个矩形，宽度和高度分别由 width 和height 指定。这个方法绘制的是矩形路径，而不是 strokeRect()和 fillRect()所绘制的独立的形状。
• closePath()：在创建路径之后，想绘制一条连接到路径起点的线条。
• fill()：如果路径已经完成，你想用 fillStyle 填充它，可以调用 fill()方法。
• stroke()：对路径进行描边，颜色使用 strokeStyle属性
• clip()：在路径上创建一个剪切区域
• isPointInPath()：接收 x 和 y 坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上
  
  

6.绘制文本：

绘制文本主要有两个方法： fillText()和 strokeText()。fillText()方法使用fillStyle 属性绘制文本，而 strokeText()方法使用 strokeStyle 属性为文本描边。这两个方法都可以接收 4 个参数：要绘制的文本字符串、 x 坐标、 y 坐标和可选的最大像素宽度。而且，这两个方法都以下列 3 个属性为基础：

• font：表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定，例如"10px Arial"。
• textAlign：表示文本对齐方式。可能的值有"start"、"end"、"left"、"right"和"center"。建议使用"start"和"end"，不要使用"left"和"right"。
• textBaseline：表示文本的基线。可能的值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"和"bottom"。
  
  

7.变换：可以通过如下方法来修改变换矩阵。

• rotate(angle)：围绕原点旋转图像 angle 弧度。
• scale(scaleX, scaleY)：缩放图像，在 x 方向乘以 scaleX，在 y 方向乘以 scaleY。 scaleX和 scaleY 的默认值都是 1.0。
• translate(x, y)：将坐标原点移动到(x,y)。执行这个变换之后， 坐标(0,0)会变成之前由(x,y)表示的点。
• transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接修改变换矩阵，方式是乘以如下矩阵。
• setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后再调用 transform()。
• save():保存上下文状态

8.绘制图像：

drawImage()函数：总共需要传入 9 个参数：要绘制的图像、源图像的 x 坐标、源图像的 y 坐标、源图像的宽度、源图像的高度、目标图像的 x 坐标、目标图像的 y 坐标、目标图像的宽度、目标图像的高度。这样调用drawImage()方法可以获得最多的控制。例如： context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60); 


9.阴影：有以下几个属性

• shadowColor：用 CSS 颜色格式表示的阴影颜色，默认为黑色。
• shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认为 0。
• shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认为 0。
• shadowBlur：模糊的像素数，默认 0，即不模糊。

10.渐变：渐变由 CanvasGradient 实例表示，很容易通过 2D 上下文来创建和修改。

createLinearGradient()：创建一个新渐变，这个方法接收 4 个参数：起点的 x 坐标、起点的 y 坐标、终点的 x 坐标、终点的 y 坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient 对象的实例。创建了渐变对象后，下一步就是使用 addColorStop()方法来指定色标。这个方法接收两个参数：色标位置和 CSS 颜色值。色标位置是一个 0（开始的颜色）到 1（结束的颜色）之间的数字。例如：

1 var gradient = context.createLinearGradient(30, 30, 70, 70);
2 gradient.addColorStop(0, "white");
3 gradient.addColorStop(1, "black");

createRadialGradient()：创建径向渐变（或放射渐变），该方法接收 6 个参数，对应着两个圆的圆心和半径。前三个参数指定的是起点圆的原心（x 和 y）及半径，后三个参数指
定的是终点圆的原心（x 和 y）及半径。

11.模式：模式其实就是重复的图像，可以用来填充或者描边图形。要 创 建 一 个 新 模 式 ， 可 以 调 用createPattern()方法并传入两个参数：一个 html <img>元素和一个表示如何重复图像的字符串。其中，第二个参数的值与 CSS 的 background-repeat 属性值相同，包括"repeat"、 "repeat-x"、"repeat-y"和"no-repeat"。例如：

1 var image = document.images[0],
2 pattern = context.createPattern(image, "repeat");
3 //绘制矩形
4 context.fillStyle = pattern;
5 context.fillRect(10, 10, 150, 150);

 

12.获取原始数据：

2D 上下文的一个明显的长处就是，可以通过 getImageData()取得原始图像数据。这个方法接收4 个参数：要取得其数据的画面区域的 x 和 y 坐标以及该区域的像素宽度和高度。该函数返回的对象是 ImageData 的实例。每个 ImageData 对象都有三个属性： width、 height 和data。其中 data 属性是一个数组，保存着图像中每一个像素的数据。