畫布開始刷新

我有這個畫布，你可以畫到它，但它只是在刷新頁面時工作，沒有人有這個解決方案，我試過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(); 
}

來源

2013-07-05 Sebastian Uriel Murawczik

對我的作品在Chrome – akonsu

你有一個跨瀏覽器的問題

的問題是在你的事件處理程序：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>

來源

2013-07-05 03:52:59 markE

以及那不是我所擔心的，但在我的家裏的電腦，它doesn't第一次加載工作，只是在刷新： S –

解決了X瀏覽器問題後，它對Win7上IE10，Chrome27和FF22的工作正常（無需刷新）：http://jsfiddle.net/m1erickson/WeRRC/也許清除瀏覽器緩存？我編輯了我的答案，包括完整的工作代碼。 – markE

+1爲什麼不使用'e.clientX' /'e.clientY'？應該跨越IIRC :)（當然，減去畫布偏移量（例如getBoundingClientRect.left/top）） – K3N

畫布開始刷新

回答

相關問題