suchen

Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9

Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9

高洛峰
高洛峰Original
2017-01-11 17:00:171759Durchsuche

Zeichne ein Bild

Var image=new Image();

image.src=“ http://img4.duitang.com/uploads/item/201406/25/20140625182321_4MTau . thumb.700_0.jpeg";

image.onload=function(){}

Context.drawImage(image,x,y);

Context.drawImage( image ,x,y,w,h);

Context.drawIamge(image,sx,sy,sw,sh,dx,dy,dw,dh);

Bildkachel

HTML5 canvas 9绘制图片实例详解

Var pat= context.createPattern(image,"repeat");

Context.fillStyle=pat;

Context.fillRect(0 ,0,400,300);

Bild zuschneiden

HTML5 canvas 9绘制图片实例详解

Zeichnen Sie zuerst den Pfad

Context.clip();

<html>
 
 <head>
 <meta charset="UTF-8">
 <title>绘制图片</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 
 </head>
 
 <body>
 <canvas id="canvas" width="500" height="500"></canvas>
  
 <script type="text/javascript">
  var oCanvas = document.getElementById("canvas");
  var context = oCanvas.getContext("2d");
  context.fillStyle = "#ededed";
  context.fillRect(0, 0, 500, 500);
 
  //绘制图片
  var img = new Image(); //创建
  img.src = "img/01.jpg"; //图片地址
  img.onload = function() { //检测所有图像信息载入页面里
  context.drawImage(img, 0, 0); // img对象;0,0:img坐标起点
  };
 </script>
 </body>
 
</html>

Ausführlichere Beispiele für HTML5 Canvas 9-Zeichnungsbilder und verwandte Artikel finden Sie auf der chinesischen PHP-Website!


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)Nächster Artikel：Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)

In Verbindung stehende Artikel

Mehr sehen