Есть канвас
<canvas id="canvas_st"></canvas>
Функция js перерисовки, которая находится в блоке $(document).ready(function())
function resize_canvas(params,canvas) {
var width=document.body.clientWidth; // ширина
var height=document.body.clientHeight; // высота
var height_can=width/1.777777777777778; //ratio
var ctx = canvas.getContext("2d");
canvas.width = width;
canvas.height = height_can;
document.getElementById("canvas_st").style.width= width;
document.getElementById("canvas_st").style.height= height_can;
for (keys in params) {
for (let i = 0; i < params[keys].length; i++) {
img = new Image();
img = document.createElement('img');
img.src = params[keys][i];
ctx.drawImage(img, 0, 0, width, height_can);
}
}
}
Так же есть дефолтный массив картинок
var img_array = {
img1: ["../base_img/test/default/img1.png"],
img2: ["../base_img/test/default/img2.png"],
img3: ["../base_img/test/default/img3.png"],
img4: ["../base_img/test/default/img4.png"],
img5: ["../base_img/test/default/img5.png"]
};
При загрузке страницы, прорисовываем массив картинок и при изменение размера, тоже
$(document).ready(function(){
var canvas = document.getElementById("canvas_st");
resize_canvas(img_array,canvas);
window.onresize = function( event ) {
resize_canvas(img_array,canvas);
};
});
Функция клика на канвасе
canvas.addEventListener('mouseup', function (e) {
var x = e.pageX - e.target.offsetLeft,
y = e.pageY - e.target.offsetTop,
heght_img=$("#canvas_st").height();
width_img=$("#canvas_st").width();
y=(y*100)/heght_img;
x=(x*100)/width_img;
if (y>0 && y<20) {
rewrite_array("img1","../base_img/test/cat1/sub1/2.png");
resize_canvas(img_array,canvas);
}
if (y>20 && y<75 ) {
rewrite_array("img2","../base_img/test/cat2/sub2/1.png");
resize_canvas(img_array,canvas);
}
if (y>75 ) {
rewrite_array("img3","../base_img/test/cat3/sub3/1.png");
resize_canvas(img_array,canvas);
}
});
Функция перезаписи массива:
function rewrite_array(id_name,urls) {
for (keys in img_array) {
for (let i = 0; i < img_array[keys].length; i++) {
if (keys==id_name) {
img_array[keys][i]=urls;
}
}
}
}
Проверял на IE, клики нормально отрисовываются, но на хроме, нет, при первом клике не отрисовывается, а вот при повторном уже отрисовывает, и это касается, все отрисовки. как исправить?
