아주 간단한 캔버스 페인트 작업은 크롬

에서 나는 그것은하지만 전혀 크롬 FX는 10에서 아주 잘 작동 http://www.robodesign.ro/coding/canvas-paint/20090423/아주 간단한 캔버스 페인트 작업은 크롬

에서 수정이 this script를 줬습니다 없습니다.

나는 크롬이 offsetX 및 layerX를 교환하여 사용되지 않는 event.layerX/Y에 대해 경고를 제거있어하지만 여전히 그릴하지 않습니다.

매우 단순해야합니다.
UPDATE : 그것은 한 - this.mousemove에서 선 context.moveTo(ev._x, ev._y);를 제거 트릭을

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Paint</title> 
    <style type="text/css"><!-- 
     #container { position: relative; } 
     #imageView { border: 1px solid #000; } 
    --></style> 
    </head> 
    <body BGCOLOR="#CCFFFF"> 

    <div id="container"> 
     <canvas id="imageView" width="700" height="643" margin: 0 auto> 
     <p>Unfortunately, your browser is currently unsupported by our web 
     application. We are sorry for the inconvenience. Please use one of the 
     supported browsers listed below, or draw the image you want using an 
     offline tool.</p> 
     <p>Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
      href="http://www.mozilla.com">Firefox</a>, <a 
      href="http://www.apple.com/safari">Safari</a>, and <a 
      href="http://www.konqueror.org">Konqueror</a>.</p> 
     </canvas> 
    </div> 

    <script type="text/javascript"> 
/* © 2009 ROBO Design 
* http://www.robodesign.ro 
*/ 

// Keep everything in anonymous function, called on window load. 
if(window.addEventListener) { 
window.addEventListener('load', function() { 
    var canvas, context, tool; 

    function init() { 
    // Find the canvas element. 
    canvas = document.getElementById('imageView'); 
    if (!canvas) { 
     alert('Error: I cannot find the canvas element!'); 
     return; 
    } 

    if (!canvas.getContext) { 
     alert('Error: no canvas.getContext!'); 
     return; 
    } 

    // Get the 2D canvas context. 
    context = canvas.getContext('2d'); 
    if (!context) { 
     alert('Error: failed to getContext!'); 
     return; 
    } 

    var img=new Image(); 
    img.onload = function(){ 
    context.drawImage(img,0,0); 
    }; 
    img.src=" PainDiagram.png"; 

    // Pencil tool instance. 
    tool = new tool_pencil(); 

    // Attach the mousedown, mousemove and mouseup event listeners. 
    canvas.addEventListener('mousedown', ev_canvas, false); 
    canvas.addEventListener('mousemove', ev_canvas, false); 
    canvas.addEventListener('mouseup', ev_canvas, false); 
    } 

    // This painting tool works like a drawing pencil which tracks the mouse 
    // movements. 
    function tool_pencil() { 
    var tool = this; 
    this.started = false; 

    // This is called when you start holding down the mouse button. 
    // This starts the pencil drawing. 
    this.mousedown = function (ev) { 
     context.beginPath(); 
     context.lineWidth = 5; 
     context.lineCap = "round"; 
     context.globalAlpha=0.01; 
     context.shadowColor="red"; 
     context.shadowBlur=10; 
     context.strokeStyle = "red"; // line color 
     context.moveTo(ev._x, ev._y); 
     tool.started = true; 
    }; 

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button). 
    this.mousemove = function (ev) { 
     if (tool.started) { 
     //var p = context.getImageData(ev._x, ev._y, 1, 1).data; 
     //if(p[0]==255 && p[1]==204 && p[2]==153){ 
      context.moveTo(ev._x, ev._y); 
      context.lineTo(ev._x, ev._y); 
      context.stroke(); 
     //} 
     } 
    }; 

    // This is called when you release the mouse button. 
    this.mouseup = function (ev) { 
     if (tool.started) { 
     tool.mousemove(ev); 
     tool.started = false; 
     } 
    }; 
    } 

    // The general-purpose event handler. This function just determines the mouse 
    // position relative to the canvas element. 


    function ev_canvas (ev) { 
    if (ev.offsetX || ev.offsetX == 0) { // Opera and WebKit 
     ev._x = ev.offsetX; 
     ev._y = ev.offsetY; 
    } 
    else if (ev.layerX || ev.layerX == 0) { // Firefox 
     ev._x = ev.layerX; 
     ev._y = ev.layerY; 
    } 

    // Call the event handler of the tool. 
    var func = tool[ev.type]; 
    if (func) { 
     func(ev); 
    } 
    } 

    init(); 

}, false); } 

// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix: 

    </script> 
    </body> 
</html>

출처

2012-03-14 mplungjan

을 두 context.moveTo(ev._x, ev._y);를 않았다 주석.

moveTo() 메서드는 새 하위 패스를 생성하므로 길이가 0 픽셀 인 패스에 선을 적용하도록 캔버스에 지시했습니다. 파이어 폭스 분명히 이것을 지원합니다. 자세한 내용은 canvas documentation을 참조하십시오.

출처

2012-03-15 22:25:32 Xenethyl

방금 현상금을 놓쳤습니다. 감사! – mplungjan

문제 없습니다. 기꺼이 도와주세요! :) – Xenethyl

아주 간단한 캔버스 페인트 작업은 크롬

답변

관련 문제