Canvas元素

最新推荐文章于 2024-08-17 10:48:07 发布

执迷原理

最新推荐文章于 2024-08-17 10:48:07 发布

阅读量1.9k

点赞数

文章标签： javascript 开发语言 ecmascript html5

本文链接：https://blog.csdn.net/ddd2501/article/details/127956020

版权

1.Canvas是什么？

HTML5核心技术之一，搭配JS来绘画2D图形、绘制图表、动画效果、游戏开发等

2.Canvas与SVG的区别（重点理解）

Canvas是使用JS动态生成的，SVG是使用XML静态描述的
Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量；SVG是基于“矢量”的，图形放大不会影响质量
每次发生修改，Canvas需要重绘，而SVG不需要重绘

3.Canvas元素（行内块元素）

绘制图形分三步
- 获取Canvas对象 ---- 拿到画布
  - 就是获取Canvas元素
- 获取上下文环境对象Context ---- 拿到笔(2d)
  - 利用Canvas对象下的getContext("2d")
  - Context对象是非常重要的一个对象，描点以及画线都是由这个对象的属性和方法来实现的（这句话非常重要）
- 开始绘制图形 ---- 拿笔画画
  - 直线
    - 找到起始点（moveTo(x1,y1)）（描点）
    - 找到末尾点（lineTo(x2,y2)）（描点）
    - 用笔连线（stroke()方法连线）
  - 利用直线画图形
    - 找到起始点（moveTo(x1,y1)）
    - 找到末尾点（lineTo(x2,y2)）变成起始点
    - 找末尾点（lineTo(x3,y3)）
    - 用笔连线（stroke()方法连线）

// 画个三角形
<body>
  <canvas id="canvas" style="border:1px dashed black;" width="300px" height="150px"></canvas>
  <script>
    let cns = document.getElementById('canvas'); // 获取画布
    let cnv = cns.getContext('2d'); // 获取画笔
    // 将画笔移动到起始点(描点)
    cnv.moveTo(10,10);
    // 讲画笔移动到末尾点  --- 充当起始点
    cnv.lineTo(50,50);
    // 继续描末尾点 --- 充当起始点
    cnv.lineTo(90,10);
    // 继续描末尾点
    cnv.lineTo(10,10);
    // 画线
    cnv.stroke();
  </script>
</body>

- - 多条直线
    - 给多个起始点就好了

4.绘制矩形

刚才看到绘制三角形的代码就有很多了，如果绘制矩形还用moveTo()、lineTo()、stroke()这种方式，那么肯定代码量就不太理想了
描边矩形（区别属性和方法）
- 利用获取到的 getContext("2d")下的 strokeStyle属性以及 strokRect()方法来描边
- 步骤
  - 获取画布：获取Canvas对象
  - 获取笔：Canvas对象下的getContext("2d") --- Context对象
  - 选择颜色：利用Context对象下的strokeStyle属性（取值：颜色值、渐变色、图案）（这一步可以不要，看个人需求）
  - 开始描边：利用Context对象下的strokeRect(x1,y1,width,height)方法
    - x1、y1为左上角的起始点（矩形的左上角）
    - width、height为矩形的宽、高

<canvas id="canvas" style="border:1px dashed black;" width="300px" height="150px"></canvas>
<script>
    let cns = document.getElementById('canvas'); // 获取画布
    let cnv = cns.getContext('2d'); // 获取画笔 也就是获取 Context对象
    cnv.strokeStyle = 'red'; // 选取颜色（这一步可以不要，默认画笔颜色为灰色）
    cnv.strokeRect(10,10,100,100); // 进行描边
</script>

填充矩形（区别属性和方法）
- 利用获取到的 getContext("2d")下的 fillStyle属性以及 fillRect()方法来填充
- 步骤
  - 获取画布：获取Canvas对象
  - 获取笔：Canvas对象下的getContext("2d") --- Context对象
  - 选择填充颜色：利用Context对象下的fillStyle属性（取值：颜色值、渐变色、图案）（这一步可以不要，看个人需求）
  - 开始填充：利用Context对象下的fillRect(x1,y1,width,height)方法
    - x1、y1为左上角的起始点（矩形的左上角）

- - - width、height为矩形的宽、高

<canvas id="canvas" style="border:1px dashed black;" width="300px" height="150px"></canvas>
  <script>
    let cns = document.getElementById('canvas'); // 获取画布
    let cnv = cns.getContext('2d'); // 获取画笔 也就是获取 Context对象
    cnv.fillStyle = 'red'; // 填充颜色（可以不要这一步,默认颜色为黑色）
    cnv.fillRect(10,10,100,100); // 进行填充
  </script>

rect()方法
- 如果想绘制一个矩形，我们还可以用rect()方法
- 语法：（与上面的方法类似）
  - rect(x1,y1,width,height)

<canvas id="canvas" style="border:1px dashed black;" width="300px" height="150px"></canvas>
  <script>
    let cns = document.getElementById('canvas'); // 获取画布
    let cnv = cns.getContext('2d'); // 获取画笔 也就是获取 Context对象
    cnv.rect(10,10,100,100);
    cnv.fill();
    // cnv.stroke();
  </script>

以上三种绘制矩形方法不同点是：(实现效果方面不同)

1.strokeRect()和fillRect()方法调用之后，会立即把矩形绘制出来

2.rect()方法则是，需要调用stroke()或者fill()方法之后，才会把矩形绘制出来

清空矩形
- 利用clearRect()方法来清空“指定矩形区域”
- 语法：
  - clearRect(x1,y1,width,height)

5.多边形绘制

因为Canvas没有专门用来绘制三角形和多边形的方法，对于三角形或者多边形，我们也是使用moveTo()、lineTo()、stroke()步骤来实现的

6.绘制正多边形的封装（可以保留，以后直接拿来用）

// 下面是绘制正多边形的封装
function createPolygon(Context,n,dx,dy,size){
  // 用于开始一条新路径
  Context.beginPath();
  let degree = (2 * Math.PI) / n
  for(let i = 0;i < n;i++){
    let x = Math.cos(i * degree);
    let y = Math.sin(i * degree);
    Context.lineTo(x * size + dx,y * size + dy);
  }
  // 关闭路径
  Context.closePath();
}