Question

Canvas元素没有以正确的高度和宽度传递给函数，现在我通过在将画布传递给接受函数后再次指定画布的高度和宽度来解决问题。因为我是新手，所以我想知道这是否是帆布的问题？。

$(document).ready(function(){

    calling_function = function(eventObj){
       //some code
        ajaxOptsFtn =  {
                    url: '/xyz_data/',
                    dataType: 'json',
                    data: form_vals,
                    success: function(resp){
                        //initialisation for function.
                        if(resp.var_ready === true){
                        //dynamically adding canvas element.
                        var canvas_obj = $('<canvas/>').css({width:160, height:240});
                        $(clicked_element).children('canvas').remove();
                        $(clicked_element).append(canvas_obj);   
                        //intilise other arguments with some values
                        var x = 30;
                        var y= http://abcs.com/dds.jpg;
                        var z = resp.apparel_img_url;
                        var nl = gamma_value;
                        var wD = 23;
                        var wU = 26;

                        acceptingFunction(canvas_obj[0],y,z,x,n,wU,wD);
                     } 
                     else{
                         console.log('some other message');
                     }
                 },
        };
        if (data.var_ready) {
            $.ajax(ajaxOptsFtn);
        }
        else{
            console.log('some message'); 
        };
    };

    acceptingFunction = function(canvas_obj,y,z,x,n,wU,wD){

        canvas = canvas_obj;
        console.log("canvas passed height and width:"+ canvas.height +","+canvas.width);
        console.log("re assigning expected values");
        canvas.width = 160;
        canvas.height = 240;
        var context = canvas.getContext('2d');
        //some code
        AimageObj.onload = function () {
            //some code
        };

        BimageObj.onload = function () {
        //some code 
        };
    };

Answer 1

您必须使用属性设置画布的大小，而不是CSS - 例如：

var canvas_obj = $('<canvas/>').attr({'width': 160, 'height': 240});

如果不这样做，canvas元素将默认为300 x 150像素的大小，仅由CSS（如图像）拉伸。

同样，当你想要获得画布的大小时，你也会阅读相同的属性/属性。

我有written a blog post that explains this in details - 对于SO而言太长了，但这是必不可少的部分：

如果我们没有为画布的源位图设置任何实际大小，它将会   根据{{3}}默认为300 x 150像素。如果你现在设置了   这个元素的CSS大小可以说是900 x 450像素   那些300 x 150像素只是缩放到新的大小   CSS适用于元素，而默认的300 x 150适用于   源位图（即图像）。应用的CSS规则不起作用   任何具有实际位图大小的内容。

如果画布是一个有效的图像，那将完全相同   以类似的方式：它有图像元素，然后是源   位图 - 图像本身。如果您选择使用不同的尺寸   这个元素不是图像，而是简单地拉伸图像   它的原始数据保持不变。没有更多或更少的像素   原始图片。

Answer 2

从HTML5的角度来看，它也很容易实现。简单如下：

<canvas id="canvasName" width="160" height="240">
    <p>Sorry, The Canvas element is not supported in this browser :(</p> 
</canvas>

添加段落使得不支持Canvas的浏览器（例如IE6）会弹出此行而不是Canvas。但是将它放入HTML5文件可以很容易地绘制可以使用Javascript处理的Canvas。只需确保在加载Javascript之前加载Canvas，否则它将崩溃

然后你必须在Javascript中用

声明它

var canvas = document.getElementById("mCanvas");
var context = canvas.getContext("2d");

你可以在Console.log中确保它连接正确

正确的画布高度和宽度未传递给函数

2 个答案: