Question

我有这个画布，你可以在其中绘制，但它只是在你刷新页面时有效，有没有人有解决方案，我尝试window.onload或使用image.onload甚至{ {1}}并且没有任何作用，总是要刷新。

http://urieldevelop.com/draw/index.html就是页面。提前谢谢。

这里的代码。

canvas.onload

Answer 1

您遇到跨浏览器问题

问题在于您的事件处理程序：Firefox使用.layerX / .layerY而不是.offsetX / .offset

因此，使用此跨浏览器代码获取鼠标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>

画布从刷新开始

1 个答案: