使用画布绘制应用程序答案

【问题标题】：Paint app with canvas使用画布绘制应用程序
【发布时间】：2014-04-23 23:20:41
【问题描述】：

我正在尝试按照本教程http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ 为朋友的网站制作一个非常简单的绘画应用程序。

这是我写的；我认为它会起作用，但它没有：

<head>
    <script>
        window.onload = function()
        {
            var canvasDiv = document.getElementById('canvasDiv');
            canvas = document.createElement('canvas');
            canvas.setAttribute('width', canvasWidth);
            canvas.setAttribute('height', canvasHeight);
            canvas.setAttribute('id', 'canvas');
            canvasDiv.appendChild(canvas);
            if(typeof G_vmlCanvasManager != 'undefined') {
                canvas = G_vmlCanvasManager.initElement(canvas);
            }
            context = canvas.getContext("2d");

            //
            $('#canvas').mousedown(function(e){
              var mouseX = e.pageX - this.offsetLeft;
              var mouseY = e.pageY - this.offsetTop;

              paint = true;
              addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
              redraw();
            });

            $('#canvas').mousemove(function(e){
              if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
              }
            });       

            $('#canvas').mouseup(function(e){
              paint = false;

            });

            $('#canvas').mouseleave(function(e){
              paint = false;
            });

            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
            var paint;

            function addClick(x, y, dragging)
            {
              clickX.push(x);
              clickY.push(y);
              clickDrag.push(dragging);
            }

            function redraw(){
              context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas

              context.strokeStyle = "#df4b26";
              context.lineJoin = "round";
              context.lineWidth = 5;

              for(var i=0; i < clickX.length; i++) {        
                context.beginPath();
                if(clickDrag[i] && i){
                  context.moveTo(clickX[i-1], clickY[i-1]);
                 }else{
                   context.moveTo(clickX[i]-1, clickY[i]);
                 }
                 context.lineTo(clickX[i], clickY[i]);
                 context.closePath();
                 context.stroke();
              }
            }
        }
    </script>
</head>

<body>
    <div id="canvasDiv">        
    </div>
</body>

有人可以帮我吗？我可能错过了一些东西。谢谢！

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

你在哪里定义的

canvasWidth 和 canvasHeight ?

如果您设置这些，它会起作用：JSFIDDLE

例如

canvas.setAttribute('width', "500");
canvas.setAttribute('height', "200");

在 Chrome 中测试.. （并且当您使用 jQuery 时，您可能应该在 $(document).ready() 而不是 onload 上“执行”以确保“canvasDiv”已经被渲染）

【讨论】：

感谢您的回答 ho.s 我尝试用您的 JSFiddle 示例中的 javascript 替换
好的，您有任何可以提及的控制台错误吗？你测试了哪个浏览器？您确定您尝试在画布元素的尺寸范围内进行绘画吗？
我一直在 Chrome、Firefox 和 Safari 中尝试此代码（在以下答案中）。遗憾的是，我只能让脚本在 JSfiddle 中工作
但是.. 在您更改的代码中，您完全省略了 onload 相应的。 $(document).ready() 包装函数。在 JSfiddle 中，您只是看不到它，因为它是通过左侧的 select - 字段作为调整提供的。请使用您以前的 .onload - 函数或 $( document ).ready(function() { //your code }); 包装您的代码来重试
谢谢你，它工作得很好！我也忘记了请求 jquery 库...现在我只想添加一个擦除按钮，就像我在第一条消息中发布的教程中一样（但没有说明如何继续）

【解决方案2】：

这是我改变的：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script>
        var canvasDiv = document.getElementById('canvasDiv');
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', "500");
        canvas.setAttribute('height', "200");
        canvas.setAttribute('id', 'canvas');
        canvasDiv.appendChild(canvas);
        if(typeof G_vmlCanvasManager != 'undefined') {
            canvas = G_vmlCanvasManager.initElement(canvas);
        }
        context = canvas.getContext("2d");

        //
        $('#canvas').mousedown(function(e){
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;

            paint = true;
            addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
            redraw();
        });

        $('#canvas').mousemove(function(e){
            if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });       

        $('#canvas').mouseup(function(e){
            paint = false;

        });

        $('#canvas').mouseleave(function(e){
            paint = false;
        });

        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;

        function addClick(x, y, dragging)
        {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

        function redraw(){
            context.clearRect(0, 0, context.canvas.width,                       
            context.canvas.height); // Clears the canvas

            context.strokeStyle = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            for(var i=0; i < clickX.length; i++) {        
                context.beginPath();
                if(clickDrag[i] && i){
                    context.moveTo(clickX[i-1], clickY[i-1]);
                }else{
                    context.moveTo(clickX[i]-1, clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }
        }
        </script>
   </head>
   <body>
        <div id="canvasDiv"></div>      
   </body>  
</html>

【讨论】：