0

私はあなたがそれに描くことができるこのキャンバスを持っていますが、ページを更新するとうまくいきます.誰かがこれに対する解決策を持っていますwindow.onloadか.image.onloadcanvas.onload

http://urieldevelop.com/draw/index.htmlページです。前もって感謝します。

ここにコード。

var atags = document.getElementsByTagName("a");
var canvas = document.getElementById('canvas');
var contexto = canvas.getContext("2d");
var width = 10, color = "#000", tipoDeLinea = "round", dibujando = false, x , y, mouseX = new Array(), mouseY = new Array();

function widthChange( n ){
    width = n;
}

function colorChange( col ){
    color = col;
}

function linea( t ){
    tipoDeLinea = t;
}

contexto.lineJoin = "bevel";

function punto ( e ) {
    x = e.offsetX, y = e.offsetY;
    dibujando = true;
    contexto.beginPath();
    contexto.moveTo(x, y);
}

function puntoArriba ( e ) {
    dibujando = false;
}

function dibuja ( e ) {
    x = e.offsetX, y = e.offsetY;
    mouseX.push(x);
    mouseY.push(y);
    var MXlength = mouseX.length, MYlength = mouseY.length;
    if(dibujando == true){
        contexto.lineJoin = tipoDeLinea;
        contexto.lineWidth = width;
        contexto.strokeStyle = color;
        contexto.moveTo(mouseX[MXlength - 2], mouseY[MYlength - 2]);
        contexto.lineTo(mouseX[MXlength - 1],mouseY[MYlength - 1]);
        contexto.closePath();
        contexto.stroke();
        contexto.fill();
        if(mouseX.length > 2 && mouseY.length > 2){
            mouseX.shift();mouseY.shift();
        }
    }
}

canvas.addEventListener('mousedown', punto, false);
canvas.addEventListener('mousemove', dibuja, false);
canvas.addEventListener('mouseup', puntoArriba, false);
canvas.addEventListener('mouseout', puntoArriba, false);

for (var i = 0; i < atags.length; i++) {
    atags[i].addEventListener("click", previene, false);
}

function previene(e){
    e.preventDefault();
}
4

1 に答える 1

3

クロスブラウザの問題がある

問題はイベント ハンドラにあります: Firefox は .offsetX/.offset の代わりに .layerX/.layerY を使用します

したがって、このクロスブラウザ コードを使用して、マウスの x/y を取得します。

    var x = e.offsetX==undefined?e.layerX:e.offsetX;
    var y = e.offsetY==undefined?e.layerY:e.offsetY;

さらに良いことに、多くのクロスブラウザーの問題を解決する jQuery を使用してください。

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/WeRRC/

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> -\ dibuja con canvas</title>
  <style type="text/css">
  *{margin: 0;padding: 0;border: 0;outline: 0;}
  .contenedor{width: 1200px;margin: 0 auto;height: 800px;}
  .contenedor #canvas{width: 1200px;height: 600px;margin: 10px auto;border: 1px solid black;}
  .anchos a, span{float: left;}
  span{display: block;margin: 5px;}
  .ancho1{display: block;width: 10px;height: 10px;margin: 10px 10px;background-color: black;}
  .ancho2{display: block;width: 15px;height: 15px;margin: 7px 10px;background-color: black;}
  .ancho3{display: block;width: 20px;height: 20px;margin: 4px 10px;background-color: black;}
  .ancho4{display: block;width: 25px;height: 25px;margin: 1px 10px;background-color: black;}
  .colores a{display: block;width: 25px;height: 25px;float: left;margin: 0px 10px;}
  .colores span{display: block;float: left;}
  .color1{background-color: red;}
  .color2{background-color: green;}
  .color3{background-color: blue;}
  .color4{background-color: black;}
  .color5{background-color: grey;}
  .tipodelinea a{display: block;margin: 5px;float: left;}
  </style>
</head>
<body>
  <div class="contenedor">
    <canvas id="canvas" height="600" width="1200"></canvas>
    <div class="linea">
      <div class="anchos">
        <span>Anchos</span>
        <a href="#" class="ancho1" onclick="widthChange(5)"></a>
        <a href="#" class="ancho2" onclick="widthChange(10)"></a>
        <a href="#" class="ancho3" onclick="widthChange(20)"></a>
        <a href="#" class="ancho4" onclick="widthChange(30)"></a>
      </div>

      <div class="colores">
        <span>Colores</span>
        <a href="#" class="color1" onclick="colorChange('#ff0000')"></a>
        <a href="#" class="color2" onclick="colorChange('#00ff00')"></a>
        <a href="#" class="color3" onclick="colorChange('#0000ff')"></a>
        <a href="#" class="color4" onclick="colorChange('#000000')"></a>
        <a href="#" class="color5" onclick="colorChange('#999999')"></a>
      </div>

      <div class="tipodelinea">
        <span>Tipo de linea</span>
        <a href="#" class="linea1" onclick="linea('round')">Redondeado</a>
        <a href="#" class="linea2" onclick="linea('bevel')">Relieve</a>
        <a href="#" class="linea3" onclick="linea('miter')">Puntiagudo</a>
      </div>
    </div>
  </div>
<script type="text/javascript">
window.onload=function(){

var atags = document.getElementsByTagName("a");
var canvas = document.getElementById('canvas');
var contexto = canvas.getContext("2d");
var width = 10, color = "#000", tipoDeLinea = "round", dibujando = false, x , y, mouseX = new Array(), mouseY = new Array();

console.log(canvas);

function widthChange( n ){
  width = n;
}

function colorChange( col ){
  color = col;
}

function linea( t ){
  tipoDeLinea = t;
}

contexto.lineJoin = "bevel";

function punto ( e ) {
x = e.offsetX==undefined?e.layerX:e.offsetX;
y = e.offsetY==undefined?e.layerY:e.offsetY;
  dibujando = true;
  contexto.beginPath();
  contexto.moveTo(x, y);
}

function puntoArriba ( e ) {
  dibujando = false;
}

function dibuja ( e ) {
x = e.offsetX==undefined?e.layerX:e.offsetX;
y = e.offsetY==undefined?e.layerY:e.offsetY;
  mouseX.push(x);
  mouseY.push(y);


  var MXlength = mouseX.length, MYlength = mouseY.length;
  if(dibujando == true){
    contexto.lineJoin = tipoDeLinea;
    contexto.lineWidth = width;
    contexto.strokeStyle = color;
        contexto.moveTo(mouseX[MXlength - 2], mouseY[MYlength - 2]);
        contexto.lineTo(mouseX[MXlength - 1],mouseY[MYlength - 1]);
        contexto.closePath();
        contexto.stroke();
        contexto.fill();
        if(mouseX.length > 2 && mouseY.length > 2){
      mouseX.shift();mouseY.shift();
    }
  }
}

canvas.addEventListener('mousedown', punto, false);
canvas.addEventListener('mousemove', dibuja, false);
canvas.addEventListener('mouseup', puntoArriba, false);
canvas.addEventListener('mouseout', puntoArriba, false);

console.log("listening");

for (var i = 0; i < atags.length; i++) {
  atags[i].addEventListener("click", previene, false);
}

function previene(e){
  e.preventDefault();
}

}
</script>
</body>

</html>
于 2013-07-05T03:52:59.840 に答える