لوحة (لغة توصيف النص الفائق)


عنصر اللوحة (بالإنجليزية: Canvas element)‏ هو جزء من لغة توصيف النص الفائق 5 ويَسمح بتصيير الأشكال ثنائية الأبعاد والصور النقطية باستخدام نصوص برمجية وبطريقة ديناميكية. هو نموذج إجرائي منخفض المستوى يُحَدِّث صورة نقطية. اللوحة تساعد أيضاً على تطوير الألعاب ثنائية الأبعاد.

توفر اللوحة واجهة برمجة ثنائية الأبعاد خاصة بها، لكنها تدعم واجهة WebGL لتسمح بتصيير الرسومات ثلاثية الأبعاد باستخدام OpenGL ES.

تاريخ

اللوحة قدمتها آبل لتستخدم في ويب كيت لماك أو إس إكس عام 2004،[1] شَغَّلت تطبيقات مثل عناصر تحكم اللوحة ومتصفح سافاري. لاحقاً في 2005, اعتمدت في النسخة 1.8 من غيكو,[2] وأوبيرا في 2006, واعتمدته مجموعة عمل تقنية تطبيقات النص الفائق للويب (بالإنجليزية: Web Hypertext Application Technology Working Group)‏ في معيارٍ جديد للجيل التالي من تقنيات الويب.

الاستخدام

اللوحة تتكون من مساحة قابلة للرسم تحدد في نص إتش تي إم إل بصفات الطول والعرض. يمكن لجافا سكريبت الوصول إلى المساحة من خلال مجموعة متكاملة من الدالات المشابهة لتلك الموجودة في الواجهات البرمجية ثنائية الأبعاد الشائعة، لذلك يمكن توليد الرسومات ديناميكياً. بعض الاستخدامات المتوقعة للوحة: الرسومات البيانية والصور المتحركة والألعاب وتركيب الصور.

للتفاعل مع اللوحة يجب الحصول على سياق تصيير اللوحة، والذي يحدد واجهة البرمجة المستخدمة, مثل واجهة برمجة اللوحة أو WebGL أو WebGL2.

مثال

النص البرمجي التالي يصنع عنصر لوحة في صفحة لغة توصيف النص الفائق:

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

باستخدام جافا سكريبت يمكن الرسم على اللوحة:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

هذا النص البرمجي يرسم مستطيلاً أحمر على اللوحة.

واجهة برمجة اللوحة توفر أيضاً «save()» و «restore()», لحفظ واسترجاع كل خصائص سياق اللوحة.

حجم عنصر اللوحة ومساحة الرسم

اللوحة في الواقع لديها حجمان: حجم العنصر نفسه وحجم مساحة الرسم للعنصر. تغيير صفات الطول والعرض يغير كلاهما؛ صفات سي إس إس تغير حجم العنصر فقط.

افتراضياً يكون حجم العنصر ومساحة الرسم 300بك بالعرض و150بك بالطول. في المثال المعروض, الذي يستخدم أوراق الأنماط المتتالية ليحدد حجم عنصر اللوحة, حجم العنصر 600بك بالعرض و300بك بالطول, لكن حجم مساحة الرسم يبقى على حاله الافتراضي: 300بك بالعرض و150بك بالطول. عندما لا يساوي حجم اللوحة حجم مساحة الرسم, يقوم المتصفح بتوسيع أو تقليص حجم مساحة الرسم لتطابق حجم العنصر (يمكن أن يتسبب ذلك بنتائج غير متوقعة وغير مرغوبة).

مثال يضبط حجم اللوحة وحجم مساحة الرسم لقيم مختلفة:

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

الدعم في المتصفحات

تدعم النسخ الحالية من فيرفكس، وكروم، وإنترنت إكسبلورر، وسفاري، وأوبرا، ومايكروسوفت إيدج عنصر اللوحة.

انظر أيضاً

مراجع

  1. ^ Ian Hixie (12 يوليو 2004). "Extending HTML". مؤرشف من الأصل في 2024-04-10. اطلع عليه بتاريخ 2011-06-13.
  2. ^ Mozilla Developer Connection. "HTMLCanvasElement". مؤرشف من الأصل في 2011-06-04. اطلع عليه بتاريخ 2011-06-13.

وصلات خارجية

Read other articles:

For other uses, see Mito. Core city in Kantō, JapanMito 水戸市Core city Lake Senba and central MitoMito Art CenterIbaraki Prefectural Museum of HistoryKōdōkan Kairaku-enMito CastleMito Tōshō-gū FlagSealLocation of Mito in Ibaraki PrefectureMito Coordinates: 36°21′57″N 140°28′16.5″E / 36.36583°N 140.471250°E / 36.36583; 140.471250CountryJapanRegionKantōPrefectureIbarakiArea • Total217.32 km2 (83.91 sq mi)Population&#...

 

1987 IAAF WorldIndoor ChampionshipsTrack events60 mmenwomen200 mmenwomen400 mmenwomen800 mmenwomen1500 mmenwomen3000 mmenwomen60 m hurdlesmenwomen3000 m walkwomen5000 m walkmenField eventsHigh jumpmenwomenPole vaultmenLong jumpmenwomenTriple jumpmenShot putmenwomenvte The men's triple jump event at the 1987 IAAF World Indoor Championships was held at the Hoosier Dome in Indianapolis on 6 and 8 March. Medalists Gold Silver Bronze Mike Conley United States Oleg Protsenko Soviet Union ...

 

Election in Florida Main article: 2000 United States presidential election 2000 United States presidential election in Florida ← 1996 November 7, 2000 2004 → Turnout70% [1]   Nominee George W. Bush Al Gore Party Republican Democratic Home state Texas Tennessee Running mate Dick Cheney Joe Lieberman Electoral vote 25 0 Popular vote 2,912,790 2,912,253 Percentage 48.847% 48.838% County Results Congressional District Results Precinct Results...

Order of marine arthropods Sea spidersTemporal range: Late Cambrian–present PreꞒ Ꞓ O S D C P T J K Pg N Left to right, top to bottom: Austrodecus bamberi (Austrodecidae), Colossendeis sp. (Colossendeidae), Pycnogonum stearnsi (Pycnogonidae), Ammothea hilgendorfi (Ammotheidae), Endeis flaccida (Endeinae), Nymphon signatum (Nymphonidae) Scientific classification Domain: Eukaryota Kingdom: Animalia Phylum: Arthropoda Subphylum: Chelicerata Class: PycnogonidaLatreille, 1810 Order: Pantopoda...

 

Rs.IV Role Patrol flying boatType of aircraft National origin Germany Manufacturer Zeppelin-Lindau Designer Claudius Dornier First flight 12 October 1918 Status scrapped Primary user Kaiserliche Marine Number built 1 Developed from Zeppelin-Lindau Rs.III The Zeppelin-Lindau Rs.IV (known incorrectly postwar as the Dornier Rs.IV) was a Riesenflugzeug (Giant aircraft) monoplane all metal flying boat with a stressed skin hull and fuselage developed for the Imperial German Navy to perform lon...

 

Heute haben die Stämme oftmals die Sicherheit in ihre eigene Hand genommen. Das Public Law 280 wird von den Stämmen abgelehnt. Im Bild ein Streifenwagen der Navajo Nation Police. Die Standing Rock Reservation in North Dakota ist eine Reservation wo Public Law 280 keine Anwendung mehr findet. Im Bild Verwaltung des Reservats. Navajo Nation Council Chambers (Béésh bąąh dah siʼání) in Window Rock Reservate in den USA (ohne Alaska)[1] Public Law 280, auch Public Law 83- 280, ist ...

German soprano (1881–1936) Eva Helga Bertha von der Osten (19 August 1881 – 5 May 1936) was a German dramatic soprano. Biography She was born in Helgoland, the daughter of actor Emil von der Osten [de] (1847–1905) and Rosa von der Osten-Hildebrandt (1850–1911). Von der Osten debuted in 1902 at the Dresdner Hofoper and performed there regularly until the end of her career. She was a favorite of the Dresden opera-going public and sang many of the most important roles of the...

 

Ця стаття містить перелік посилань, але походження окремих тверджень залишається незрозумілим через брак внутрішньотекстових джерел-виносок. Будь ласка, допоможіть поліпшити цю статтю, перетворивши джерела з переліку посилань на джерела-виноски у самому тексті статті...

 

Pakistani politician Not to be confused with Ali Mohammed Khan. Ali Muhammad Khanعلی محمد خانMinister of State for Parliamentary AffairsIn office17 September 2018 – 10 April 2022PresidentArif AlviPrime MinisterImran KhanMinisterBabar AwanHead of Prime Minister's Public Affairs and Grievances WingIn office17 September 2018 – 10 April 2022Member of the National Assembly of PakistanIn office13 August 2018 – 29 July 2022ConstituencyNA-22 (Mardan-III)In o...

Alfred ApakaBackground informationBirth nameAlfred Aholo Apaka Jr.Born(1919-03-19)March 19, 1919Honolulu, HawaiiDiedJanuary 30, 1960(1960-01-30) (aged 40)Honolulu, Hawaii, USGenresHawaiian Traditional pop Hapa haole music StandardsOccupation(s)SingerInstrument(s)Voice, BaritoneYears active1938–1960LabelsDecca, Bell Records, Aloha Records, Capitol, Hawaiian Village, ABC-ParamountMusical artist Alfred Aholo Apaka, Jr. (March 19, 1919 – January 30, 1960) was a Hawaiian singer whose roma...

 

Census Town in West Bengal, IndiaHarinadibhastsalaCensus TownHarinadibhastsalaLocation in West Bengal, IndiaShow map of West BengalHarinadibhastsalaHarinadibhastsala (India)Show map of IndiaCoordinates: 23°14′47″N 88°22′53″E / 23.2465°N 88.3813°E / 23.2465; 88.3813Country IndiaStateWest BengalDistrictNadiaArea • Total1.6107 km2 (0.6219 sq mi)Population (2011) • Total4,983 • Density3,100/km2 (8,000...

 

Claude van Frankrijk 1499-1524 Hertogin van Bretagne Periode 1514-1524 Voorganger Anna van Bretagne Opvolger Frans III Koningin-gemalin van Frankrijk Periode 1515-1524 Voorganger Maria Tudor Opvolger Eleonora van Habsburg Vader Lodewijk XII van Frankrijk Moeder Anna van Bretagne Wapen als koningin van Frankrijk Claude van Frankrijk (Romorantin, 13 oktober 1499 – Blois, 20 juli 1524) was, als echtgenote van Frans I, koningin van Frankrijk van 1515 tot aan haar dood. Haar ouders waren koning ...

Radio station in BaguioBombo Radyo Baguio (DZWX)BaguioBroadcast areaBenguet, La Union and surrounding areasFrequency1035 kHzBrandingDZWX Bombo RadyoProgrammingLanguage(s)Ilocano, FilipinoFormatNews, Public Affairs, Talk, DramaNetworkBombo RadyoOwnershipOwnerBombo Radyo Philippines(People's Broadcasting Service, Inc.)Sister stations89.5 Star FMHistoryFirst air date1970Former frequencies1040 kHz (1970-1978)Technical informationLicensing authorityNTCPower5,000 wattsTransmitter coordinates16°24�...

 

Esta boca es mía Programa de televisión Victoria Rodríguez en 2019.Género Talk showPresentado por Victoria RodríguezN.º de temporadas 16ProducciónLugar(es) de producción Montevideo, UruguayDuración 90 mins.Empresa(s) productora(s) Contenidos TV (2008-2017)Kubrick Media (2017-)LanzamientoMedio de difusión TeledoceLa RedHorario Lunes a viernes 14ː30Fecha de lanzamiento 6 de octubre de 2008Producciones relacionadas Súbete a mi motoÁngles y demoniosEnlaces externos Sitio web oficial&...

 

Floor loom with a dobby mechanism for weaving geometric patterns This article needs additional citations for verification. Please help improve this article by adding citations to reliable sources. Unsourced material may be challenged and removed.Find sources: Dobby loom – news · newspapers · books · scholar · JSTOR (June 2007) (Learn how and when to remove this template message) A loom from the 1890s with a dobby head. A dobby loom, or dobbie loom,[...

For other uses, see Gorenje (disambiguation). Slovenian major appliance manufacturer Gorenje gospodinjski aparati, d.o.o.[1]Official logoCompany typed.o.o.[2]IndustryHome appliancesFounded1950; 74 years ago (1950)HeadquartersVelenje, SloveniaKey peopleFranjo Bobinac, President and CEO of Management BoardRevenue €1.186 billion (2018)[3]Operating income−44,588,000 Euro (2019) Net income (€111.17 million) (2018)[3]Total assets €1.061...

 

Jasper State Recreation SiteShow map of OregonShow map of the United StatesTypePublic, stateLocationLane County, OregonNearest cityEugeneCoordinates43°58′59″N 122°54′04″W / 43.9831815°N 122.9011896°W / 43.9831815; -122.9011896[1]Operated byOregon Parks and Recreation Department Jasper State Recreation Site is a state park in the U.S. state of Oregon, administered by the Oregon Parks and Recreation Department. See also List of Oregon state...

 

Raoul-Roger Ballet Información personalNacimiento 1904, hace 120 añosAix-en-Provence Provenza-Alpes-Costa AzulFallecimiento 2004 , a los 99 años, hace 20 añosCelon (Francia) Nacionalidad FranciaEducaciónEducación ParísInformación profesionalÁrea pintura y escultura[editar datos en Wikidata] Raoul-Roger Ballet fue un pintor y escultor francés, de la corriente abstracta; nacido el año 1904 en Aix-en-Provence y fallecido el 2004 a los 99 años. Vida y obras Realiz�...

В территориально-административном отношении Боливия разделена на 9 департаментов (исп. departamentos, ед.ч. departamento), каждый из которых, в свою очередь, делится на провинции (исп. provincias, ед.ч. provincia). Провинций всего 112, они делятся на кантоны (исп. cantones, ед.ч. cantón). Департаменты...

 

西鉄香椎駅 駅舎の全景 にしてつかしい Nishitetsu-Kashii ◄NK04 香椎宮前 (0.5 km) (1.4 km) 香椎花園前 NK06► 所在地 福岡市東区香椎駅前二丁目北緯33度39分33.75秒 東経130度26分30.31秒 / 北緯33.6593750度 東経130.4417528度 / 33.6593750; 130.4417528座標: 北緯33度39分33.75秒 東経130度26分30.31秒 / 北緯33.6593750度 東経130.4417528度 / 33.6593750; 130.4417528駅�...

 

Strategi Solo vs Squad di Free Fire: Cara Menang Mudah!