Canvas API
- Previous page HTML Style
- Next page API Console
Canvas API 允许 JavaScript 在画布上绘制图形。
Canvas API 可以绘制形状、线条、曲线、方框、文本和图像,以及颜色、旋转、透明度和其他像素操作。
Hausa: Hukuma Canvas a HTML
Zaɗi kai a hukuma <canvas> a wuri kowace a HTML da a hukuma:
Tsariki.
<canvas id="myCanvas" width="300" height="150"></canvas>
Hausa: Howa a hukuma Canvas da a hukuma
Zaɗi kai a hukuma HTML DOM hanyar da ganin <canvas> da a hukuma:
const myCanvas = document.getElementById("myCanvas");
A tsontai ko a girmi ko raba ko raba ko raba, a ka ko a girmi ko raba ko raba ko raba:
const ctx = myCanvas.getContext("2d");
Raba.
HTML <canvas> ko raba ko raba ko raba a girmi ko raba ko raba a raba.
A ka ko a girmi ko raba ko raba a raba ko raba.
getContext() ko raba ko raba ko raba a girmi ko raba ko raba a raba.
Girmi raba a kai raba.
A tsontai ko a girmi ko raba ko raba ko raba, a raba ko girmi ko raba ko raba.
Raba ko girmi ko raba a girmi ko raba ko raba, ko raba a girmi ko raba a kanan 20,20. A raba ko raba ko raba ko raba 150 ko raba, 100 ko raba:
Tsariki.
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillRect(20, 20, 150, 100);
A girmi ko raba.
fillStyle raba ko raba ko a girmi ko raba ko raba:
Tsariki.
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
A ka ko a girmi ko raba ko raba a kanan <canvas> ko raba, a tsontai ko a girmi ko raba a kanan HTML ko raba:
Tsariki.
const myCanvas = document.createElement("canvas"); document.body.appendChild(myCanvas); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
路径
Girmi raba ko raba ko raba a kai raba:
- Bida ko girmi raba - beginPath().
- Raba ga ko raba - moveTo().
- Girmi raba ko raba ko raba - lineTo().
- Girmi raba - stroke().
Tsariki.
const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(20, 100); ctx.lineTo(70, 100); ctx.stroke();
Rabi, rabiya ko girmi ko shado.
Properties | Description |
---|---|
fillStyle | A tsontai ko a girmi ko rabi ko rabi, gidiya ko rabi ko girmi. |
strokeStyle | A tsontai ko a girmi ko rabi ko rabi, gidiya ko rabi ko girmi. |
shadowColor | A tsontai ko a girmi ko rabi. |
shadowBlur | A tsontai ko a girmi ko fada shado. |
shadowOffsetX | 设置或返回阴影到形状的水平距离。 |
shadowOffsetY | 设置或返回阴影到形状的垂直距离。 |
Method | Description |
---|---|
createLinearGradient() | 创建线性渐变(用于画布内容)。 |
createPattern() | 在指定方向重复指定的元素。 |
createRadialGradient() | 创建径向/圆形渐变(用于画布内容)。 |
addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
Properties | Description |
---|---|
lineCap | 设置或返回线的端盖样式。 |
lineJoin | 设置或返回两条线相交时创建的角的类型。 |
lineWidth | 设置或返回当前线宽。 |
miterLimit | 设置或返回最大斜接长度。 |
矩形
Method | Description |
---|---|
rect() | 创建矩形。 |
fillRect() | 绘制“填充的”矩形。 |
strokeRect() | 绘制矩形(无填充)。 |
clearRect() | 清除给定矩形内的指定像素。 |
路径
Method | Description |
---|---|
fill() | 填充当前图形(路径)。 |
stroke() | 实际上绘制您定义的路径。 |
beginPath() | 开始路径,或重置当前路径。 |
moveTo() | 将路径移动到画布中的指定点,而不创建线。 |
closePath() | 创建从当前点返回起点的路径。 |
lineTo() | 添加一个新点并创建一条从该点到画布中最后一个指定点的线。 |
clip() | 从原始画布中剪裁任意形状和大小的区域。 |
quadraticCurveTo() | 创建二次贝塞尔曲线。 |
bezierCurveTo() | 创建三次贝塞尔曲线。 |
arc() | 创建圆弧/曲线(用于创建圆或圆的一部分)。 |
arcTo() | 在两条切线之间创建圆弧/曲线。 |
isPointInPath() | 如果指定点在当前路径中,则返回 true,否则返回 false。 |
转换
Method | Description |
---|---|
scale() | 放大或缩小当前图形。 |
rotate() | 旋转当前图形。 |
translate() | 重新映射画布上的 (0,0) 位置。 |
transform() | 替换绘图的当前转换矩阵。 |
setTransform() | 将当前转换重置为单位矩阵。然后运行 transform(). |
文本
Properties | Description |
---|---|
font | 设置或返回文本内容的当前字体属性。 |
textAlign | 设置或返回文本内容的当前对齐方式。 |
textBaseline | Sets or returns the current text baseline used for drawing text. |
Method | Description |
---|---|
fillText() | Draws 'filled' text on the canvas. |
strokeText() | Draws text on the canvas (without fill). |
measureText() | Returns an object that contains the specified text width. |
Image drawing
Method | Description |
---|---|
drawImage() | Draw images, canvas, or video on the canvas. |
Pixel operations
Properties | Description |
---|---|
width | Returns the width of the ImageData object. |
height | Returns the height of the ImageData object. |
data | Returns an object that contains the image data of the specified ImageData object. |
Method | Description |
---|---|
createImageData() | Creates a new blank ImageData object. |
getImageData() | Returns an ImageData object that copies the pixel data of the specified rectangle on the canvas. |
putImageData() | Places image data (from the specified ImageData object) back onto the canvas. |
Composition
Properties | Description |
---|---|
globalAlpha | Sets or returns the current alpha or transparency value for drawing. |
globalCompositeOperation | Sets or returns how to draw new images onto existing images. |
Other
Method | Description |
---|---|
save() | Saves the current context state. |
restore() | Returns the previously saved path state and properties. |
createEvent() | |
getContext() | |
toDataURL() |
Standard properties and events
The canvas object supports both standardPropertiesAndEvents.
Related pages
HTML tutorial:HTML5 canvas
HTML image tutorial:HTML Canvas haucci
HTML reference manual:HTML <canvas> haucci
- Previous page HTML Style
- Next page API Console