canvas系列

2023-12-17 08:28| 来源: 网络整理| 查看: 265

1. Canvas API

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

在html里的形式是：

js里： Document.getElementById() 方法获取HTML 元素的引用。接着，HTMLCanvasElement.getContext() 方法获取这个元素的context——图像稍后将在此被渲染。

元素可被用来通过JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画。

canvas元素的属性：

属性名含义值height该元素占用空间的高度以 CSS 像素（px）表示，默认为 150width该元素占用空间的宽度以 CSS 像素（px）表示，默认为 300getContext()toDataURL(type, encoderOptions)返回一个数据URL，该URL包含由类型参数指定的格式的图像（默认为png）encoderOptions在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量toBlob(callback, type, encoderOptions)回调函数，可获得一个单独的Blob对象参数其余两个参数含义同上

注意

需要有闭合标签直接在html标签中设置width和height属性或者使用JavaScript来指定画布尺寸使用CSS的width和height以在渲染期间缩放图像以适应样式大小，只是让画布缩放而已。 3. CanvasRenderingContext2D

通过HTMLCanvasElement.getContext('2d')方法可以获得CanvasRenderingContext2D对象；可为元素的绘图表面提供2D渲染上下文。它用于绘制形状，文本，图像和其他对象。

🌰

// html // js const canvas = document.getElementById('my-house'); const ctx = canvas.getContext('2d'); // CanvasRenderingContext2D对象

有了CanvasRenderingContext2D上下文对象，就可以绘制自己想要的内容了

先来回顾一下最常用最简单的属性和方法：

线条相关

属性名作用默认值lineWidth线的宽度1lineCap线末端的类型butt, round , square(以正方形结尾，视觉上比butt长一点)lineJoin两线相交拐点类型miter, round，bevelmiterLimit斜接面限制比例10setLineDash([])设置当前的线段样式数组里的值依次对应虚线的线段和空白的长度，依次重复lineDashOffset(offset)从哪里开始绘制线

绘制矩形

属性名作用默认值clearRect擦除指定矩形区域的内容fillRect(x, y, width, height)绘制填充矩形strokeRect(x, y, width, height)使用当前的绘画样式，描绘一个矩形

路径

属性名作用默认值beginPath()清空路径列表，开始一个新的路径closePath()使笔点返回到当前自路径的起始点moveTo(x, y)将一个新的子路径的起始点移动到指定坐标lineTo(x, y)

【本文地址】

公司简介

联系我们