How to create a ruler a tool for canvas?

问题

Like the standard paint program in windows, I'm trying to create a very basic sketch canvas program where the the user can select a ruler tool to draw with on the canvas. How do I achieve this?

I'm quite a beginner so I'd appreciate if the answer is as simple as possible...

Thanks!!

回答1:

If I may suggest you could use my easyCanvas library. It's a library that wraps around standard canvas and let you use it as ordinary but adds some handy functionality (GPL3).

If this is an option you could create what you need simply by doing this assumimg the easyCanvas script is already included:

var ez = new easyCanvas();

// enable background handling when drawing
ez.autoClear = true;

// mouse down/up is handled internally so all we need to draw the line
ez.onmousemove = function(e) {
    ez1.line(ez.firstX, ez.firstY, e.x, e.y);
}

(you can use an existing canvas element as well - this will create a canvas that covers the window and auto-resizes it when window size changes, please see documentation for the details).

Update: easyCanvas is now legacy and is located at GitHub to avoid link-rot.

回答2:

You can use 2 overlapping canvases wrapped in a container div.

Then draw your ruler marks on the bottom canvas.

enter image description here

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/8hVC2/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #wrapper{
        position:relative;
        width:315px;
        height:215px;

    }
    #canvasBottom{
        position:absolute; top:0px; left:0px;
        border:1px solid red;
    }
    #canvasTop{
        position:absolute; top:15px; left:15px;
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvasTop");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvasBottom");
    var ctx2=canvas2.getContext("2d");

    ctx2.beginPath();
    for(var i=0;i<canvas.width;i+=10){
        var y=(i/100==parseInt(i/100))?0:10;
        ctx2.moveTo(i+15,y);
        ctx2.lineTo(i+15,15);
        var x=(i/100==parseInt(i/100))?0:10;
        ctx2.moveTo(x,i+15);
        ctx2.lineTo(15,i+15);
    }
    ctx2.stroke();


    var canvasOffset=$("#canvasTop").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ mouseX + " / " + mouseY);

      // Put your mousemove stuff here

    }

    $("#canvasTop").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p id="movelog">Move</p>
    <div id="wrapper">
        <canvas id="canvasBottom" width=315 height=215></canvas>
        <canvas id="canvasTop" width=300 height=200></canvas>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/20434728/how-to-create-a-ruler-a-tool-for-canvas

标签

javascript

html

canvas