搜索到1篇与默认分类的结果
Canvas
# Canvas
> HTML5 <canvas> 标签是用于绘制图像 ( 通过脚本，通常是 JavaScript )
> 不过， <canvas> 元素本身并没有绘制能力（它仅仅是一个容器）必须使用脚本来实际的绘图任务
> getContext() 它返回一个对象，该对象提供了用于在画布上绘图的方法和属性
>
> 提供完整的 getContext( "2d" ) 对象的属性和方法 可用于在画布是绘制文本，线条，矩形，圆形，等等
>
> canvas 三要素:
>
> id: 唯一标识
>
> width: 画布内容的宽度的像素大小 （与 style 的宽度和高度是有区别的）
>
> height: 画布内容的高度的像素大小
>
> **注意**：canvas 仅仅是一个容器需要绘制内容，需要用js来绘制
## 颜色
| 属性 | 描述 |
| ------------- | ---------------------------------------- |
| fillStyle | 设置或返回用于填充绘画的颜色，渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色，渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影与形状的水平距离 |
| shadowOffsetY | 设置或返回阴影与形状的垂直距离 |
| 方法 | 描述 |
| ---------------------- | ------------------------------------------ |
| createLinearGradient() | 创建线性渐变（用于在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变 ( 用于在画布内容上 ) |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
## 线条样式
| 属性 | 描述 |
| ---------- | ------------------------------------------------------------ |
| lineCap | 设置或返回线条的结束端点样式 ( 默认是默认是 butt 是平直角 圆角 round ) |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 ( 默认的是 mi ) |
| lineWidth | 设置或返回当然线条的宽度 |
| miterLimit | 设置或返回最大斜接长度 |
## 矩形
| 方法 | 描述 |
| ------------ | ---------------------------- |
| rect() | 创建矩形 |
| fillRect() | 绘制 "被填充" 的矩形 |
| strokeRech() | 绘制矩形 （ 无填充 ） |
| clearRech() | 在给定的矩形内清除指定的像素 |
## 路径
| 方法 | 描述 |
| ------------------ | ------------------------------------------------------ |
| fill() | 填充当前绘图 ( 路径 ) |
| strkoe() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次贝塞尔曲线 |
| arc() | 创建弧/曲线 ( 用于创建圆形或部分圆 ) |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointlnPath() | 如果指定的点位于当前路径中，则返回 true 否则返回 false |
## 转换
| 方法 | 描述 |
| -------------- | ---------------------------------------------- |
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵，然后运行 transform() |
## 文本
| 属性 | 描述 |
| ------------ | -------------------------------------- |
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容当前的对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用当前文本基线 |
| 方法 | 描述 |
| ------------- | ---------------------------- |
| fillText() | 在画布上绘制 "被填充的" 文本 |
| strokeText() | 在画布时绘制文本 (无填充) |
| measureText() | 返回包含指定文本宽度的对象 |
## 图像绘制
| 方法 | 描述 |
| ----------- | ------------------------ |
| drawlmage() | 向画布上绘制图像，或视频 |
## 像素操作
| 属性 | 描述 |
| ------ | --------------------------------------------------- |
| width | 返回 lmageData 对象的宽度 |
| heigth | 返回 lmageData 对象的高度 |
| data | 返回一个对象，其包含指定的 lmageData 对象的图像数据 |
| 方法 | 描述 |
| ----------------- | --------------------------------------------------------- |
| createlmageData() | 创建新的 空白的 lmageData 对象 |
| getlmageData() | 返回 lmageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putlmageData() | 把图像数据 （ 从指定的 lmageData 对象）放回画布上 |
## 合成
| 属性 | 描述 |
| ------------------------ | ------------------------------------ |
| globalAlpha | 设置或返回绘图的当前 alpha 或透明度 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图上 |
2023-03-20
442℃
0
0