简介 目录 评价 推荐
  • 无价脂宝 2020-11-19
    像素计算问题

    表示出来的结果是一样吗,你换一下都对比一下就知道了

    1回答·808浏览
  • Kerry251150 2020-09-04
    老师,如何用两个点画这种图形
    2回答·999浏览
  • qq_孤独之旅_1 2020-06-14
    WindowToCanvas中的xy是怎么传入值得

    调用方法传值

    1回答·1188浏览
  • 慕斯卡8272550 2020-04-18
    canvas跨域处理

    起一个本地服务就可以了

    1回答·1081浏览
  • 慕虎0392284 2020-04-01
    谷歌浏览器不支持onmousemove吗

    支持的呀

    1回答·1060浏览
  • 等她下班 2020-03-04
    老师,离屏canvas有一个问题请教

    fillStyle 可以设置成 RGBA,你应该在离屏 canvas 就处理好。然后调用目标 canvas 直接画

    1回答·1104浏览
  • 熊出没 2019-09-19
    思路一对图片进行缩放的算法是不是有问题?

    我看的时候也觉得有问题。。。不知道是不是我的理解有问题,截取是从原图(sx,sy)截取的,思路1正确的做法我觉得应该是把canvas的宽高等比缩小后原图宽高的1/2减去缩小后的画布宽高的1/2,截取下来的部分再放在画布上(0,0,canvas.width,canvas.height)

    2回答·1442浏览
  • qq_杨小姐好萌啊_0 2019-09-17
    图片放大后,显示不出的部分怎么看

    写几个滑块控制不同方向超出部分大小,注意这里就不能再使用 drawImageByScale 了,因为这个函数是以中心为缩放de。

    html代码,max,value等值随意。

    <input type="range" name="range" id="vertical" min="0" max="3.0" step="0.01" value="1.5" class="slider left">

    js代码:

    let canvas = document.querySelector('#canvas'),
        vertical = document.querySelector('#vertical'),    // 右侧滑块
       slider = document.querySelector('#range');
       
       ...
       
    let scale = slider.value;
    let exceedInfo = { dx: 0, dy: 0, imageWidth: 0, imageHeight: 0 };   // 缩放后的图像信息
    ...
    image.onload = () => {
       vertical.onmousemove = () => {
         const { dx, dy } = exceedInfo;
         dy < 0 && drawExceedImage(vertical.value); // 超出的时候小于0
       }
    }
    
    // 绘制超出部分
    function drawExceedImage(y) {
       context.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
       const { dx, imageWidth, imageHeight } = exceedInfo;
       context.drawImage(image, dx, -y, imageWidth, imageHeight);
    }
                
    function drawImageByScale(scale) {
      ...
      if (dy < 0) {
        let max = Math.abs(dy) * 2;  // 滑块的最大值,dy是顶部超出,因为纵向只用了一个滑块,所以底部 + 顶部 = *2
        vertical.max = max;
        vertical.value = max / 2;  // 初始值是中间值,表示无translateY
      }
      ...
        return { dx, dy, imageWidth, imageHeight }
    }

    一开始是这样:

    http://img4.mukewang.com/60b4a74300016cb110940428.jpg

    这时候其实没有超出,可以隐藏右侧滑块,我没写。

    放大后这样(已经在垂直方向超出了):

    http://img1.mukewang.com/60b4a7170001f3a010530412.jpg

    拖到顶部是这样:

    http://img4.mukewang.com/60b4a6ed00019a6310810401.jpg

    拖到底部是这样:

    http://img1.mukewang.com/60b4a67300014daf10790400.jpg

    2回答·2069浏览
  • 慕桂英1016021 2019-05-28
    说什么属性不是一个long 怎么办

    contexta应该是canvasa吧

    1回答·1322浏览
  • qq_Takeiteasy_2 2019-04-26
    我的图片为啥不能自动填满整个画布?当我把canvas的dh参数设置成1200的时候就自动填满了。。

    找到原因了,我截取的时候截取的大小超过了图片的大小,所以。。

    1回答·1959浏览
  • 何时才能成大佬 2019-04-03
    for循环的遍历与图中每个像素点在一维数组中的下标

    for (var i=0;i<5;i++){

    for (var j=0;j<3;j++){

    var p = i*3+j;

    document.write(p+' ');

    }

    }

    document.write("<br />");

    for (var i=0;i<5;i++){

    for (var j=0;j<3;j++){

    var p = j*3+i;

    document.write(p+' ');

    }

    }


    1回答·1583浏览
  • 何时才能成大佬 2019-04-02
    for循环
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
     .btn{
                text-decoration: none;
                border: 1px solid black;
                border-radius: 5px;
                background: white;
                color: black;
                padding: 10px;
                box-shadow: 5px 5px 5px #b7b7b7;
            }
        </style>
    </head>
    <body>
    
    <div style="margin:20px auto;width:1168px;">
        <canvas id="canvasa" width="582" height="388" style="display:block;float:left;border:1px solid #aaa;"></canvas>
        <canvas id="canvasb" width="582" height="388" style="display:block;float:right;border:1px solid #aaa;"></canvas>
        <div style="clear:both;"></div>
    
        <div style="text-align:center;margin-top:50px;font-size:20px;">
            <a href="javascript:blurEffect()" class="btn">Blur Effect</a>
        </div>
    </div>
    
    
    <script>
     var cnvA=document.getElementById("canvasa");
        var cxtA=cnvA.getContext("2d");
    
        var cnvB=document.getElementById("canvasb");
        var cxtB=cnvB.getContext("2d");
    
        var image=new Image();
        window.onload=function(){
            image.src="images/02.jpg";
            image.onload=function(){
                cxtA.drawImage(image,0,0,cnvA.width,cnvA.height);
            }
    
        };
    
    
    
    
    
    
    
        function blurEffect(){
            var imageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
            var data=imageData.data;
    
            var tempImageData=cxtA.getImageData(0,0,cnvA.width,cnvA.height);
            var tempData=tempImageData.data;
    
            var blurR=3;
            var number=(blurR+1+blurR)*(blurR+1+blurR);
            for(var i=blurR;i<.height-blurR;i++){
                for(var j=blurR;j<cnvB.width-blurR;j++){
    
                    var sumR=0,sumG= 0,sumB=0;
                    for(var dx=-blurR;dx<=blurR;dx++){
                        for(var dy=-blurR;dy<=blurR;dy++){
                            var x=i+dx;
                            var y=j+dy;
    
                            var index=x*cnvB.width+y;
                            sumR+=tempData[index*4+0];
                            sumG+=tempData[index*4+1];
                            sumB+=tempData[index*4+2];
                        }
                    }
                    var index=i*cnvB.width+j;
                    data[index*4+0]=sumR/number;
                    data[index*4+1]=sumG/number;
                    data[index*4+2]=sumB/number;
                }
            }
    
            cxtB.putImageData(imageData,0,0,0,0,cnvB.width,cnvB.height);
        }
    
    
    
    </script>
    </body>
    </html>



    https://img3.mukewang.com/5cd39b0e0001c8ff05180662.jpg

    https://img.mukewang.com/5cd39b0e00014b0207290667.jpg

    https://img1.mukewang.com/5cd39b0e0001f93a14170521.jpg


    3回答·1560浏览
  • 慕用0489808 2019-03-24
    请问这个怎么解决呀

    是因为没有服务器环境吧,不要用本地图片再试一下

    1回答·1015浏览
  • 第二钢协 2019-03-05
    css 里面,有一个属性filter,可以直接产生滤镜效果,大家感兴趣的话可以试一试
    2回答·1765浏览
  • 猫猫猫尾草 2018-12-14
    是不是有点小问题

    这哪是什么小问题呀,这 

    0回答·1129浏览
  • 大学霸 2018-11-23
    有个疑问,canvas处理图片在实际中有什么用途?

    比如查看商品的图片时点击可以弹出浏览并可以放大和缩小等一些操作

    1回答·1468浏览
  • king0964 2018-10-08
    pixelData只是获取imageData.data数据,为什么改了后,imageData也跟着变了,这个是什么原理?

    因为对象的赋值操作是引用赋值操作。

    1回答·1938浏览
  • 幕布斯6573378 2018-08-23
    橡皮筋框选获取坐标

    onmousedown()和onmouseup()获取鼠标按下和松开的坐标,再计算一下相对于canvas画布位置的坐标应该就可以算出来了

    1回答·1251浏览
  • 精慕门1560878 2018-08-14
    是否能出一个关于D3+Canvas的教程?

    同求感觉d3没有什么系统的教程


    1回答·1607浏览
  • x米多米拉 2018-08-08
    blurR越大,未被处理的像素点越多

    改成下面这样了,不知道还有没有问题,欢迎交流~

    var blurR = 50;

    for(var i = 0; i < canvasA.height; i++){

        for(var j = 0; j < canvasA.width; j++ ){

            var r = 0,g = 0,b = 0,totalNum = 0;

            for(var m = -blurR; m <= blurR; m++){

                for(var n = -blurR; n <= blurR;n++){

                    var x = i + m;

                    var y = j + n;

                    if(x<0||y<0||x >= canvasA.height ||y >= canvasA.width)

                    continue;

                    totalNum++;

                    var p = x*canvasA.width+y;

                    r += tmpData[4*p+0];

                    g += tmpData[4*p+1];

                    b += tmpData[4*p+2];

                }

            }

            var p = i*canvasA.width+j;

            tmpData[4*p+0] = r/totalNum;

            tmpData[4*p+1] = g/totalNum;

            tmpData[4*p+2] = b/totalNum;

        }

    }


    1回答·556浏览
  • JeAioTime 2018-07-20
    我的代码实现不了放大效果
    已采纳 沐oo音 的回答

    要找一张比画布大的图片才可以看出效果

    1回答·1228浏览
  • qq_锋田鸣歌_04346908 2018-03-23
    canvas 怎么修改图片饱和度

    这个问题有意思,就是饱和度的计算公式,有了这个公式就和灰度效果的实现差不多

    1回答·1803浏览
  • Serena_Cecilia 2018-01-18
    关于图像显示的问题

    自己回答一下,果然是因为图片引用上出问题了,如果放img文件夹中,引用应该写为“../img/img.jpg”

    1回答·1306浏览
  • 慕函数5127544 2017-12-06
    canvas可以用来切图吗

    当然可以

    1回答·1547浏览
  • qq_A風love銘_0 2017-11-10
    请问如何解决canvas 在高清屏下的模糊问题

    我是先将  canvas的大小与  图片大小调成一致   然后在渲染过后的canva用 css的手段 将其限制大小  这样就不会失帧了


    4回答·1957浏览
  • 慕设计2571273 2017-09-21
    js里面 onmouseup默认事件是什么?

    鼠标抬起啊


    1回答·1643浏览
  • TalorCC 2017-08-23
    没什么

    so what



    1回答·1238浏览
  • DangCode 2017-08-12
    为什么getBoundingClientRect函数获得的left总是不对啊

    getBoundingClientReact是获得元素相对与游览器视窗的left、top、right、bottom的值


    1回答·2417浏览
  • 慕粉210917370 2017-08-07
    canvas 保存到手机图片

    保存图片到手机这个问题解决了吗?

    6回答·3663浏览
  • 沉谙 2017-07-28
    Clip性能问题

    context.clearRect(0,0,canvas.width,canvas.height);每次点击之后你是不是没有重新来绘制canvas,没有清空呢?

    1回答·1843浏览
数据加载中...
开始学习 免费