js implémente les notes de fonction de pinceau via Canvas

Je pense que tout le monde connaît la fonction de dessin au trait de Flash. J'ai déjà écrit des fonctions similaires en utilisant le script actionde Flash. Cependant, étant donné que Flash est déjà une technologie obsolète,

. Ci-dessous, nous présentons comment implémenter la fonction de planche à dessin via la balise canvas de html5 combinée avec javascript Le code

est le suivant :

.

<script src="http://www.php.cn/static/home/js/jquery.min.js"></script>
<canvas id="paintcanvas" width="600" height="700"></canvas>
<script>
var paint;
var clickX=[];
var clickY=[];
var clickDrag=[];
function addClick(x,y,dragging)
{
        clickX.push(x);
        clickY.push(y);
        clickDrag.push(dragging);
}
function redraw()
{
        paintcanvas.strokeStyle = "#df4b26";
        paintcanvas.lineJoin = "round";
        paintcanvas.lineWidth = 5;
        for(var i=0; i < clickX.length; i++)
        {
            paintcanvas.beginPath();
            if(clickDrag[i] && i){//当是拖动而且i!=0时，从上一个点开始画线。
                paintcanvas.moveTo(clickX[i-1], clickY[i-1]);
            }else{
                paintcanvas.moveTo(clickX[i]-1, clickY[i]);
            }
            paintcanvas.lineTo(clickX[i], clickY[i]);
            paintcanvas.closePath();
            paintcanvas.stroke();
        }
}
paintcanvas=$(&#39;#paintcanvas&#39;)[0].getContext("2d");
$(&#39;#paintcanvas&#39;).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();
});
$(&#39;#paintcanvas&#39;).mousemove(function(e){
        if(paint){
            addClick(e.pageX-this.offsetLeft,e.pageY-this.offsetTop,true);
            redraw();
        }
});
$(&#39;#paintcanvas&#39;).mouseup(function(e){
        paint = false;
});
$(&#39;#paintcanvas&#39;).mouseleave(function(e){
        paint = false;
});
</script>

Parmi eux, la fonction de dessin au trait est réalisée via mousedown, mousemove, mouseup, mouseleave et d'autres événements js .

Cet article est fourni par le site Web chinois php,

Adresse originale : http://www.php.cn/js-tutorial-374130.html

Veuillez ne pas réimpression~~ ~~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!