Depot43-Unterlagen - Canvas Image

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>Zim-CreateJS-Animation - Canvas Image</title>
      <script src="https://d309knd7es5f10.cloudfront.net/createjs.min.js"></script>
      <script>
        var zon = true; 
        var zns = false; 
      </script>
    <script src="https://d309knd7es5f10.cloudfront.net/zim_6.7.3.js"></script>

    <script>
		if(window.addEventListener){
			addEventListener("load", drawCanvas, false);
		}
        
        function drawCanvas(){
			var canvas = document.getElementById('canimg');
			var img = new Image();
			img.onload = function(){

                var context = canvas.getContext('2d');
                //context.translate(400, 20);
                //context.rotate(90 * Math.PI/180);
                context.drawImage(img, 10, 10, 400, 300);

			}
			img.src = 'http://depot43.ch/unterlagen/assets/zim//badeplaetzli.jpg';
		}
    </script>
    <style>
canvas {border:1px solid grey;}
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
    <body>
	<div class="container">
		<canvas id="canimg" width="420" height="320"></canvas> 
	</div>
    </body>
</html>


 

            

Hinweis

Die Darstellung eines Bildes innerhalb eines canvas-Elements ist möglich. Es bedingt aber, dass es als Javascript-Objekt deklariert und mit den Eigenschaften des Canvas-Elements angesprochen wird. Ist ein Bild als Canvas-Objekt erst mal definiert, stehen viele Möglichkeiten offen, die alleine mit HTML und CSS nicht möglich sind.