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编写开心消消乐游戏的示例代码

    基于JS编写开心消消乐游戏的示例代码

    这篇文章主要为大家介绍了如何利用JavaScript实现开心消消乐小游戏,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • js实现拖拽效果(构造函数)

    js实现拖拽效果(构造函数)

    这篇文章主要介绍了js利用构造函数实现拖拽效果
    2015-12-12
  • 微信小程序开发之转发分享功能

    微信小程序开发之转发分享功能

    这篇文章主要介绍了微信小程序开发之转发分享功能的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • 微信小程序使用input组件实现密码框功能【附源码下载】

    微信小程序使用input组件实现密码框功能【附源码下载】

    这篇文章主要介绍了微信小程序使用input组件实现密码框功能,涉及input组件布局设置相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • javascript构造函数以及原型对象的理解

    javascript构造函数以及原型对象的理解

    本文主要介绍了javascript构造函数以及原型对象的理解。分享了有关它们的实例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript中标识符提升问题

    JavaScript中标识符提升问题

    标识符指的是javascript中定义的符号,标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成,但标识符不能以数字开头,也不能是javascript中的保留关键字。并且要注意,javascript是严格区分大小写的。
    2015-06-06
  • js实现精美的银灰色竖排折叠菜单

    js实现精美的银灰色竖排折叠菜单

    这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下
    2015-05-05
  • BootstrapTable refresh 方法使用实例简单介绍

    BootstrapTable refresh 方法使用实例简单介绍

    本文就bootstrapTable refresh 方法如何传递参数做简单举例说明,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • 客户端js性能优化小技巧整理

    客户端js性能优化小技巧整理

    说起javascript无人不知无人不晓吧,下面是一些关于客户端JS性能的一些优化的小技巧,希望对大家有所帮助
    2013-11-11
  • JS实现的雪花飘落特效示例

    JS实现的雪花飘落特效示例

    这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形式详细分析了JavaScript结合时间函数动态操作页面元素的相关实现技巧,需要的朋友可以参考下
    2019-12-12

最新评论