更改光标图像时找不到数据 uri

Question

         function rotateImageOnCanvas(path) {
             fighterJets = [];
                var img = new Image();
            img.src = path;
            img.onload = function() {
             this.width = 30;
             this.height = 30;
             var can = document.createElement('canvas');
            var ctx = can.getContext('2d');
            ctx.drawImage(this, 0, 0, this.width, this.height);
            for(d=0;d<360;d++) {ctx.rotate(1);fighterJets.push(can.toDataURL());}
        };
       }

我正在尝试从服务器加载图像。加载后，然后在 canvas 上旋转图像并将数据 uri 存储在数组中以备后用，而无需再次调用服务器。但是当我尝试使用数据 uri 更改光标图像时，我在 Firefox 中得到 "Invalid property value"；

 parameter.style.cursor = 'url('+fighterJets[90]+') 15 15, auto'

我查了，data uri在parameter的style属性上（很大，不能漏）。所以我不知道下一步该怎么做。我对 canavas 的理解很差，我怀疑我做错了什么，如果没有任何解决方法，你可以将数据 uri 分配给光标图像吗？欢迎任何帮助

Answer 1

经过多次尝试和错误后，我意识到我是无效的 "Invalid property value" 因为我没有将 canavas 大小与图像匹配，因此生成的图像变得很大，因此没有显示光标。下面是工作代码。

    function rotateFighterJetOnCanvas(path,degrees) {
        var img = new Image();
        img.src = path;
        img.onload = function() {
            var can = document.createElement('canvas');
            var ctx = can.getContext('2d');
            can.width =30;can.height =30;
            ctx.translate(15, 15);
            ctx.rotate(Math.radians(degrees));
            ctx.imageSmoothingEnabled = false;
            ctx.drawImage(this, -15, -15, 30, 30);
            ctx.rotate(-Math.radians(degrees));
            ctx.translate(-15, -15);
            fighterJets.push(can.toDataURL("image/png",1.0));
        };
    }
    Math.radians = function(degrees) {
        return degrees * Math.PI / 180;
    };

更改光标图像时找不到数据 uri

Data uri not found when changing cursor image

javascript

data-uri

html5-canvas