使用html5 canvas制作涂鸦画板

02-10 次

标签 canvas html5 canvas

HTML5的canvas元素是HTML5新特性中最有用的元素之一。通过html5 canvas，我们可以做图像处理、绘图、保存、恢复层和渲染图像等等操作，而不用依赖像Adobe Flash player和silverlight之类的外部插件。

在这篇文章中，我们将编写一个Javascript插件来使大家可以在canvas上随意涂写和绘画，就像一块涂鸦画板一样。另外再添加一些额外的小功能，如选择线条的宽度和颜色。

画板的最终效果就像下面这样，尝试在上面用鼠标画画看：

Line width : Color :

HTML代码

我们需要一个用于绘画的canvas元素和一些用于选择操作的下拉框：

<div align="center">
    <canvas id="myCanvas" width="500" height="200" style="border:2px solid #6699cc"></canvas>
    <div class="control-ops">
    <button type="button" class="btn btn-primary" onclick="javascript:clearArea();return false;">清空画板</button>
    Line width : <select id="selWidth">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
        <option value="7">7</option>
        <option value="9" selected="selected">9</option>
        <option value="11">11</option>
    </select>
    Color : <select id="selColor">
        <option value="black">black</option>
        <option value="blue" selected="selected">blue</option>
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="yellow">yellow</option>
        <option value="gray">gray</option>
    </select>
    </div>
</div>

JAVASCRIPT

我们的涂鸦画板js脚本主要有三个函数：

InitThis()：该方法用于初始化所需要的鼠标事件。
Draw()：该方法在鼠标左键被按下时每次移动都会画一条线。
clearArea()：该方法用于清空画板上的所有线条。

var mousePressed = false;
var lastX, lastY;
var ctx;

function InitThis() {
    ctx = document.getElementById('myCanvas').getContext("2d");

    $('#myCanvas').mousedown(function (e) {
        mousePressed = true;
        Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    });

    $('#myCanvas').mousemove(function (e) {
        if (mousePressed) {
            Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
        }
    });

    $('#myCanvas').mouseup(function (e) {
        mousePressed = false;
    });
        $('#myCanvas').mouseleave(function (e) {
        mousePressed = false;
    });
}

function Draw(x, y, isDown) {
    if (isDown) {
        ctx.beginPath();
        ctx.strokeStyle = $('#selColor').val();
        ctx.lineWidth = $('#selWidth').val();
        ctx.lineJoin = "round";
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }
    lastX = x; lastY = y;
}
    
function clearArea() {
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

在页面加载完毕后调用InitThis()，canvas现在就是一块涂鸦画板了。快来试一试吧！

如果你需要将画板上画好的内容上传并保存在服务器上，还需要添加一些代码，我们将在下一个教程中讲解它。