Canvas总结

最新推荐文章于 2023-06-09 11:35:33 发布

心若向阳花自开blooms

最新推荐文章于 2023-06-09 11:35:33 发布

阅读量282

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_42679205/article/details/126769313

版权

（使用 SVG path data 创建一个 Path2D 路径未完结，在path2D板块）

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

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

Canvas 的默认大小为 300 像素×150 像素（宽×高，像素的单位是 px）。但是，可以使用 HTML 的高度和宽度属性来自定义 Canvas 的尺寸。为了在 Canvas 上绘制图形，使用一个 JavaScript 上下文对象，它能动态创建图像

Canvas接口：

<canvas> 标签只有两个属性—— width和height。

渲染上下文：

canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()接受一个参数，即上下文的类型。对于 2D 图像而言，可以使用 CanvasRenderingContext2D。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

模板骨架（显示为一个2D正方形）：

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
   
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
   
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas {
    border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

绘制图形

只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的

绘制矩形：

fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)绘制一个矩形的边框
clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。

x 与 y 指定了在 canvas 画布上所绘制的矩形的左上角（相对于原点）的坐标。width 和 height 设置矩形的尺寸。

绘制路径：

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

基础：

lineWidth：线段宽度
beginPath()
moveTo(x, y)
lineTo(x, y)
closePath()
stroke()：通过线条来绘制图形轮廓。
fill()通过填充路径的内容区域生成实心的图形。
arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle （用弧度表示，弧度=(Math.PI/180)×角度。）结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成，为 true 时，是逆时针方向，否则顺时针方向。
arcTo(x1, y1, x2, y2, radius) 根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

方法

绘制矩形位图

CanvasRenderingContext2D.clearRect()设置指定矩形区域内（以点 (x, y) 为起点，范围是*(width, height)* ）所有像素变成透明，并擦除之前绘制的所有内容。
CanvasRenderingContext2D.fillRect()
绘制填充矩形，矩形的起点在 (x, y) 位置，矩形的尺寸是 width 和 height 。
CanvasRenderingContext2D.strokeRect()在 canvas 中，使用当前的笔触样式，描绘一个起点在 (x, y) 、宽度为 w 、高度为 h 的矩形。