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());}
};
}
我正在尝试从服务器加载图像。加载后,将图像旋转在画布上,然后将数据URI存储在以后使用的数组中,而无需再次拨打服务器。但是,当我尝试使用数据URI更改光标映像时,我会在Firefox中获得"无效的属性值";
parameter.style.cursor = 'url('+fighterJets[90]+') 15 15, auto'
我已经检查过,并且数据URI在参数的样式上(我不会错过它很大)。所以我迷路了下一步该怎么做。我对Canavas的低调低估了,我怀疑我做错了什么,而且如果没有任何解决方法,您是否可以将数据URI分配给Cursor Image。欢迎任何帮助
经过大量的反复试验,我意识到自己无效"无效的属性值",因为我与图像的大小不匹配,因此所产生的图像已成为大型因此没有在光标上显示。以下是工作代码。
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;
};