canvas实现万花筒，canvas实现拾色器，canvas实现颜色反转，canvas实现马赛克，canvas实现放大镜

最新推荐文章于 2024-01-23 10:19:45 发布
最新推荐文章于 2024-01-23 10:19:45 发布
阅读量301 收藏
点赞数
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blue__k/article/details/108411194
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--     此操作需要把文件复制在在XAMPP里面的htocs在127.0.0.1打开 -->

<body>
    <canvas id="myCanvas" width='1000' height='500' style='border:1px solid red ;display:block;margin:0 auto;'></canvas>
    <script>
        var c = document.getElementById('myCanvas');
        var btn = document.querySelector('#btn');
        var cxt = c.getContext('2d');
        var imgM = new Image();
        imgM.src = 'img/s.jpg';
        imgM.onload = function () {
            //左上角
            cxt.translate(0,0);
            cxt.scale(1,1);
            cxt.drawImage(imgM, 0, 0, 500, 500, 100, 100, 100, 100);

            cxt.translate(400, 0);
            cxt.scale(-1, 1);
            //右上角
            cxt.drawImage(imgM, 0, 0, 500, 500, 100, 100, 100, 100);

            //将canvas坐标系坐标原点重置为左上角
            cxt.scale(-1, 1);
            cxt.translate(-400, 0)
            cxt.translate(0, 400);
            cxt.scale(1, -1);
            //左下角
            cxt.drawImage(imgM, 0, 0, 500, 500, 100, 100, 100, 100);

            //将canvas坐标系坐标原点重置为左上角
            cxt.scale(1, -1);
            cxt.translate(0, -400)
            cxt.translate(400, 400);
            cxt.scale(-1, -1);
            //右下角
            cxt.drawImage(imgM, 0, 0, 500, 500, 100, 100, 100, 100);

//第二种方法
            /*  //左上角
             cxt.drawImage(imgM, 0, 0, 500,500,100, 100, 100, 100);
             cxt.setTransform(-1,0,0,1,400,0);//x缩放，切斜，平移
            
             //右上角
             cxt.drawImage(imgM, 0, 0, 500,500,100, 100, 100, 100);
             cxt.setTransform(1,0,0,-1,0,400);//x缩放，切斜，平移

             
             //左下角
             cxt.drawImage(imgM, 0, 0, 500,500,100, 100, 100, 100);
             cxt.setTransform(-1,0,0,-1,400,400);//x缩放，切斜，平移

            
             //右下角
             cxt.drawImage(imgM, 0, 0, 500,500,100, 100, 100, 100); */

        }
    </script>
</body>

</html>

拾色器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拾色器</title>
    <style>
        #cursor {
            width: 5px;
            height: 5px;
            position: absolute;
        }

       .bb{
            width:400px;
            margin:0 auto;
            height:40px;
            background-color: #ccc;
            text-align:center;
            line-height:40px;
            color:#fff;
        }
    </style>
</head>
<!--涉及到imageData 此操作在服务器进行！ -->

<body>
    <div class='bb'>颜色显示区域</div>
    <!-- <div id='cursor'>+</div> -->
    <canvas id="myCanvas" width='800' height='600' style='border:1px solid red ;display:block;margin:30px auto;'></canvas>
    <script>
        var bb=document.querySelector('.bb');
        var c = document.getElementById('myCanvas');
        var cxt = c.getContext('2d');
        var imgM = new Image();
        imgM.src = 'img/wy.jpg';
        imgM.onload = function () {
            cxt.drawImage(imgM, 0, 0, 800, 600);
            c.onclick = function (event) {
                var even = event || window.event
                var x = even.clientX - c.offsetLeft;
                var y = even.clientY - c.offsetTop;
                var getID = cxt.getImageData(x, y, 1, 1);
                console.log(getID);
                for (var i = 0; i < getID.data.length; i += 4) {
                    var r = getID.data[i + 0];
                    var g = getID.data[i + 1];
                    var b = getID.data[i + 2];
                    var a = getID.data[i + 3];
                    var rgbaColor = 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
                    console.log(r, g, b, a);
                    console.log(rgbaColor);
                }
                // 点击位置绘制一个十字坐标
                function setCursor(x, y) {
                    // <div id="cursor" class="cursor"></div>
                    var cursor = document.getElementById('cursor');
                    if (!cursor) {
                        cursor = document.createElement('div');
                        cursor.id = 'cursor';
                        document.body.appendChild(cursor);
                        var curtext = document.createTextNode('+');
                        cursor.appendChild(curtext);
                    }
                    cursor.style.left = x - 5 + 'px';
                    cursor.style.top = y - 7 + 'px';
                }
                setCursor(even.clientX,even.clientY);
                document.body.style.backgroundColor = rgbaColor;
                bb.innerHTML='此时的颜色是：'+rgbaColor;
            }
        }
    </script>
</body>

</html>

颜色反转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--     此操作需要把文件复制在在XAMPP里面的htocs在127.0.0.1打开 -->

<body>
    <canvas id="myCanvas" width='800' height='500' style='border:1px solid red ;display:block;margin:0 auto;'></canvas>
    <input type="button" id='btn' value='反相'>
    <script>
        var c = document.getElementById('myCanvas');
        var btn = document.querySelector('#btn');
        var cxt = c.getContext('2d');
        var imgM = new Image();
        imgM.src = 'img/wy.jpg';
        imgM.onload = function () {
            cxt.drawImage(imgM, 0, 0, 800, 600, 0, 0, 800, 600);
            btn.onclick = function () {

                //1.获取所有的像素点
                var getID = cxt.getImageData(0, 0, c.width, c.height);
                //2.清除画布
                cxt.clearRect(0, 0, c.width, c.height)
                //3.重置点的颜色 第一种
                for (var i = 0; i < getID.data.length; i += 4) {
                    var r = getID.data[i + 0];
                    var g = getID.data[i + 1];
                    var b = getID.data[i + 2];
                    getID.data[i + 0] = 255 - r;
                    getID.data[i + 1] = 255 - g;
                    getID.data[i + 2] = 255 - b;
                }
                //3.重置点的颜色 第二种
                /* for (var i = 0; i < getID.width * getID.height; i++) { // 0-4
                    pixCol[i * 4] = 255 - pixCol[i * 4];
                    pixCol[i * 4 + 1] = 255 - pixCol[i * 4 + 1];
                    pixCol[i * 4 + 2] = 255 - pixCol[i * 4 + 2];
                } */
                //4.重新绘制到canvas
                cxt.putImageData(getID, 0, 0);
            }
        }
    </script>
</body>

</html>

马赛克

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width='960' height='540' style='border:1px solid red ;display:block;margin:0 auto;'></canvas>
    <input type="button" value='点击' class='btn'>
    <script>
        var btn = document.querySelector('.btn');
        var c = document.getElementById('myCanvas');
        var cxt = c.getContext('2d');
        var imgM = new Image();
        imgM.src = 'img/wy.jpg';
        imgM.onload = function () {
            cxt.drawImage(imgM, 0, 0, c.width, c.height);

            btn.onclick = function () {
                //1.获取所有的像素
                var getID = cxt.getImageData(0, 0, c.width, c.height);
                cxt.clearRect(0, 0, c.width, c.height);
                var pixels = getID.data;
                //2.分网格
                var row = 54; //54行，10px一行 矩形的高
                var col = 96; //96列，10px一列 矩形的宽
                //将来绘制的矩形的尺寸
                var w = c.width / col;
                var h = c.height / row;

                //3.绘制矩形
                //外层for循环控制行
                for (var i = 0; i < row; i++) {
                    //内层for循环控制列
                    for (var j = 0; j < col; j++) {
                        //当前举行前后有多少个点
                        var points = i * h * c.width + j * w;
                        //当前举行左上角的点的像素在pixels数组中的下标
                        var index = points * 4;
                        //颜色
                        var color = 'rgb(' + pixels[index] + ',' + pixels[index + 1] + ',' + pixels[index + 2] +
                            ')';
                        //设置填充颜色
                        cxt.fillStyle = color;
                        //绘制矩形
                        cxt.fillRect(j * w, i * h, w, h);
                        //绘制圆形
                        /*  cxt.beginPath();
                         cxt.arc(j*w+w/2,i*h+h/2,w/2,0,Math.PI*2,true);
                         cxt.closePath();
                         cxt.fill(); */
                    }
                }
            }

        }
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas" width='800' height='600' style='border:1px solid red ;'></canvas>
    <script>
        /* 
        鼠标按下获取坐标，次坐标设为放大镜的圆心，此时需要绘制圆形，用到图形组合方式，令目标在上面，鼠标移动获取坐标
         */
        var c = document.getElementById('myCanvas');
        var cxt = c.getContext('2d');
        var imgM = new Image();
        imgM.src = 'img/wy.jpg';
        imgM.onload = function () {
            cxt.drawImage(imgM,0,0,800, 600,0,0,800, 600);
            c.onmousedown = function (event) {
                c.onmousemove = function (event) {
                    //设置canvas的宽高
                    c.width = 800;
                    c.height = 600;
                    cxt.drawImage(imgM,0,0,800, 600,0,0,c.width, c.height);
                    //获取移动时的坐标
                    var even = event || windwo.event
                    var x1 = even.clientX-c.offsetLeft;
                    var y1 = even.clientY-c.offsetTop;

                    cxt.globalCompositeOperation = 'destination-out';

                    cxt.beginPath();
                    cxt.arc(x1, y1, 100, 0, Math.PI * 2, true);
                    cxt.fill();

                    cxt.globalCompositeOperation = 'destination-over';
                    cxt.drawImage(imgM, x1 - 100, y1 - 100, 200, 200, x1 - 200, y1 - 200, 400, 400);
                }


            }
            c.onmouseup = function () {
                c.onmousemove = null;
                c.width = 800;
                c.height = 600;
                cxt.drawImage(imgM,0,0,800, 600,0,0,c.width, c.height);
            }
        }
    </script>
</body>

</html>

wy.jpg
在这里插入图片描述

coderdwy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
fabric.js 获取canvas中的某个元素中的子元素
weixin_42610010的博客
01-06 495
fabric.js 中有一个方法叫做 getObjects()，你可以使用它来获取 canvas 中的所有元素。如果你想要获取某个元素的子元素，可以使用这个元素的 getObjects() 方法。 例如，假设你想要获取 canvas 中名为 "parent" 的组的子元素。你可以这样做： const canvas = new fabric.Canvas('canvas'); const paren...
基于canvas画布的实用类Fabric.js的使用
qq_40007317的博客
07-31 4349
一、Fabric.js简介Fabric.js是一个对canvas进行封装的Javascript库，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。它主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能；还可以给图形填充渐变颜色；各个图形可以相互组合等等。
fabricjs 插件使用
mcsddnn的博客
05-30 869
我将向您介绍Fabric.js —一个功能强大JavaScript库，可以轻松处理HTML5 canvas元素。 Fabric为画布提供了丢失的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。
类、对象、属性、方法、事件 的区别与联系
东风起的博客
10-31 2418
类、对象、属性、方法、事件 概念 对象：系统中的运行实体，窗体和控件 类：对具有相同性质的对象的一种抽象，一个对象就是类的一个实例 属性：定义了对象的外观，描述对象的状态特征 方法：定义了对象的行为，即对象自己可以做的事情 事件：定义了对象与用户的交互，如单击，双击，鼠标移动等
canvas像素点获取 —— 拾色器、放大器
weixin_33889245的博客
09-10 1625
原文地址 前言 最近在学习canvas，然后照葫芦画瓢简单实现了几个小demo，跟大家一块学习一下。 主要内容 两个方法：drawImage、getImageData 前端图片预览、跨域图片问题 两个方法：drawImage、getImageData drawImage 用法： context.drawImage(img[, sx, sy, swidth, sheight], x, y[,...
canvas之万花筒效果的简单实现(推荐)
09-24
下面小编就为大家带来一篇canvas之万花筒效果的简单实现(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas实现图像放大镜
08-31
本篇文章将深入探讨如何使用 `canvas` 实现图像放大镜效果。 首先，我们要创建一个 `canvas` 元素，并设置其宽高。在HTML代码中，我们可以看到一个 `canvas` 元素被定义，并设置了边框以便于观察： ```html ...
基于HTML5 canvas实现图片马赛克特效.zip
07-11
本项目利用canvas实现了图片马赛克特效，这是一种常见的图像处理技术，用于模糊或遮盖图像的某些部分，以保护隐私或创造艺术效果。下面将详细阐述这一实现过程。 首先，我们需要创建一个HTML页面，包含一个canvas...
vue+transform 3D图片长廊
最新发布
henghahouhei的博客
01-23 428
vue+transform 3D图片长廊
vue3实现吸顶
weixin_45233925的博客
08-27 619
vue3实现吸顶
vue项目中实现3D万花筒和3D文字旋转效果
deciduous_leaves的博客
07-17 1279
【代码】vue项目中实现3D万花筒和3D文字旋转效果。
Canvas 在GitHub上点星最高的框架Fabricjs 第四弹（综合）
qq_38146392的博客
04-30 1146
canvas fabric.js api梳理 下面是canvas fabric.js的用法 锁住 lockMovementX lockMovementY lockRotation lockScalingX lockScalingY 12 选中元素时去掉连接线 object.hasBorders = false; 1 选中元素时去掉四边的框 object.hasContro...
canvas fabric.js api梳理
晏紫苏_cc的博客
09-04 1万+
下面是canvas fabric.js的用法锁住 lockMovementX lockMovementY lockRotation lockScalingX lockScalingY选中元素时去掉连接线object.hasBorders = false;选中元素时去掉四边的框object.hasControls=false;设置选中元素时的样子object.set({ b
在Canvas中绘制圆角矩形
热门推荐
Sarkuya的编程园地
11-12 4万+
本文剖析了 Canvas API 中 arc 及 arcTo 函数的特征，并分别使用它们实现了 Canvas API 中所未提供的绘制圆角矩形的功能。
用 canvas 制作简易版组态 联动连接工具
嘿嘿
05-02 744
效果如下，拖动任意一个，连线会随着动， （连线连的比较随意，后期换别的版本了，就没继续做下去） 1.1 支持任意添加 1.2 支持右键删除 1.3 支持联动 使用说明： 1.点击图片添加图片 2.进入连线模式侯才可以连线 <!DOCTYPE html> <html> <head> <title>鼠标滚轮</title> <meta charset="utf-8"> <style> .
canvas绘制海报分享，海报中设置圆角二维码
a_靖的博客
08-25 2178
canvas绘制海报分享，海报中设置圆角二维码，背景图，动态的文字，绘制完成以后保存为图片，可长按分享海报图片。
canvas系列教程02——圆、弧线、圆角矩形、曲线（气泡、心形、N叶草）、扇形
朝阳39的博客
04-22 1232
此系列教程层层递进，建议按顺序阅读 canvas系列教程01——直线、三角形、多边形、矩形、调色板 https://blog.csdn.net/weixin_41192489/article/details/124333306 圆 arc() cxt.beginPath(); cxt.arc(x,y,半径,开始角度,结束角度, anticlockwise); cxt.closePath(); (x,y)为圆心坐标 开始和结束角度的单位为弧度，推荐写法如下： 120*Math.PI/180
使用Canvas制作马赛克
qq_62994974的博客
12-31 514
Canvas制作马赛克
HTML5 Canvas自由拼图实现详解
这个方法负责设置Canvas元素，创建画布背景，创建容器，以及初始化事件监听器，如鼠标点击和拖动事件，这些事件处理函数将实现拼图的交互功能。 在实现自由拼图功能时，通常会涉及以下步骤： 1. **创建Canvas**：在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderdwy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值