Maison > Article > interface Web > HTML5 implémente une simple planche à dessin en ligne

HTML5 implémente une simple planche à dessin en ligne

王林avant: 2020-12-04 16:18:3310647parcourir

Jetons d'abord un coup d'œil à l'implémentation :

(Tutoriel recommandé : h5)

HTML5 implémente une simple planche à dessin en ligne

Le code d'implémentation est le suivant :

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

Partage gratuit de vidéos d'apprentissage : Tutoriel vidéo html

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!

html5 html

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：HTML5 implémente la lecture automatique de la musique de fondArticle suivant：HTML5 implémente la lecture automatique de la musique de fond

Articles Liés

Voir plus