js는 캔버스를 통해 브러시 기능 노트를 구현합니다.

플래시 선 그리기 기능은 다들 잘 아실 거라 믿습니다. 이전에 플래시의 action스크립트를 사용하여 유사한 기능을 작성한 적이 있지만, 플래시는 이미 구시대적인 기술이라는 점을 감안하여

html5 사용법을 소개하겠습니다. 캔버스 태그를 javascript와 결합하여 드로잉보드 기능을 구현합니다.

코드는 다음과 같습니다.

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

그 중 선 그리기 기능은 mousedown, mousemove, mouseup, mouseleave 및 기타 jsevents를 통해 구현됩니다.

이 글은 PHP 중국어 웹사이트에서 제공됩니다.

원본 주소: http://www.php.cn/js-tutorial-374130.html

재인쇄하지 마세요~~~~

위 내용은 js는 캔버스를 통해 브러시 기능 노트를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!