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

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

4 人参与  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)
  • 赞助本站

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

最新文章

  • 熵忆迷局老扳手与记忆黑洞(陈昊陈小川)_熵忆迷局老扳手与记忆黑洞陈昊陈小川
  • 我的日记曝光后,全网为我痛哭好评_乔慕叶向文慕雪热门_小说后续在线阅读_无删减免费完结_
  • 末世重生后,我嘎了女主!小说(姜颂宁沈奕淮)(末世重生后,我嘎了女主!)全书+后续+结局在线阅读
  • 我治好了他的病,他却要离婚(韩景深程雨涵)_我治好了他的病,他却要离婚(韩景深程雨涵)
  • 天生童子命却被未婚妻骗走万贯家财,重生我逆天改命(林晚棠时宴)_天生童子命却被未婚妻骗走万贯家财,重生我逆天改命
  • 妻子为白月光,断我十指(苏晴江辰),妻子为白月光,断我十指
  • 全书浏览三万块(方建华,王大妈,那是)_三万块(方建华,王大妈,那是)全书结局
  • 被竹马们献祭恶鬼后,我反嫁神明三年抱俩更新_清欢小姐侯府精彩分享_小说后续在线阅读_无删减免费完结_
  • 闺蜜想母凭子贵嫁豪门,我成全她(许如如金如意周泽谐)全书浏览_闺蜜想母凭子贵嫁豪门,我成全她全书浏览
  • 挺孕肚退婚!太子爷拐她火速领证小说(挺孕肚退婚!太子爷拐她火速领证)(楼予曦顾璟珩)完整章节列表_笔趣阁
  • (考公上岸:沈县长请多指教!)考公上岸:沈县长请多指教!小说(沈延舟安岁岁)整书在线无广告高口碑小说
  • 被全府抛弃后,弹幕教我勾帝心列表_被全府抛弃后,弹幕教我勾帝心(许泠玥温祁晏)

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

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