一. 基本用法
在HTML中添加<canvas>元素，必须设置width跟height属性
<canvas id="drawing" width="200" height="200">A drawing of something</canvas>
如果浏览器不支持canvas元素，就会显示标签中间的内容
要在画布上绘图，需要取得绘图上下文，调用getContext('2d')就可以取得canvas的2d上下文
let drawing = document.getElementById("drawing")
let context = drawing.getContext("2d")
使用toDataURL方法可以导出canvas上绘制的图像，接受一个参数，图像的MIME类型格式
let imgURL = drawing.toDataURL("image/png") // 将imgURL赋值给一个img元素的src属性就可以显示了
常用的属性控制
- lineWidth：设置线条的宽度，可以是任意整数
- lineCap：设置线条末端的形状，butt（平头）、round（圆头）、square（方头）
- lineJoin：设置线条相交的方式，round（圆交）、斜交（bevel）、miter（斜接）
二.绘制矩形
矩形是唯一一种可以直接在上下文中绘制的形状
与矩形有关的方法包括fillRect()、strokeRect()和clearRect()，这三个方法接受4个参数（x, y, width, height）
fillRect()绘制的矩形会填充指定的颜色，颜色通过fillStyle属性指定
context.fillStyle = 'red'
context.fillRect(10, 10, 50, 50)
strokeRect()绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性指定
context.strokeStyle = '#ff0000'
context.strokeRect(30, 30, 50, 50)
clearRect()方法用于清除画布上的矩形区域
context.fillStyle = 'green'
context.fillRect(10, 10, 50, 50)
context.fillStyle = 'red'
context.fillRect(30, 30, 50, 50)
context.clearRect(40, 40, 10, 10)
三.绘制路径
要绘制路径，首选必须调用beginPath()方法，表示开始绘制新路径，绘制路径主要有以下方法
- arc(x, y, radius, startAngle, endAndle, counterclockwise)：以(x, y)为圆心绘制一条弧线，半径为radius，起始和结束角度分别为startAngle和endAngle，最后一个参数表示顺时针还是逆时针，false表示顺时针
- arcTo(x1, y1, x2, y2, radius)：从上一点开始绘制一条弧线，到(x2, y2)为止，并且穿过(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()填充，或者使用stroke()描边。最后还可以调用clip()，在路径上创建一个剪切区域
四.绘制文本
绘制文本主要有两个方法，fillText()和strokeText()，这个两个方法接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。这两个方法都以下列3个属性为基础
- font：表示文本样式、大小及字体，用css中指定字体的格式来指定，例如"bold 10px Arial"
- textAlign：表示文本的对齐方式。可能值有"start"、"end"、"left"、"right"和"center"。
- textBaseline：表示文本的基线。可能值有"top"、"hanging"、"middle"、"alphabetic"、"ideographic"和"bottom"
上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，这个对象有一个width属性，表示文本的宽度
五.变换
为上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果，可以通过如下方法来修改变换矩阵
- rotate(angle)：围绕原点旋转图像angle弧度
- scale(scaleX, scaleY)：缩放图像，默认值都是1.0
- translate(x, y)：将原点移动到(x, y)
有两个方法可以追踪上下文的状态变化。save()方法将当前上下文的所有状态存入一个栈结构，restore()方法在保存状态的栈结构中向前返回一级
六.绘制图像
如果想把一副图像绘制到画布上，可以使用drawImage()方法，调用这个方法时，可以使用三种不同的参数组合，最简单的方式是传入一个<img>元素，以及绘制该图像的起点x和y坐标
let image = document.images[0] // 获取文档中的第一幅图像
context.drawImage(image, 10, 10) // 将图像绘制到画布上，起点为(10, 10)，大小与原始大小一样
可以多传入两个参数，表示目标宽度和高度
context.drawImage(image, 10, 10, 100, 100) // 绘制的图像大小为100x100像素
还可以把图像中的某个区域绘制到上下文中，需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度
context.drawImage(image, 50, 50, 80, 80, 10, 10, 50, 50)
除了给drawImage()方法传入<img>元素外，还可以传入另一个<canvas>元素作为其第一个参数。结合drawImage()和其他方法，可以对图像进行各种基本操作，操作的结果可以通过toDataURL()方法获得，toDataURL()是canvas的方法而不是上下文的方法
七.阴影
上下文会根据以下几个属性，自动为形状或路径绘制阴影，需要在绘制路径之前设置
- shadowColor：阴影颜色，默认为黑色
- shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0
- shadowOffsetY：形状或路径y轴方向的阴影偏移量，默认为0
- shadowBlur：模糊的像素数，默认0，即不模糊
八.渐变
渐变有CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法，接受4个参数：startX、startY、endX、endY。创建渐变后，使用addColorStop()方法来指定色标，接受两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字
let gradient = context.createLinearGradient(30, 30, 70, 70)
gradient.addColorStop(0, 'white')
gradient.addColorStop(1, 'black')
表示从一个画布上的点(30, 30)到点(70, 70)的渐变。起点的色标是白色，终点的色标是黑色。然后可以把fillStyle或者strokeStyle设置为这个对象，从而使用渐变来绘制形状或描边
要创建径向渐变，可以使用createRadialGradient()方法，接受6个参数，对应着两个圆的圆心和半径
九.模式
模式其实就是重复的图像，可以用来填充或描边图像，使用createPattern()方法并传入两个参数：一个<img>元素和一个表示如何重复图像的字符串。其中第二个参数的值与css的background-repeat属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”
模式与渐变一样，都是从画布的原点(0, 0)开始的，将填充样式设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复图像
十.使用图像数据
上下文可以通过getImageData(x, y, width, height)取得原始图像数据
let imageData = context.getImageData(10, 5, 50, 50) // 取得左上角坐标为(10, 5)，大小为50x50像素的区域的图像数据
这里返回的对象是ImageData的实例，每个ImageData对象都有三个属性：width、height和data。其中data是一个数组，保存着图像中每一个像素的数据。
在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度。因此第一个像素的数据保存在数组的第0到第3个元素中，数组中的每个元素的值都介于0到255之间（包括0和255）
putImageData()方法可以将imageData表示的图像绘制到画布上
十一.合成
globalAlpha：用于指定所有绘制的透明度，是一个介于0到1之间的值，默认值为1
如果所有的后续操作都要基于相同的透明度，可以先把globalAlpha设置为适当的值，然后绘制
globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合，可能的值如下
- source-over（默认值）：后绘制的图形位于先绘制的图形上方
- source-in：后绘制的图形与先绘制的图形重叠部分可见，其他部分透明
- source-out：后绘制的图形与先绘制的图形不重叠部分可见，先绘制的图形透明
- source-atop：后绘制的图形与先绘制的图形重叠部分可见，先绘制图形不受影响
- destination-over：后绘制的图形位于先绘制的图形下方
- destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分透明
- destination-out：后绘制的图形擦除与先绘制的图形重叠的部分
- destination-atop：后绘制的图形位于先绘制的图形下方，先绘制的图形不重叠部分透明
context.fillStyle = 'blue'
context.fillRect(20, 20, 50, 50)
context.globalCompositionOperation = '***' // 需要在中间设置
context.fillStyle = 'red'
context.fillRect(45, 45, 50, 50)
网友评论