HTML5 canvas 9绘制图片实例详解

更新时间：2016年09月06日 15:21:52 投稿：lqh

HTML5 canvas 9绘制图片

绘制图片

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

图片平铺

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

Context.fillStyle=pat;

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

图片裁剪

先绘制好路径

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>

您可能感兴趣的文章:

基于JS编写开心消消乐游戏的示例代码
这篇文章主要为大家介绍了如何利用JavaScript实现开心消消乐小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
js实现拖拽效果（构造函数）
这篇文章主要介绍了js利用构造函数实现拖拽效果
2015-12-12
微信小程序开发之转发分享功能
这篇文章主要介绍了微信小程序开发之转发分享功能的实现，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10
微信小程序使用input组件实现密码框功能【附源码下载】
这篇文章主要介绍了微信小程序使用input组件实现密码框功能,涉及input组件布局设置相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
2017-12-12
javascript构造函数以及原型对象的理解
本文主要介绍了javascript构造函数以及原型对象的理解。分享了有关它们的实例代码，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript中标识符提升问题
标识符指的是javascript中定义的符号，标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成，但标识符不能以数字开头，也不能是javascript中的保留关键字。并且要注意，javascript是严格区分大小写的。
2015-06-06
js实现精美的银灰色竖排折叠菜单
这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下
2015-05-05
BootstrapTable refresh 方法使用实例简单介绍
本文就bootstrapTable refresh 方法如何传递参数做简单举例说明，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-02-02
客户端js性能优化小技巧整理
说起javascript无人不知无人不晓吧，下面是一些关于客户端JS性能的一些优化的小技巧，希望对大家有所帮助
2013-11-11
JS实现的雪花飘落特效示例
这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形式详细分析了JavaScript结合时间函数动态操作页面元素的相关实现技巧,需要的朋友可以参考下
2019-12-12