前端笔记 — canvas

2020-06-13  本文已影响0人  codingZero

一. 基本用法

在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属性就可以显示了

常用的属性控制

二.绘制矩形

矩形是唯一一种可以直接在上下文中绘制的形状
与矩形有关的方法包括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()方法，表示开始绘制新路径，绘制路径主要有以下方法

调用closePath()可以将路径的起点与终点连接。路径完成后，可以使用fill()填充，或者使用stroke()描边。最后还可以调用clip()，在路径上创建一个剪切区域

四.绘制文本

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

上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，这个对象有一个width属性，表示文本的宽度

五.变换

为上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果，可以通过如下方法来修改变换矩阵

六.绘制图像

如果想把一副图像绘制到画布上，可以使用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的方法而不是上下文的方法

七.阴影

上下文会根据以下几个属性，自动为形状或路径绘制阴影，需要在绘制路径之前设置

八.渐变

渐变有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：表示后绘制的图形怎样与先绘制的图形结合，可能的值如下

context.fillStyle = 'blue'
context.fillRect(20, 20, 50, 50)
context.globalCompositionOperation = '***' // 需要在中间设置
context.fillStyle = 'red'
context.fillRect(45, 45, 50, 50)
上一篇 下一篇

猜你喜欢

热点阅读