注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (5)Image  

2011-04-02 12:46:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 如何在Canvas中使用图片?

1.创建一个图片对象

var img = new Image();  //创建一个image的对象

img.src = 'images/map.jpg';

2.使用drawImage方法在Canvas中放入图片

 context.drawImage(img,0,0);

drawImage用法

drawImage(image,x,y)  (x,y) 为图片位置  

drawImage(image,x,y,width,height) width height 可以重新定义图片的高宽

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。

详解:

  Html5 Canvas (5)Image - zhenghaoju700 - zhenghaoju700 的博客?

一个例子

用圆圈标出北京的大概位置 和 对图片进行切割

 

  Html5 Canvas (5)Image - zhenghaoju700 - zhenghaoju700 的博客?

 

CODE

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas Images</title>

</head>

<body>

<canvas id="c" height="600" width="800"></canvas>

<script type="text/javascript">

var c = document.getElementById('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

var img = new Image();  //创建一个image的对象

img.src = 'images/map.jpg';

    context.drawImage(img,0,0);

    context.strokeStyle = '#FFFFFF';

    context.beginPath();

//context.arc(200,80,1,0,Math.PI*2);

context.arc(200,80,5,0,Math.PI*2);

//context.arc(200,80,15,0,Math.PI*2);

context.closePath();

context.stroke();

//drawImage(image,x,y)  

//drawImage(image,x,y,width,height) width height可以重新定义图片的高宽

//drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

    //前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。

    //将图片切割 

for(var i=0; i<300; i = i+60){

for(var j=0; j<200;j = j+50){

                           context.drawImage(img,i,j,60,50,i,200+j,59,49);

}

}

</script>

</body>

</html>

 

  评论这张
 
阅读(665)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017