作者：喏焿你一辈子_997 | 来源：互联网 | 2023-05-19 19:01
CanvasRenderingContext2D对象方法首先定义canvas标签，获取这个对象后，得到CanvasRenderingContext2D对象varcanvasdocumen
CanvasRenderingContext2D对象方法
首先定义canvas标签，获取这个对象后，得到 CanvasRenderingContext2D对象
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
| 方法 |
描述 |
| arc() |
用一个中心点和半径，为一个画布的当前子路径添加一条弧线。 |
| arcTo() |
使用目标点和一个半径，为当前的子路径添加一条弧线。 |
| beginPath() |
开始一个画布中的一条新路径（或者子路径的一个集合）。 |
| bezierCurveTo() |
为当前的子路径添加一个三次贝塞尔曲线。 |
| clearRect() |
在一个画布的一个矩形区域中清除掉像素。 |
| clip() |
使用当前路径作为连续绘制操作的剪切区域。 |
| closePath() |
如果当前子路径是打开的，就关闭它。 |
| createLinearGradient() |
返回代表线性颜色渐变的一个 CanvasGradient 对象。 |
| createPattern() |
返回代表贴图图像的一个 CanvasPattern 对象。 |
| createRadialGradient() |
返回代表放射颜色渐变的一个 CanvasGradient 对象。 |
| drawImage() |
绘制一幅图像。 |
| fill() |
使用指定颜色、渐变或模式来绘制或填充当前路径的内部。 |
| fillRect() |
绘制或填充一个矩形。 |
| lineTo() |
为当前的子路径添加一条直线线段。 |
| moveTo() |
设置当前位置并开始一条新的子路径。 |
| quadraticCurveTo() |
为当前路径添加一条贝塞尔曲线。 |
| rect() |
为当前路径添加一条矩形子路径。 |
| restore() |
为画布重置为最近保存的图像状态。 |
| rotate() |
旋转画布。 |
| save() |
保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。 |
| scale() |
标注画布的用户坐标系统。 |
| stroke() |
沿着当前路径绘制或画一条直线。 |
| strokeRect() |
绘制（但不填充）一个矩形。 |
| translate() |
转换画布的用户坐标系统。 |
实例代码
Canvas操作测试
页面运行：
具体的请看注释，本人比较懒。还可以参考菜鸟教程里面的说明。
京公网安备 11010802041100号