Canvas 入门与进阶

@lgk_Blog

于 2021-11-18 14:27:16 发布

阅读量451

点赞数

分类专栏：数据可视化文章标签： html5 canvas

本文链接：https://blog.csdn.net/weixin_49809163/article/details/121378712

版权

数据可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Canvas 入门与进阶

简介
一、Canvas 基础使用
二、Canvas 进阶
- 1、设置线条末端样式 lineCap
- 2、虚线
总结

简介

<canvas> 是 HTML5 新增的，可以用来制作照片集或者制作简单的动画，甚至可以进行实时视频处理和渲染的标签
Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域，可以理解称为画布，在该画布中，JavaScript 不能获取画布内元素的 DOM，只能获取整块画布的 DOM
Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas> 标签， Internet Explorer 从 IE9 开始 <canvas> 标签，Chrome 和 Opera 9+ 也支持 <canvas> 标签
<canvas> 标签只有两个可选属性：width、heigth 属性，如果不设置 widht、height 属性，则默认 width 为300px、height 为 150px。也可以使用 CSS 属性来设置画布的宽高，但如果宽和高属性的比例和初始比例不一致，会出现扭曲，所以，不建议使用 CSS 属性来设置 <canvas> 的宽高

一、Canvas 基础使用

1、canvas 元素不显示替换

由于在一些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者本身不支持 HTML 元素 <canvas> 的浏览器上不会显示 <canvas> 画布中的内容，所以在这些浏览器上你应该总是能展示替代内容，类似于 <img src="" alt="" /> 标签的 alt 属性
支持 <canvas> 的浏览器会只渲染 <canvas> 标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则会直接渲染替代内容
<canvas> 标签的结束标签 </canvas> 不可省略。与 <img> 元素不同，如果结束标签 </canvas> 不存在，则 <canvas> 标签之后的其余部分会被认为是替代内容，将不会显示出来

文本替换：

<canvas>
	替换文本内容
</canvas>

图片替换：

<canvas>
	<img src="images/替换图片.jpg" alt="图片不显示时的替换文本">
</canvas>

2、绘制矩形

canvas 提供了三种方法绘制矩形：

fillRect(x, y, width, height)：绘制一个填充的矩形。
strokeRect(x, y, width, height)：绘制一个矩形的边框。
clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明。
参数说明：
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
width, height：指的是绘制的矩形的宽和高。

其它：

fillStyle="" ：可以设置填充颜色（配合 fillRect(x, y, width, height) 使用），不设置默认是 black（黑色）
strokeStyle = ‘color’：设置图形轮廓的颜色
不填充矩形的边框颜色默认是灰色

<body>
  <canvas id="canvas" width="300px" height="150px"></canvas>
  <script>
    // 获取 DOM 对象
    const canvas = document.getElementById('canvas')
    
    // 获取 Canvas 对象
    const ctx = canvas.getContext('2d')
    
    // 设置填充颜色
    ctx.fillStyle = 'red'
    
    // 创建填充矩形
    ctx.fillRect(10,10,60,60)
    
    // 创建不填充矩形，边框颜色灰色
    ctx.strokeRect(70, 70, 50, 50)

    // 将指定区域变为透明
    ctx.clearRect(40,40,50,50)
  </script>
</body>

3、绘制路径（Path，也称为线段）

beginPath()：表示开始绘制路径
moveTo(x, y)：指定开始绘制坐标
lineTo(x, y)：指定绘制坐标的终（中）点，设置多个则会形成折线
closePath()：如果线段数大于等于 2，而且设置 closePath()，就会闭合形成一个多边形
fill()：填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
stroke()：只有设置 stroke() 才会生成线段
参数说明：
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

其它：

lineWidth = Number：表示线宽大小
strokeStyle = ‘color’：设置图形轮廓的颜色
不填充矩形的边框颜色默认是黑色

<body>
  <canvas id="canvas" width="300px" height="150px"></canvas>
  <script>
    // 获取 DOM 对象
    const canvas = document.getElementById('canvas')
    
    // 获取 Canvas 对象
    const ctx = canvas.getContext('2d')
    
    // 表示开始绘制路径
    ctx.beginPath()

	// 设置线条宽度
	ctx.lineWidth = 1
	
 	// 设置线条颜色
    ctx.strokeStyle = 'blue';

    // 起始坐标 moveTo(x, y)
    ctx.moveTo(30, 30)

    // 第一段线的终点坐标 lineTo(x, y)
    ctx.lineTo(100, 100)

    // 如果绘制的是折线，还可以继续指定从当前终点坐标作为起点到下一个终点坐标
    // ctx.lineTo(180, 80)
    // ……

    // 如果线段数大于等于 2，而且设置 closePath()，就会闭合形成一个多边形
    // ctx.closePath()
    
    //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
    ctx.fill(); 
    
    // 只有设置 stroke() 才会生成线段
    ctx.stroke()
  </script>
</body>

4、绘制圆弧

beginPath()：表示开始绘制路径
arc(x, y, r, startAngle, endAngle, anticlockwise)：以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)
stroke()：只有设置 stroke() 才会生成边框
fill()：绘制圆形的填充色（配合 fillStyle=‘颜色’ 使用）

其它：

lineWidth = Number：表示线宽大小
strokeStyle = ‘颜色’：设置圆边框线条颜色
fillStyle = ‘颜色’：设置圆内部填充颜色
不填充矩形的边框颜色默认是黑色

<body>
  <canvas id="canvas" width="300px" height="150px"></canvas>
  <script>
    // 获取 DOM 对象
    const canvas = document.getElementById('canvas')
    
    // 获取 Canvas 对象
    const ctx = canvas.getContext('2d')
    
    // 表示开始绘制路径
    ctx.beginPath()

	// 设置圆形边框线条宽度
	ctx.lineWidth = 1
	
 	// 设置圆形边框线条颜色
    ctx.strokeStyle = 'blue'
	
	// 设置圆形内部填充颜色
    ctx.fillStyle = 'red'
    
    // 绘制圆形
    ctx.arc(150, 75, 50, 0, 2 * Math.PI)

	// 绘制圆形的边框
    ctx.stroke()

	// 填充圆形内部颜色，需要搭配 fillStyle 使用
    ctx.fill()
    
  </script>
</body>

5、绘制文本

canvas 提供了两种方法来渲染文本：

fillText(text, x, y [, maxWidth]) ：在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的，文本内填充
strokeText(text, x, y [, maxWidth]) ：在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的，文本不填充

给文本添加样式：

font = value 当前我们用来绘制文本的样式：这个字符串使用和 CSS font 属性相同的语法，默认的字体是 10px sans-serif
textAlign = value 文本对齐选项：可选的值包括：start、end、left、right、center，默认值是 start
textBaseline = value 基线对齐选项：可选的值包括：top、hanging、middle、alphabetic、ideographic、bottom，默认值是 alphabetic
direction = value 文本方向：可能的值包括：ltr、rtl、inherit，默认值是 inherit

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
// 设置字体大小和选用字体
ctx.font = "20px sans-serif"
// 文本内填充
ctx.fillText("测试文本", 10, 10);
// 文本不填充
ctx.strokeText("测试文本", 10, 20)

6、绘制图片

二、Canvas 进阶

1、设置线条末端样式 lineCap

lineCap = type 线条末端样式：

butt：线段末端以方形结束
round：线段末端以圆形结束，两端分别增加了以线宽为直径的半圆
square：线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域。

var lineCaps = ["butt", "round", "square"];
 
for (var i = 0; i < 3; i++){
    ctx.beginPath();
    ctx.moveTo(20 + 30 * i, 30);
    ctx.lineTo(20 + 30 * i, 100);
    ctx.lineWidth = 20;
    ctx.lineCap = lineCaps[i];
    ctx.stroke();
}

2、虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式
setLineDash([实线长度, 间隙长度]) 方法接受一个数组，来指定线段与间隙的交替
lineDashOffset = Number 属性设置起始偏移量

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext("2d");
 
ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);