为什么我在`mousemove`中使用drawImage时会得到不良图像？
一世
我想在动作mousemove时绘制图像，但是当我在使用drawImage时mousemove得到错误的图像（请参见右图）：
为什么在动作时图像绘制不好mousemove？
PS：我想用高质量的左图绘制右图；
var canvas = document.getElementById('canvas_test');
var context = canvas.getContext("2d");
var img_test__src = 'http://image.prntscr.com/image/8233c5a42e7e4b40a19c64d8e9b892ee.png';
var img = new Image();
img.src = img_test__src;
img.onload = function() {
context.save();
context.beginPath();
context.drawImage(img, 100, 100, 71, 71);
context.closePath();
context.restore();
};
canvas.addEventListener('mousemove', function(evt) {
var img = new Image();
img.src = img_test__src;
img.onload = function() {
context.save();
context.beginPath();
context.drawImage(img, 200, 100, 71, 71);
context.closePath();
context.restore();
};
});#canvas_test {
background: #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas_test" width="500" height="500"></canvas> 盲人67
永远不要在IO事件中渲染
绝对不要在事件中渲染。频率和时序不受您的控制，并且可能产生各种问题，尤其是当您开始发生许多此类事情时。
requestAnimationFrame即使仅用于一帧也要使用。这将确保正确绘制图像并与正在发生的任何其他动画或视觉更新同步。
不要一遍又一遍地加载图像！！！
我必须给出答案，因为您也在事件中加载图像。
每移动一次鼠标，也许每秒移动约100或更多，您就会创建一个新图像并等待其加载。您应该已经注意到页面有时会滞后。
一次加载图像。
例子
我假设您想要将鼠标悬停在FX上
var canvas = document.getElementById('canvas_test');
var context = canvas.getContext("2d");
var img_test__src = 'http://image.prntscr.com/image/8233c5a42e7e4b40a19c64d8e9b892ee.png';
var img = new Image();
img.src = img_test__src;
img.onload = drawImg;
var mouseOver = false;
function drawImg(){
if(img.complete){ // has image loaded
context.clearRect(0,0,canvas.width,canvas.height);
context.globalAlpha = mouseOver ? 1 : 0.5;
context.drawImage(img,0,0);
context.globalAlpha = 1;
}
}
canvas.addEventListener('mouseover', function(evt) {
mouseOver = true;
requestAnimationFrame(drawImg);
});
canvas.addEventListener('mouseout', function(evt) {
mouseOver = false;
requestAnimationFrame(drawImg);
});#canvas_test {
background: #000;
}
<canvas id="canvas_test" width="65" height="65"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
IE 11中的FormData未定义
- 2
如何一次从多个文本框中获取值？
- 3
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 4
OpenCv：改变 putText() 的位置
- 5
Redux动作正常，但减速器无效
- 6
如何从JavaScript中的MP3文件读取元数据属性？
- 7
如何使用Redux-Toolkit重置Redux Store
- 8
将加号/减号添加到jQuery菜单
- 9
OpenGL纹理格式的颜色错误
- 10
获取并汇总所有关联的数据
- 11
超过时间限制错误C ++
- 12
ActiveModelSerializer仅显示关联的ID
- 13
在交互式Python Shell中获得最后结果
- 14
如何开始为Ubuntu开发
- 15
去噪自动编码器和常规自动编码器有什么区别？
- 16
Excel 2016图表将增长与4个参数进行比较
- 17
算术中的c ++常量类型转换
- 18
使用因子时如何在y轴上的ggplot中插入count或％
- 19
TreeMap中的自定义排序
- 20
如何在R中转置数据
- 21
在 React Native Expo 中使用 react-redux 更改另一个键的值
我来说两句