Canvas元素

武飞扬头像

执迷原理

2024-04-24 帮助1人

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();
}

学新通

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgfehib

系列文章

同类精品

继续加载