Canvas Object

Hier ein Beispiel generiert aus SVG, mit Hilfe von Adobe Illustrator und Ai2Canvas, der Code steht weiter unten.

Canvas element Attribute width unsigned long (default 300)
height unsigned long (default 150)
Method toDataURL string type (optional), any args (Variadic) returns string
getContext string contextId returns Object
2D Context Attribute canvas HTMLCanvasObhect (readonly)
Method save
restore
Transformation Method scale float x, float y
rotate float angle
translate float x, float y
transform float m11, float m12, float m21, float m22, float dx, float dy
setTransform float m11, float m12, float m21, float m22, float dx, float dy
Image drawing Method drawImage

Object image, float dx, float dy, float dw (optional), float dh (optional) (das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein) 

Object image, float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh (das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)
Compositing Attribute globalAlpha float (default 1.0)
globalCompositeOperation string (default source-over) Unterstützte Werte: source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy and xor
Line styles Attribute lineWidth float (default 1.0)
lineCap string (default butt) Unterstützte Werte: butt, round, square
lineJoin string (default miter) Unterstütze Werte: round, bevel, miter
miterLimit float (default 10)
Colors, styles and shadows Attribute strokeStyle any (default black)
fillStyle any (default black)
shadowOffsetX float (default 0.0)
shadowOffsetY float (default 0.0)
shadowBlur float (default 0.0)
shadowColor string (default transparent black)
Method createLinearGradient float x0, float y0, float x1, float y1 returns CanvasGradient
createRadialGradient float x0, float y0, float r0, float x1, float y1, float r1 returns CanvasGradient
createPattern Object image, string replication returns CanvasGradient(das Object image kann ein Image-, ein Canvas- oder ein Video-Element sein)
CanvasGradient Method addColorStop float offset, string color
Path Method beginPath
closePath
fill
stroke
clip
moveTo float x, float y
lineTo float x, float y
quadraticCurveTo float cpx, float cpy, float x, float y
bezierCurveTo float cp1x, float cp1y, float cp2x, float cp2y, float x, float y
arcTo float x1, float y1, float x2, float y2, float radius
arc float x, float y, float radius, float startAngle, float endAngle, boolean anticlockwise
rect float x, float y, fload w, fload h
isPointInPath float x, float y, returns boolean
Text Attribute font string (default 10px sans-serif)
textAlign string (default start) Unterstütze Werte: start, end, left, right, center
textBaseline string (default alphabetic) Unterstütze Werte: top, hanging, middle, alphabetic, ideographic, bottom
Method fillText string text, float x, float y, float maxWidth (optional)
strokeText string text, float x, float y, float maxWidth (optional)
measureText string text, returns TextMetrics
TextMetrics Attribute width float (readonly)
Rectangles Method clearRect float x, float y, float w, float h
fillRect float x, float y, float w, float h
strokeRect float x, float y, float w, float h
Pixel manipulation Method createImageData float sw, float sh, returns ImageData

ImageData imagedata
getImageData float sx, float sy, float sw, float sh, returns ImageData
putImageData ImageData imagedata, float dx, float dy, float dirtyX (optional), float dirtyY (optional), float dirtyWidth (optional), float dirtyHight (optional)
Attribute width unsigned long (read only)
height unsigned long (read only)
data CanvasPixelArray (read only)
CanvasPixelArray Attribute length unsigned long (read only)
HTML5_logo.htm (5056 bytes) HTML (4,94 kByte) 20.11.2013 15:55
<!DOCTYPE html >
<html lang="en">
  <head><meta charset="UTF-8" />
    <title>HTML5_logo_and_wordmark
    </title>
    <script>
      function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      draw(ctx);
    }

    function draw(ctx) {

      // ebene1/title
      ctx.save();

      // ebene1/title/
      ctx.save();

      // ebene1/Pfad
      ctx.restore();
      ctx.beginPath();
      ctx.moveTo(38.4, 547.5);
      ctx.lineTo(0.0, 117.0);
      ctx.lineTo(421.7, 117.0);
      ctx.lineTo(383.3, 547.4);
      ctx.lineTo(210.6, 595.3);
      ctx.lineTo(38.4, 547.5);
      ctx.closePath();
      ctx.fillStyle = "rgb(227, 76, 37)";
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(210.9, 558.7);
      ctx.lineTo(350.4, 520.0);
      ctx.lineTo(383.3, 152.2);
      ctx.lineTo(210.9, 152.2);
      ctx.lineTo(210.9, 558.7);
      ctx.closePath();
      ctx.fillStyle = "rgb(240, 100, 40)";
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(210.9, 311.8);
      ctx.lineTo(141.0, 311.8);
      ctx.lineTo(136.2, 257.8);
      ctx.lineTo(210.9, 257.8);
      ctx.lineTo(210.9, 205.0);
      ctx.lineTo(210.7, 205.0);
      ctx.lineTo(78.5, 205.0);
      ctx.lineTo(79.7, 219.1);
      ctx.lineTo(92.7, 364.6);
      ctx.lineTo(210.9, 364.6);
      ctx.lineTo(210.9, 311.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(234, 234, 234)";
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(210.9, 449.0);
      ctx.lineTo(210.6, 449.0);
      ctx.lineTo(151.8, 433.1);
      ctx.lineTo(148.1, 391.0);
      ctx.lineTo(119.5, 391.0);
      ctx.lineTo(95.1, 391.0);
      ctx.lineTo(102.5, 473.9);
      ctx.lineTo(210.6, 504.0);
      ctx.lineTo(210.9, 503.9);
      ctx.lineTo(210.9, 449.0);
      ctx.closePath();
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(39.2, 0.0);
      ctx.lineTo(66.1, 0.0);
      ctx.lineTo(66.1, 26.5);
      ctx.lineTo(90.6, 26.5);
      ctx.lineTo(90.6, 0.0);
      ctx.lineTo(117.4, 0.0);
      ctx.lineTo(117.4, 80.3);
      ctx.lineTo(90.6, 80.3);
      ctx.lineTo(90.6, 53.4);
      ctx.lineTo(66.1, 53.4);
      ctx.lineTo(66.1, 80.3);
      ctx.lineTo(39.2, 80.3);
      ctx.lineTo(39.2, 0.0);
      ctx.lineTo(39.2, 0.0);
      ctx.closePath();
      ctx.fillStyle = "rgb(0, 0, 0)";
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(152.7, 26.6);
      ctx.lineTo(129.1, 26.6);
      ctx.lineTo(129.1, 0.0);
      ctx.lineTo(203.2, 0.0);
      ctx.lineTo(203.2, 26.6);
      ctx.lineTo(179.6, 26.6);
      ctx.lineTo(179.6, 80.3);
      ctx.lineTo(152.7, 80.3);
      ctx.lineTo(152.7, 26.6);
      ctx.lineTo(152.7, 26.6);
      ctx.closePath();
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(214.9, 0.0);
      ctx.lineTo(242.9, 0.0);
      ctx.lineTo(260.1, 28.2);
      ctx.lineTo(277.3, 0.0);
      ctx.lineTo(305.3, 0.0);
      ctx.lineTo(305.3, 80.3);
      ctx.lineTo(278.6, 80.3);
      ctx.lineTo(278.6, 40.5);
      ctx.lineTo(260.1, 69.0);
      ctx.lineTo(259.7, 69.0);
      ctx.lineTo(241.2, 40.5);
      ctx.lineTo(241.2, 80.3);
      ctx.lineTo(214.9, 80.3);
      ctx.lineTo(214.9, 0.0);
      ctx.closePath();
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(318.7, 0.0);
      ctx.lineTo(345.5, 0.0);
      ctx.lineTo(345.5, 53.7);
      ctx.lineTo(383.2, 53.7);
      ctx.lineTo(383.2, 80.3);
      ctx.lineTo(318.7, 80.3);
      ctx.lineTo(318.7, 0.0);
      ctx.closePath();
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(210.7, 311.8);
      ctx.lineTo(210.7, 364.6);
      ctx.lineTo(275.7, 364.6);
      ctx.lineTo(269.6, 433.1);
      ctx.lineTo(210.7, 449.0);
      ctx.lineTo(210.7, 503.9);
      ctx.lineTo(318.9, 473.9);
      ctx.lineTo(319.7, 465.0);
      ctx.lineTo(332.1, 326.0);
      ctx.lineTo(333.4, 311.8);
      ctx.lineTo(319.2, 311.8);
      ctx.lineTo(210.7, 311.8);
      ctx.closePath();
      ctx.fillStyle = "rgb(255, 255, 255)";
      ctx.fill();

      // ebene1/Pfad
      ctx.beginPath();
      ctx.moveTo(210.7, 205.0);
      ctx.lineTo(210.7, 237.8);
      ctx.lineTo(210.7, 257.7);
      ctx.lineTo(210.7, 257.8);
      ctx.lineTo(338.0, 257.8);
      ctx.lineTo(338.0, 257.8);
      ctx.lineTo(338.2, 257.8);
      ctx.lineTo(339.3, 245.9);
      ctx.lineTo(341.7, 219.1);
      ctx.lineTo(342.9, 205.0);
      ctx.lineTo(210.7, 205.0);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }
    </script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="422" height="596"></canvas>
  </body>
</html>

Autor: , veröffentlicht: , letzte Änderung:

Kontakt

Copyright / License of sources

Copyright (c) 2007-2017, Udo Schmal <udo.schmal@t-online.de>

Permission to use, copy, modify, and/or distribute the software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Service Infos

CMS Info Product Name:
UDOs Webserver
Version:
0.3.2.152
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Sa, 23 Jun 2018 00:21:47
Development Info IDE:
Lazarus LCL 1.9.0.0
Compiler:
Free Pascal FPC 3.1.1
compiled for:
OS:Win64, CPU:x86_64
Hardware Info Model:
Precision WorkStation T3500
CPU Name:
Intel(R) Xeon(R) CPU W3530 @ 2.80GHz
CPU Type:
x86_64, 1 physical CPU(s), 4 Core(s), 8 logical CPU(s), 2800 MHz