Canvas图形

最新推荐文章于 2024-07-12 09:36:48 发布

Raccom

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量410

点赞数

分类专栏： Canvas 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Raccon_/article/details/127546179

版权

Canvas 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Canvas

canvas 是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。

Canvas API 提供了一个通过JavaScript 和 HTML的Canvas元素来绘制图形的方式。
它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas API 主要聚焦于2D图形。而同样使用Canvas元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。

Canvas使用

Canvas 最早是由 Apple 引入 WebKit，用于Mac OS X 的 Dashboard，随后被各个浏览器实现。

如今除一些过时的浏览器不支持Canvas元素外，所有的新版本主流浏览器都支持它。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas 基本使用</title>
</head>
<body>
  <canvas id="canvas" width="200" height="200">
    当前浏览器不支持canvas元素，请升级或更换浏览器！
  </canvas>
  <script>
    // 获取 canvas 元素
    var canvas = document.getElementById('canvas');
    // 通过判断getContext方法是否存在来判断浏览器的支持性
    if(canvas.getContext) {
      // 获取绘图上下文
      var ctx = canvas.getContext('2d');
    }
  </script>
</body>
</html>

通过 getContext()来获取绘图上下文和绘制功能，接收参数，它是绘图上下文的类型，可能的参数有：

2d：建立一个二维渲染上下文。这种情况可以用 CanvasRenderingContext2D()来替换getContext('2d')。
webgl（或 experimental-webgl）：创建一个WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本1(OpenGL ES 2.0)的浏览器上可用。
webgl2（或 experimental-webgl2）：创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本2 (OpenGL ES 3.0)的浏览器上可用。
bitmaprenderer：创建一个只提供将canvas内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext。

绘制直线

moveTo(x, y)
设置初始位置，参数为初始位置x和y的坐标点

lineTo(x, y)
绘制一条从初始位置到指定位置的直线，参数为指定位置x和y的坐标点

stroke()
通过线条来绘制图形轮廓

fill()
填充绘制图形

// 获取 canvas 元素
    var canvas = document.getElementById('canvas');
    // 通过判断getContext方法是否存在来判断浏览器的支持性
    if(canvas.getContext) {
      // 获取绘图上下文
      var ctx = canvas.getContext('2d');
	      ctx.moveTo(200, 200)
          ctx.lineTo(300, 300)
          ctx.lineTo(100, 300)
          ctx.lineTo(200, 200)
          ctx.stroke()
    }

绘制矩形

strokeRect(x, y, width, height)
绘制一个矩形的边框

fillRect(x, y, width, height)
绘制一个填充的矩形

clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

// 获取 canvas 元素
    var canvas = document.getElementById('canvas');
    // 通过判断getContext方法是否存在来判断浏览器的支持性
    if(canvas.getContext) {
      // 获取绘图上下文
      var ctx = canvas.getContext('2d');
	      // 矩形
        	ctx.strokeRect(200, 200, 100, 200)
         // 填充矩形
        	ctx.fillRect(200, 200, 100, 200)
        // 透明矩形 清除指定矩形区域，让清除部分完全透明
       		ctx.clearRect(200, 200, 10, 20)
    }

绘制圆弧

绘制圆弧或者圆，使用的方法是：arc(x, y, radius, startAngle, endAngle, anticlockwise)。

x和Y为圆心的坐标
radius为半径
startAngle为圆弧或圆的开始位置
endAngle为圆弧或圆的结束位置
anticlockwise是绘制的方向（不写默认为false，从顺时针方向）

    ctx.arc(200, 200, 50, 0, 2 * Math.PI, false)
    ctx.stroke()

	ctx.arc(400, 400, 50, 0, Math.PI, false)
	ctx.fill()

绘制椭圆

添加椭圆路径。语法：ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

x、y为椭圆的圆心位置
radiusX、radiusY 为x轴和y轴的半径
rotation：椭圆的旋转角度，以弧度表示
startAngle：开始绘制点
endAngle：结束绘制点
anticlockwise：绘制的方向（默认顺时针），可选参数。

   ctx.ellipse(200, 200, 200, 100, 0, 0, 2 * Math.PI, false)
   ctx.fill()

路径闭合

当连续绘制多个图形时会出现图形连接到一起的情况

beginPath()
路径开始

closePath()
路径闭合

在绘制图形时closePath()可以省略，在开始绘制时重新beginPath()即可将图形分离开

贝塞尔曲线

二次

二次贝塞尔曲线 quadraticCurveTo(cp1x, cp1y, x, y)
先设置起点然后是cp1x，cp1y控制点 x，y结束点

	ctx.beginPath()
    ctx.moveTo(200, 200)
    ctx.quadraticCurveTo(300, 300, 100, 350)
    ctx.stroke()

        // 三次贝塞尔曲线 bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y) 先设置起点 然后是cp1x，cp1y控制点 cp2x，cp2y控制点2  x，y结束点
        // ctx.beginPath()
        // ctx.moveTo(200, 200)
        // ctx.bezierCurveTo(100,100, 300,300, 400, 200)
        // ctx.stroke()

三次

三次贝塞尔曲线 bezierCurveTo(cp1x,cp1y, cp2x,cp2y, x, y)
先设置起点然后是cp1x，cp1y控制点 cp2x，cp2y控制点2 x，y结束点

	ctx.beginPath()
    ctx.moveTo(200, 200)
    ctx.bezierCurveTo(100,100, 300,300, 400, 200)
    ctx.stroke()