집 > 기사 > 웹 프론트엔드 > HTML5는 간단한 온라인 드로잉 보드를 구현합니다.

HTML5는 간단한 온라인 드로잉 보드를 구현합니다.

王林앞으로: 2020-12-04 16:18:3310589검색

먼저 구현을 살펴보겠습니다.

(추천 튜토리얼: h5)

HTML5는 간단한 온라인 드로잉 보드를 구현합니다.

구현 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="600" height="600"></canvas>
        <script type="text/javascript">
            var c = document.getElementById(&#39;canvas&#39;);
            var ctx = c.getContext(&#39;2d&#39;);

            //画一个黑色矩形
            ctx.fillStyle = &#39;black&#39;;
            ctx.fillRect(0,0,600,300);

            //按下标记
            var onoff = false;
            var oldx = -10;
            var oldy = -10;

            //设置颜色
            var linecolor = &#39;white&#39;;

            //设置线宽
            var linw = 4;

            //添加鼠标移动事件
            canvas.addEventListener(&#39;mousemove&#39;,draw,true);

            //添加鼠标按下事件
            canvas.addEventListener(&#39;mousedown&#39;,down,false);

            //添加鼠标弹起事件
            canvas.addEventListener(&#39;mouseup&#39;,up,false);

            function down(event) {
                onoff = true;
                oldx = event.pageX-10;
                oldy = event.pagey-10;
            }

            function up() {
                onoff = false;
            }

            function draw(event) {
                if(onoff == true) {
                    var newx = event.pageX-10;
                    var newy = event.pageY-10;
                    ctx.beginPath();
                    ctx.moveTo(oldx,oldy);
                    ctx.lineTo(newx,newy);
                    ctx.strokeStyle = linecolor;
                    ctx.lineCap = &#39;round&#39;;
                    ctx.stroke();

                    oldx = newx;
                    oldy = newy;
                }
            }
        </script>
    </body>
</html>

무료 학습 동영상 공유: html 동영상 튜토리얼

위 내용은 HTML5는 간단한 온라인 드로잉 보드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html5 html

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：HTML5는 배경 음악의 자동 재생을 구현합니다.다음 기사：HTML5는 배경 음악의 자동 재생을 구현합니다.