画布在刷新时启动

canvas starts on refresh

本文关键字：启动 刷新      更新时间：2023-09-26

我有这个画布，你可以在其中绘制，但它只在刷新页面时有效，有人对此有解决方案吗？我尝试了window.onload或使用image.onload甚至canvas.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();
}

您有跨浏览器问题

问题出在您的事件处理程序中：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可以解决许多跨浏览器的问题。

以下是代码和Fiddle：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>
相关文章：