Question

我试图按照本教程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>

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

Answer 1

你在哪里定义

canvasWidth和canvasHeight？

如果您设置了这些，则可以：JSFIDDLE

e.g。

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

在Chrome中测试.. （当你使用jQuery时，你可能应该＆＃34;执行＆＃34;在$(document).ready()而不是onload以确保＆＃34; canvasDiv＆＃34;已经被渲染了）

Answer 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>

用画布绘制应用程序

2 个答案: