当前位置:首页 » 《随便一记》 » 正文

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

29 人参与  2022年02月21日 08:36  分类 : 《随便一记》  评论

点击全文阅读


首先声明:这个代码案例来源于:
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>


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


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/35057.html

代码  修改  鼠标  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 重生在高考前,我笑着送竹马和小太妹去庆祝成人礼(方子期孟知婉)_重生在高考前,我笑着送竹马和小太妹去庆祝成人礼(方子期孟知婉)
  • 知道自己是替身后,我选择自毁了独家首发_林昕巴掌宝藏文_小说后续在线阅读_无删减免费完结_
  • 我的娘子是大凶之物张一恒张一恒小说无删减阅读清爽版(张一恒)外篇+续集
  • 夫君停妻另娶挚友遗孀后,我杀疯了高分神作_贺朝小柔灵堂免费赏析_小说后续在线阅读_无删减免费完结_
  • 林冉顾承渊小说(许你万里晴空)+前传(林冉顾承渊)阅读
  • 京婚娇宠:是小尼姑也是嫡公主续集(姜以安周瑾臣)全本完整免费版_起点章节+后续(京婚娇宠:是小尼姑也是嫡公主)
  • 阮娇娇后续(纵她!禁欲小叔失控诱吻娇娇)(阮娇娇)整本畅享在线+无广告结局
  • 完结文流光错系断蓬之舟番外+完结列表_完结文流光错系断蓬之舟番外+完结(沈煜谢晚烟)
  • 重生1980:开局迎娶姐姐闺蜜小说(李毅唐雪)小说结尾+隐藏篇章(重生1980:开局迎娶姐姐闺蜜)畅享阅读
  • 全文一笑长明唯记相约前文+后续(江月肖楚宁)列表_全文一笑长明唯记相约前文+后续
  • 全文高考查分后,哥哥在我身上订满两百颗钉续集(沈眠月沈砚秋沈清欢)列表_全文高考查分后,哥哥在我身上订满两百颗钉续集
  • 西风暮雪埋初心人气节选许梨疏霍子枭完本_西风暮雪埋初心人气节选(许梨疏霍子枭)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1