本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(314)

2021-04(186)

2021-05(139)

2021-06(104)

2021-07(3)

Canvas-getImageData()用鼠标移动和点击来后去移动点或点击点的颜色RGBA值

发布于2021-10-05 20:57     阅读(606)     评论(0)     点赞(20)     收藏(2)


首先声明:这个代码案例来源于:
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas#%E7%BC%A9%E6%94%BE%E5%92%8C%E5%8F%8D%E9%94%AF%E9%BD%BF
不过其中代码运行出现一些问题。自己做了修改后完成。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Canvas-像素操作</title>
     </head>
     <body>
          <canvas id="canvas" width="300" height="227"></canvas>
          <canvas id="canvas2" width="300" height="200"></canvas>
          <canvas id="canvas3" width="300" height="200"></canvas>



     </body>

          <script>
               /*
               var canvas=document.getElementById("canvas");
               var ctx=canvas.getContext("2d");
               var img=new Image();// 创建一个<img>元素
               img.crossOrigin='anonymous';
               img.src='./rhino.jpg';
               img.οnlοad=function(){
                  ctx.drawImage(img,0,0);
                  img.style.display='none';  
               };
               
               canvas.addEventListener('click',function(e){
                   var x=e.offsetX;
                   var y=e.offsetY;
                   console.log(ctx.getImageData(100,150,5,5));
                   console.log(ctx.getImageData(x,y,1,1).data);
               });
               */

               var img=new Image();
               img.src='./color.jpg';
               img.crossOrigin='anonymous';//这行代码很重要;
               var canvas=document.getElementById('canvas');
               var ctx=canvas.getContext('2d');
               img.onload=function(){
                    ctx.drawImage(img,0,0);
                    img.style.display='none';
               };
               var hoveredColor=document.getElementById('canvas2');
               var selectedColor=document.getElementById('canvas3');

               function pick(event,destination){
                    var x=event.layerX;//鼠标的x,y数值;
                    var y=event.layerY;
                    console.log('mouse position of x,y is ',x,y);
                    var pixel=ctx.getImageData(x,y,1,1);
                    var data=pixel.data;
                    //console.log('pixel is =',pixel);
                    //var data=pixel.data;
                    console.log('data is equal to ',data);
                    const rgba='rgba('+data[0]+','+data[1]+','+data[2]+','+data[3]/255+')';
                    console.log('rgba=  ',rgba);
                    destination.style.background=rgba;
                    destination.getContext('2d').font="24px serif";
                    destination.getContext('2d').strokeText(rgba,10,100);
                    return rgba;
               }
               canvas.addEventListener('mousemove',function(event){
                    hoveredColor.getContext('2d').clearRect(0,0,300,200);
                    pick(event,hoveredColor);
               });
               canvas.addEventListener('click',function(event){
                    selectedColor.getContext('2d').clearRect(0,0,300,200);
                    pick(event,selectedColor);
               
               });
               

          </script>
     </html>


给出结果:(自己做了修改后,每次颜色输出都会把原来地清除;)
在这里插入图片描述




所属网站分类: 技术文章 > 博客

作者:92wwhehjw

链接:http://www.qianduanheidong.com/blog/article/198100/0fbfda0f7750fcaecee7/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

20 0
收藏该文
已收藏

评论内容:(最多支持255个字符)