HTML DOM ကယ်လင်း အပ်ဖော်လိုက်တာ
Canvas API 允许 JavaScript 在画布上绘制图形。
Canvas API 可以绘制形状、线条、曲线、方框、文本和图像,以及颜色、旋转、透明度和其他像素操作。
အော်ပရိုက်စ် အရာကို အီလက်ထရောနစ် စာမျက်နှာတွင် ထိန်းသိမ်းကြောင်း
သင်သည် အီလက်ထရောနစ် စာမျက်နှာတွင် မည်သည့် နေရာမှာမဆို <canvas> အရာကို ထိန်းသိမ်းနိုင်သည်:
အမှတ်ပြ
<canvas id="myCanvas" width="300" height="150"></canvas>
အော်ပရိုက်စ် အရာကို သို့မဟုတ်မရှိ
သင်သည် အီလက်ထရောနစ် ဒေါ်လုပ်ငန်းများကို အသုံးပြု၍ <canvas> အရာကို ဝင်ရောက်နိုင်သည်:
const myCanvas = document.getElementById("myCanvas");
如需在画布上绘图,您需要创建 2D 上下文对象:
const ctx = myCanvas.getContext("2d");
အစီရင်ခံ
HTML <canvas> အရာ သည် ဖန်တီးလုပ်ငန်း အရာ မရှိသည်。
လုံးချိုး ကို ဖန်တီးရန် သင်သည် ဂျူနီယာစ် ကို အသုံးပြုစေရသည်。
getContext() စနစ် သည် လုံးချိုးအရာ၏ လုပ်ငန်းစနစ် (စနစ်) ပါ အရာ ကို ပြန်လည် ပြန်ထုတ်ပေးသည်。
လုံးချိုးပြင့်ပေး
2D အခြေအနေ အရာ ကို ဖန်တီးပြီးနောက် လုံးချိုးပြင့်ပေးခြင်း ကျင်းပပါ
အောက်ပါ fillRect() စနစ် အရ ရှိသော အရောင်သေးသေး ပုံစံ ပြန်လည် ပြင့်ပေးခြင်း ဖြစ်သည်။ အရှေ့အရိုး အခြေအနေ 20,20 တွင် ရှိသည်။ ထို ပုံစံ အနက် 150 ပုံနှစ် နှင့် 100 ပုံနှစ် ရှိသည်。
အမှတ်ပြ
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillRect(20, 20, 150, 100);
အရောင်ကို အသုံးပြု
fillStyle အရာ သည် လုံးချိုးအရာ၏ ပြင်ပြုပြု အရောင် ကို တစ်ရပ်တစ်ခု ပြင့်ပေးခြင်း ဖြစ်သည်。
အမှတ်ပြ
const myCanvas = document.getElementById("myCanvas"); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
အခါအားလျှင် အခြား အသုံးပြု နိုင်သော document.createElement() စနစ် မှာ အခြား အခြား <canvas> အရာ ကို ဖန်တီးခြင်း သို့မဟုတ် အခြား အခြား HTML စားပြီး ပြင့်ပေးခြင်း ဖြစ်သည့် -
အမှတ်ပြ
const myCanvas = document.createElement("canvas"); document.body.appendChild(myCanvas); const ctx = myCanvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 150, 100);
လမ်းခွဲ
လုံးချိုးပြင့်ပေး အမျိုးအများဆုံး စနစ်မှာ -
- လုံးချိုးကို စတင်ပြင့်ပေး - beginPath()
- တစ်ခုခုကို ပြင့်ပေး - moveTo()
- လုံးချိုးတွင် ပြင့်ပေး - lineTo()
- လုံးချိုးကို ပြင့်ပေး - stroke()
အမှတ်ပြ
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();
အရောင်၊ အဆင်းအရောင်ရေး၊ သို့မဟုတ် လုံးချိုး
သုံးသပ် | ဖော်ပြ |
---|---|
fillStyle | သဘောကို ဖြင့် လုံးချိုးအရောင်၊ အဆင်းအရောင်ရေး၊ သို့မဟုတ် ပုံစံ ကို တစ်ရပ်တစ်ခု ပြင့်ပေးခြင်း သို့မဟုတ် ပြန်လည်ပြောင်းလဲခြင်း。 |
strokeStyle | သဘောကို ဖြင့် လုံးချိုးအရောင်၊ အဆင်းအရောင်ရေး၊ သို့မဟုတ် ပုံစံ ကို တစ်ရပ်တစ်ခု ပြင့်ပေးခြင်း သို့မဟုတ် ပြန်လည်ပြောင်းလဲခြင်း。 |
shadowColor | သဘောကို ဖြင့် လုံးချိုးအရောင် ကို တစ်ရပ်တစ်ခု ပြင့်ပေးခြင်း သို့မဟုတ် ပြန်လည်ပြောင်းလဲခြင်း。 |
shadowBlur | သဘောကို ဖြင့် လုံးချိုးခြင်း အစိတ်အပိုင်း ကို တစ်ရပ်တစ်ခု ပြင့်ပေးခြင်း သို့မဟုတ် ပြန်လည်ပြောင်းလဲခြင်း。 |
shadowOffsetX | 设置或返回阴影到形状的水平距离。 |
shadowOffsetY | 设置或返回阴影到形状的垂直距离。 |
နည်းပါး | ဖော်ပြ |
---|---|
createLinearGradient() | 创建线性渐变(用于画布内容)。 |
createPattern() | 在指定方向重复指定的元素。 |
createRadialGradient() | 创建径向/圆形渐变(用于画布内容)。 |
addColorStop() | 规定渐变对象中的颜色和停止位置。 |
线条样式
သုံးသပ် | ဖော်ပြ |
---|---|
lineCap | 设置或返回线的端盖样式。 |
lineJoin | 设置或返回两条线相交时创建的角的类型。 |
lineWidth | 设置或返回当前线宽。 |
miterLimit | 设置或返回最大斜接长度。 |
矩形
နည်းပါး | ဖော်ပြ |
---|---|
rect() | 创建矩形。 |
fillRect() | 绘制“填充的”矩形。 |
strokeRect() | 绘制矩形(无填充)。 |
clearRect() | 清除给定矩形内的指定像素。 |
လမ်းခွဲ
နည်းပါး | ဖော်ပြ |
---|---|
fill() | အဆိုပါ အချိန်အခြေအထိုး ကို ပြန်လည်ပြင့်ထား |
stroke() | အဆိုပါ အချိန်အခြေအထိုး ကို ဖြတ်တောက်ထား |
beginPath() | အဆိုပါ အချိန်အခြေအထိုး ကို အစုံအအုံး အရေးအချိန်၏ ပြင်ပ အချိန်အခြေအထိုး ကို ဖြတ်တောက်ထား |
moveTo() | အဆိုပါ အချိန်အခြေအထိုး ကို အစုံအအုံး အရေးအချိန်၏ ပြင်ပ အချိန်အခြေအထိုး ကို ဖြတ်တောက်ထား |
closePath() | အဆိုပါ အချိန်အခြေအထိုး ကို အစုံအအုံး အရေးအချိန်၏ ပြင်ပ အချိန်အခြေအထိုး ကို ဖြတ်တောက်ထား |
lineTo() | အဆိုပါ အချိန်အခြေအထိုး ကို ပြန်လည်တည်ပြီး အဆိုပါ အချိန်အခြေအထိုး မှ အဆိုပါ အစုံအအုံး အရေးအချိန်၏ ပြင်ပ အချိန်အခြေအထိုး ကို ဖြတ်တောက်ထား |
clip() | အရုပ်ရှင် အစုံအအုံး ကို အဆိုပါ အကြီးအကျယ် နှင့် အကြီးအကျယ် ကို ကိုက်နှက်ထား |
quadraticCurveTo() | ဆင်းနွား/ဆင်းပြောင်း ကို ဖန်တီးထား |
bezierCurveTo() | လေးလျှောက်ချိန် ကို ဖန်တီးထား |
arc() | ဆင်းနွား/ဆင်းပြောင်း ကို ဖန်တီးထား သို့မဟုတ် အဆိုပါ အဆိုပါ ဆင်းနွား/ဆင်းပြောင်း ကို ဖန်တီးထား |
arcTo() | လေးလျှောက်ချိန် အကြား အဆိုပါ ဆင်းနွား/ဆင်းပြောင်း ကို ဖန်တီးထား |
isPointInPath() | အဆိုပါ အချိန်အခြေအထိုး သည် လက်ရှိ လမ်းခွဲအတွင်း ရှိနေခဲ့ကြောင်း အရ ပြန်လည်ပေးသည် အမှတ် true အပြီး မဟုတ် အမှတ် false |
ပြောင်းလဲထား
နည်းပါး | ဖော်ပြ |
---|---|
scale() | လက်ရှိ ပုံမှား ကို အဆိုပါ အားဖြင့် အင်္ဂါအရှည်ရှိသော ပြောင်းလဲထား |
rotate() | လက်ရှိ ပုံမှား ကို အဆိုပါ အားဖြင့် ပြောင်းလဲထား |
translate() | အစုံအအုံး အရေးအချိန်၏ (0,0) အချိန်အခြေအထိုး ကို ပြန်လည်ပြင့်ထား |
transform() | အရုပ်ရှင် အရေးအချိန်၏ ပြောင်းလဲထားသည် ကို အပြောင်းလဲထား |
setTransform() | လက်ရှိ ပြောင်းလဲထားသည် ကို အုံးစျန်းအမှုန့် အဖြစ် ပြန်လည်တည်ပြီး လုပ်ပေး transform()。 |
စာရိုက်
သုံးသပ် | ဖော်ပြ |
---|---|
font | လုပ်ပေးသို့မဟုတ် ပြန်လည်ပေးသည် စာရိုက်အရေးအချိန်၏ အကြယ်ရေးအချိန်အခြေအထိုး |
textAlign | လုပ်ပေးသို့မဟုတ် ပြန်လည်ပေးသည် စာရိုက်အရေးအချိန်၏ အဆိုပါ ကိုင်းရေးအုံးစျန်းအမှုန့် |
textBaseline | 设置或返回绘制文本时使用的当前文本基线。 |
နည်းပါး | ဖော်ပြ |
---|---|
fillText() | 在画布上绘制“填充”文本。 |
strokeText() | 在画布上绘制文本(无填充)。 |
measureText() | 返回包含指定文本宽度的对象。 |
图像绘制
နည်းပါး | ဖော်ပြ |
---|---|
drawImage() | 在画布上绘制图像、画布或视频。 |
像素操作
သုံးသပ် | ဖော်ပြ |
---|---|
width | 返回 ImageData 对象的宽度。 |
height | 返回 ImageData 对象的高度。 |
data | 返回包含指定 ImageData 对象的图像数据的对象。 |
နည်းပါး | ဖော်ပြ |
---|---|
createImageData() | 创建新的空白 ImageData 对象。 |
getImageData() | 返回 ImageData 对象,该对象复制画布上指定矩形的像素数据。 |
putImageData() | 将图像数据(来自指定的 ImageData 对象)放回画布上。 |
合成
သုံးသပ် | ဖော်ပြ |
---|---|
globalAlpha | 设置或返回绘图的当前 alpha 或透明度值。 |
globalCompositeOperation | 设置或返回如何将新图像绘制到现有图像上。 |
အခြား
နည်းပါး | ဖော်ပြ |
---|---|
save() | လက်ရှိ စနစ် အခြေအနေ ကို ကျန်ရှိခြင်း ကို ကယ်တင်ခြင်း |
restore() | ပြန်လည် ကျန်ရှိသော လမ်းကြောင်း စနစ် နှင့် သုံးသပ် |
createEvent() | |
getContext() | |
toDataURL() |
သဘောတူ နှင့် ဖြစ်ပေါ်မှု သုံးသပ်
canvas အပေါ် သဘောတူ နှင့် ဖြစ်ပေါ်မှု ကို ထောက်ပံ့ကြသည်သုံးသပ်နှင့်ဖြစ်ပေါ်。
ကိုယ်စားပြု စာရင်း
HTML စံပြ:HTML5 လက်တင်
HTML လက်တင်ပုံစံ:HTML Canvas စံပြ
HTML လက်တင်စာအုပ်:HTML <canvas> လက်တင်