单击画布上的线 [英] Click on line in canvas

问题描述

是否可能获取信息，如果在画布上点击线？

  var canvas; var x = 200; var y = 200; var dx = 4; var dy = 4; var d = 5; var width，height; function init（）{canvasE = document.getElementById（'game'）; canvas = canvasE.getContext（'2d'）; width = canvasE.width; height = canvasE.height; canvasE.addEventListener（click，onClick，false）; drawCircle（）;} function drawCircle（）{clear（）; canvas.arc（x-1，y-1，d，0，Math.PI * 2，true）; canvas.beginPath（）; canvas.arc（x-1，y-1，d，0，Math.PI * 2，true）; canvas.closePath（）; canvas.fill（）; canvas.beginPath（）; canvas.moveTo（20,20）; canvas.lineTo（150,100）; canvas.stroke（）; //检查当前路径中的点击坐标if（canvas.isPointInPath（x，y））{document.getElementById（inPath）。innerHTML =yes; } else {document.getElementById（inPath）。innerHTML =no; } canvas.closePath（）; } function clear（）{canvas.fillStyle =＃ffffff; canvas.fillRect（0,0，width，height）; canvas.fillStyle =＃ff0000; canvas.strokeRect（0,0，width，height）;} function onClick（e）{var element = canvasE; var offsetX = 0，offsetY = 0 if（element.offsetParent）{do {offsetX + = element.offsetLeft; offsetY + = element.offsetTop; } while（（element = element.offsetParent））; } x = e.pageX  -  offsetX; y = e.pageY  -  offsetY; drawCircle（）; document.getElementById（info）。value =x：+ x +，y：+ y;} init（）;   

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"> ;</script><input id =infotype =textreadonly>< ; span id =inPath>否< / span>< canvas id =gamewidth =500height =500>< / canvas>  

感谢

解决方案

p>基于 JavaScript吸管（在鼠标光标下指示Pixel的颜色），请注意每个像素表示为数组 data 中的4个元素，即data [0] = red（0,0），data [ 1] =（0,0）的绿色，data [2] =（0,0）的蓝色，data [3] =（0,0）的alpha，data [4] ...

var canvas; var x = 200; var y = 200; var dx = 4; var dy = 4; var d = 5; var width，height; function init（）{canvasE = document.getElementById（'game'）; canvas = canvasE.getContext（'2d'）; width = canvasE.width; height = canvasE.height; canvasE.addEventListener（click，onClick，false）; drawCircle（）;} function drawCircle（）{clear（）; canvas.arc（x-1，y-1，d，0，Math.PI * 2，true）; canvas.beginPath（）; canvas.arc（x-1，y-1，d，0，Math.PI * 2，true）; canvas.closePath（）; canvas.fill（）; canvas.beginPath（）; canvas.moveTo（20，20）; canvas.lineTo（150，100）; canvas.stroke（）; //检查当前路径中的点击坐标if（canvas.isPointInPath（x，y））{document.getElementById（inPath）。innerHTML =yes; } else {document.getElementById（inPath）。innerHTML =no; } canvas.closePath（）;} function clear（）{canvas.fillStyle =#ffffff; canvas.fillRect（0，0，width，height）; canvas.fillStyle =＃ff0000; canvas.strokeRect（0，0，width，height）;} function onClick（e）{var element = canvasE; var offsetX = 0，offsetY = 0 if（element.offsetParent）{do {offsetX + = element.offsetLeft; offsetY + = element.offsetTop; } while（（element = element.offsetParent））; } x = e.pageX - offsetX; y = e.pageY - offsetY; document.getElementById（info）。value =x：+ x +，y：+ y; function pixelIndex（x，y）{return 4 *（y * canvasE.width + x）; } // data是一个数组，每个4个元素定义一个像素，这些是红色，绿色，蓝色，alpha var data = canvas.getImageData（0，0，canvasE.width，canvasE.height）.data; var pixelIndexStart = pixelIndex（x，y）; //只需要前三个，看看是否有绘制的内容var red = 255 - data [pixelIndexStart + 0]; var green = 255 - data [pixelIndexStart + 1]; var blue = 255 - data [pixelIndexStart + 2]; var hasLine = red + green + blue> 0; document.getElementById（info）。value ='has line：'+ hasLine; drawCircle（）;} init（）;

 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"> ;</script><input id =infotype =textreadonly>< ; span id =inPath>否< / span>< canvas id =gamewidth =500height =500>< / canvas>  

Is it possible get info, if is click on line in canvas?

var canvas;
var x = 200;
var y = 200;
var dx=4;
var dy=4;
var d = 5;
var width, height;

function init() {
    canvasE = document.getElementById('game');
    canvas= canvasE.getContext('2d');
    width = canvasE.width;
    height = canvasE.height;
    canvasE.addEventListener("click", onClick, false);
    drawCircle();
}

function drawCircle() {
 clear();
    
 canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
 canvas.beginPath();
 canvas.arc(x-1,y-1,d,0,Math.PI*2,true);
 canvas.closePath();
 canvas.fill(); 
    
 canvas.beginPath();
 canvas.moveTo(20,20);
 canvas.lineTo(150,100);
 canvas.stroke();
    
 //check if click coords within current path
 if(canvas.isPointInPath(x,y)) {
   document.getElementById("inPath").innerHTML = "yes";
 } else {
   document.getElementById("inPath").innerHTML = "no";
 }
    
 canvas.closePath();
 
}

function clear() {
    canvas.fillStyle="#ffffff";
    canvas.fillRect(0,0,width,height);
    canvas.fillStyle="#ff0000";
    canvas.strokeRect(0,0,width,height);
}

function onClick(e) {
    var element = canvasE;
    var offsetX = 0, offsetY = 0

        if (element.offsetParent) {
      do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
      } while ((element = element.offsetParent));
    }

    x = e.pageX - offsetX;
    y = e.pageY - offsetY;
    
    drawCircle();
    document.getElementById("info").value = "x: " + x + ", y: " + y;
}

init();

canvas, input {
    margin: 10px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="info" type="text" readonly>
<span id="inPath">No</span>
<canvas id="game" width="500" height="500"></canvas>

Thanks

解决方案

Based on JavaScript eyedropper (tell color of Pixel under mouse cursor), note that each pixel is represented as a 4 element in the array data, i.e. data[0] = red of (0,0), data[1] = green of (0,0), data[2] = blue of (0,0), data[3] = alpha of (0,0), data[4] = red of (0,1), ...

var canvas;
var x = 200;
var y = 200;
var dx = 4;
var dy = 4;
var d = 5;
var width, height;

function init() {
  canvasE = document.getElementById('game');
  canvas = canvasE.getContext('2d');
  width = canvasE.width;
  height = canvasE.height;
  canvasE.addEventListener("click", onClick, false);
  drawCircle();
}

function drawCircle() {
  clear();

  canvas.arc(x - 1, y - 1, d, 0, Math.PI * 2, true);
  canvas.beginPath();
  canvas.arc(x - 1, y - 1, d, 0, Math.PI * 2, true);
  canvas.closePath();
  canvas.fill();

  canvas.beginPath();
  canvas.moveTo(20, 20);
  canvas.lineTo(150, 100);
  canvas.stroke();

  //check if click coords within current path
  if (canvas.isPointInPath(x, y)) {
    document.getElementById("inPath").innerHTML = "yes";
  } else {
    document.getElementById("inPath").innerHTML = "no";
  }

  canvas.closePath();

}

function clear() {
  canvas.fillStyle = "#ffffff";
  canvas.fillRect(0, 0, width, height);
  canvas.fillStyle = "#ff0000";
  canvas.strokeRect(0, 0, width, height);
}

function onClick(e) {
  var element = canvasE;
  var offsetX = 0,
    offsetY = 0

  if (element.offsetParent) {
    do {
      offsetX += element.offsetLeft;
      offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
  }

  x = e.pageX - offsetX;
  y = e.pageY - offsetY;

  document.getElementById("info").value = "x: " + x + ", y: " + y;

  function pixelIndex(x, y) {
    return 4 * (y * canvasE.width + x);
  }

  // data is an array where each 4 elements define a pixed, these are red,green,blue,alpha
  var data = canvas.getImageData(0, 0, canvasE.width, canvasE.height).data;
  var pixelIndexStart = pixelIndex(x, y);
  // only need the first three to see if there's something drawn there
  var red = 255 - data[pixelIndexStart + 0];
  var green = 255 - data[pixelIndexStart + 1];
  var blue = 255 - data[pixelIndexStart + 2];
  var hasLine = red + green + blue > 0;
  document.getElementById("info").value = 'has line: ' + hasLine;
  
  drawCircle();
}

init();

canvas,
input {
  margin: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input id="info" type="text" readonly>
<span id="inPath">No</span>
<canvas id="game" width="500" height="500"></canvas>

这篇关于单击画布上的线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！