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

前端开发那点事儿

冒犯之处,敬请谅解。

 
 
 

日志

 
 
 
 

HTML5 获取像素颜色  

2013-05-07 12:13:15|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<html>
<head>
<title> Learning HTML5 canvas </title>
<meta content="">
<style>
</style>
<script type="text/javascript" src="http://evanwukong.blog.163.com/blog/jquery-1.7.2.min.js"></script>
</head>
<body>
<canvas id="myCanvas" width="300" height="230"></canvas>
<div id="info"></div>

<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.src="http://evanwukong.blog.163.com/blog/lena.jpg";
$(image).load(function() {
ctx.drawImage(image, 0, 0);
});

$(canvas).click(function(e) {
var canvasOffset = $(canvas).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixcolor = "rgba(" + pixel[0] + "," + pixel[1] + "," + pixel[2] + "," + pixel[3] + ")";
$("#info").text(String(canvasX)+","+String(canvasY)+":"+pixcolor);

ctx.fillStyle = "#baccda";
ctx.fillRect(canvasX-5, canvasY-5, 10, 10);
//ctx.putImageData(imageData,0,0);本来想修改像素以后用这个的,为什么没有效果呢……
});

</script>
</body>
</html>


HTML5 获取像素颜色 - Diligent - PHP开发那些事儿
  评论这张
 
阅读(610)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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