search

Home  >  Article  >  Web Front-end  >  Detailed explanation of image drawing examples in HTML5 canvas 9

Detailed explanation of image drawing examples in HTML5 canvas 9

高洛峰
高洛峰Original
2017-01-11 17:00:171758browse

Draw an image

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);

Picture tiling

HTML5 canvas 9绘制图片实例详解

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

Context.fillStyle=pat;

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

Picture cropping

HTML5 canvas 9绘制图片实例详解

Draw the path first

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>

For more detailed explanations of HTML5 canvas 9 picture drawing examples and related articles, please pay attention to the PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)Next article：HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)

Related articles

See more