canvas制作鼠标绘图和方块移动小案例

最新推荐文章于 2024-06-30 12:42:30 发布

前端搬砖达人

最新推荐文章于 2024-06-30 12:42:30 发布

阅读量1.3k

点赞数

分类专栏： html5 文章标签： canvas基础绘图 html5

本文链接：https://blog.csdn.net/wyq12138/article/details/83687334

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

鼠标绘图.gif canvas制作鼠标绘图：原理：获取开始点击的点和鼠标移动后的点
所用知识：event对象 canvas绘图

 window.onload=function (){
            var myCanvas=document.querySelector('#myCanvas');
            
            var cxt=myCanvas.getContext('2d');
            myCanvas.onmousedown=function (event) {
                var e=event || window.event;
//获取鼠标开始点击位置
                cxt.moveTo(e.clientX-myCanvas.offsetLeft,e.clientY-myCanvas.offsetTop);
               document.onmousemove=function (event) {
                    var e=event || window.event;
//鼠标移动位置
                    cxt.lineTo(e.clientX-myCanvas.offsetLeft,e.clientY-myCanvas.offsetTop);
                   cxt.stroke();
                }

                document.onmouseup=function () {
                    document.onmouseup=null;
                    document.onmousemove=null;
                }
            }

        }

方块移动小案例: 坐标的改变

window.onload=function (){
            var myCanvas=document.querySelector('#myCanvas');
            var cxt=myCanvas.getContext('2d');
            var num=0;
            cxt.fillRect(0,0,100,100);
            setInterval(function () {
                num++;
                cxt.clearRect(0,0,myCanvas.width,myCanvas.height);
                cxt.fillRect(num,num,100,100);

            },30)
        }