[英]html5 remove from canvas
This is my first html5 project, getting the gist of it, need a bit of help. 这是我的第一个html5项目,要获得要点,需要一些帮助。 I used a jquery UI slider to send an opacity value to the canvas and it works quite nicely... but I can't get the image to completely turn off when the slider is in the off position with a value of zero.
我使用了一个jQuery UI滑块将不透明度值发送到画布,并且效果很好。但是当滑块处于关闭位置(值为零)时,我无法完全关闭图像。 Here is a fiddle of what I'm trying to do : http://jsfiddle.net/N6wZZ/2/
这是我正在尝试做的事情: http : //jsfiddle.net/N6wZZ/2/
Here is my JS: 这是我的JS:
$("#slider").slider({
animate: true,
range: "min",
value: 0,
min: 0,
max: 0.9,
step: .01,
create: function (event, ui) {
var opacityValue = '0.0';
canvasFunction(opacityValue);
},
slide: function (event, ui) {
$('#hiddenField').attr('value', ui.value);
$("#slider-result").html(ui.value);
var opacityValue = $('#hiddenField').val();
if (opacityValue == 0) {
var opacityValue = 0;
var workAroundVar = 300;
var workAroundVarTwo = 0;
canvasFunction(opacityValue, workAroundVar, workAroundVarTwo);
}
else {
var workAroundVar = 0;
var workAroundVarTwo = 300;
canvasFunction(opacityValue, workAroundVar, workAroundVarTwo);
}
}
});
function canvasFunction(opacityValue, workAroundVar, workAroundVarTwo){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img1 = loadImage('http://moosepic.com/test2.png', main);
var img2 = loadImage('http://moosepic.com/test.png', main);
var imagesLoaded = 0;
function main() {
imagesLoaded += 1;
if (imagesLoaded == 2) {
// composite now
ctx.drawImage(img1, 0, 0, 300, 300);
ctx.globalAlpha = opacityValue;
ctx.drawImage(img2, workAroundVar, workAroundVar, workAroundVarTwo, workAroundVarTwo);
}
}
function loadImage(src, onload) {
var img = new Image();
img.onload = onload;
img.src = src;
return img;
}
}
as you can see I've made a bunch of workarounds to turn off the second image or just knock it out of the canvas. 如您所见,我已经做了很多解决方法以关闭第二个图像或将其从画布上剔除。 Any help would be awesome.
任何帮助都是极好的。
Silas. 西拉斯 I've taken a look at your jsFiddle.
我看了看你的jsFiddle。 I forked it and made some changes/improvements to your approach and I think it accomplishes your goal:
我对它进行了分叉,并对您的方法进行了一些更改/改进,我认为它可以实现您的目标:
http://jsfiddle.net/3LJsX/7/ http://jsfiddle.net/3LJsX/7/
Here is the approach I took (which is pretty close to yours, just some minor differences): 这是我采用的方法(与您的方法非常接近,只有一些细微的差别):
refreshVisuals
function which updates the value of the slider div and updates the canvas refreshVisuals
函数,该函数更新滑块div的值并更新画布 A main difference is in the draw
function which was called canvasFunction
in your example. 主要区别在于
draw
函数,在您的示例中该函数称为canvasFunction
。 In my draw
function, I make sure to: 在我的
draw
函数中,请确保:
That should be it! 就是这样! Let me know if you have any questions.
如果您有任何疑问,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.