简介

  • 是 HTML5 新增的元素， 可用于通过使用 JavaScript 中的脚本来绘制图形.
  • canvas: 行内加宽高， 内联元素
  • canvas画布提供了一个用来作图的平面空间，该空间的每个点都有自己的坐标，x表示横坐标，y表示竖坐标。原点(0, 0)位于图像左上角，x轴的正向是原点向右，y轴的正向是原点向下。

    使用

    ```javascript // html

// js var canvas = document.getElementById(‘draw’); var ctx = canvas.getContext(‘2d’);

// 画线： ctx.beginPath(); // 开始路径 ctx.moveTo(“X轴坐标”, “Y轴坐标”); // 起始坐标点 ctx.lineTo(“X轴坐标”, “Y轴坐标”); // 下一个点 ctx.lineTo(“X轴坐标”, “Y轴坐标”); // 下一个点 ctx.fill(); // 填充 自带闭合路径功能 ctx.closePath(); // 闭合路径 ctx.strokeStyle = “orangered”; // 描边颜色 ctx.stroke(); // 描边 没有闭合路径功能 ctx.fillStyle = “skyblue”; // 填充的颜色

// 画矩形： rect(x, y, width, height); // 需要配合 stroke() 或 fill() 方法在画布上实际地绘制矩形 fillRect(x, y, width, height); // 绘制一个填充的矩形 strokeRect(x, y, width, height); // 绘制一个矩形的边框 clearRect(x, y, width, height); // 清除指定矩形区域， 用于删除绘制图形 strokeStyle=”颜色”，// 描边的颜色 fillStyle=”颜色”，// 填充的颜色

// 线条的样式： // lineCap设置或返回线条的结束端点样式： // butt 默认。向线条的每个末端添加平直的边缘 // round 向线条的每个末端添加圆形线帽。 // square 向线条的每个末端添加正方形线帽

// 画文字： ctx.fillText(text，x，y)； // text：必需，要绘制的文本内容。 // x：必需，开始绘制文本的x轴坐标。 // y：必需，开始绘制文本的y轴坐标。 ctx.font = “14px nomal”; ctx.textAlign = “center”; // X轴文字居中 ctx.textBaseline= “middle”; // Y轴文字居中

// 画圆： arc(x, y, r, sAngle, eAngle, counterclockwise); // x, y 是圆心点的坐标 r是圆的半径 // sAngle、 eAngle是圆的起始角度和结束角度。 以弧度计 // counterclockwise可选。 规定应该逆时针还是顺时针绘图。 false = 顺时针， true = 逆时针。 // 注意： arc() 函数中表示角的单位是弧度， 不是角度。 角度与弧度的js表达式: // var PI = Math.PI == 》180 // 弧度 = (PI / 180) 角度。 弧度 = = (PI / 180) 360 = 2 * PI == 》整个圆

// Math.PI / 180 180 == 》半圆 // Math.PI / 180 360 == > 整个圆。

// ctx.save():保存当前环境的状态 // ctx.restore():返回之前保存过的路路径状态和属性 // ctx.translate移动画布的原点 // ctx.rotate() ⽅法旋转当前的绘图。旋转角度 // ctx.globalCompositeOperation=destination-out // 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

// 线性渐变 // Var color=ctx.createLinearGradient(x0,y0,x1,y1) ⽅法创建线性的渐变对象。 // x0 渐变开始点的 x 坐标 // y0 渐变开始点的 y 坐标 // x1 渐变结束点的 x 坐标 // y1 渐变结束点的 y 坐标 color.addColorStop() // ⽅法规定 gradient 对象中的颜⾊和位置。 Ctx.strokeStyle=color、ctx.fillStyle=color;

// 设置阴影 ctx.shadowOffsetX // 设置水平位移 ctx.shadowOffsetY // 设置垂直位移 ctx.shadowBlur // 设置模糊度 ctx.shadowColor // 设置阴影颜色

// 图像变换 ctx.translate(x,y) // 位移：把图像原点位移到(x， y)的位置 ctx.rotate( 弧度 ) // 旋转：旋转 弧度 ctx.scale( sx, sy ) // 缩放：在横向进行 sx 倍的缩放，在纵向进行 sy 倍的缩放

//绘制图片 ctx.drawImage(imgObject,x,y,w,h) // 绘制图片 (imgObject是要绘制的图片对象)( x,y是绘制的起点坐标)(w,h是绘制的图片的宽和高) canvasElement.toDataURL() // 导出图片 ctx.getImageData(x,y,w,h) // 返回ImageData 对象，该对象拷贝了画布指定矩形的像素数据返回ImageDatacolor/alpha 以数组形式存在，并存储于 ImageData 对象的 data 属性中 ctx.putImageData(“像素数据对象”,x,y) // 设置指定像素数据 ctx.createPattern(imgObject,”属性”) // 设置图片平铺 ctx.clip() // 剪裁画布

// requestAnimationFrame是H5新标准上的东西，在PC浏览器上会出现兼容问题，在移动端浏览器中可以任意使用 // requestAnimationFrame(回调函数); // cancelAnimationFrame()清除 ```