源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

HTML5 canvas 9绘制图片实例详解

  • 时间:2020-04-10 19:56 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:HTML5 canvas 9绘制图片实例详解
[b]绘制图片[/b] 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); [b]图片平铺[/b] [img]http://files.jb51.net/file_images/article/201609/201696151938587.png?20168615203[/img] Var pat= context.createPattern(image,”repeat”); Context.fillStyle=pat; Context.fillRect(0,0,400,300); [b]图片裁剪[/b] [img]http://files.jb51.net/file_images/article/201609/201696152038523.png?201686152058[/img] 先绘制好路径   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>



  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部