HTML5画布线问题

时间:2011-09-02 10:05:02

标签: html5 canvas

我可以创建线条,但我想创建它,就像你可以改变它的方向和线条的大小,就像在这个链接中http://devfiles.myopera.com/articles/649/example5.html一样。

这是我的代码

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
$("canvas").mousedown(function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var a = x;
    var b = y;
    context.beginPath();
    context.lineWidth = 2;
    context.lineCap = "round";
    context.moveTo(a, b);
    $("canvas").mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        context.lineTo(x, y);
        context.stroke();
    });
    $("canvas").mouseup(function(e) {
        $("canvas").unbind("mousemove").unbind("mouseup");
    });
});

你也可以从中看。 http://jsfiddle.net/nSnDC/我该如何解决呢?

1 个答案:

答案 0 :(得分:1)

http://devfiles.myopera.com/articles/649/example5.js

答案只是一步之遥......

基本上你需要清理每次鼠标移动时绘制的线条(你的脚本没有这样做)。