利用HTML5的canvas进行鼠标写字

最新推荐文章于 2023-05-05 11:24:52 发布

_xwh

最新推荐文章于 2023-05-05 11:24:52 发布

阅读量1.2k

点赞数 1

分类专栏：前端知识文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_44174803/article/details/121214058

版权

前端知识专栏收录该内容

13 篇文章 1 订阅

订阅专栏

简介：

主要是使用HTML5中的canvas标签进行的，对画布的基本操作可以参考以下链接内容中的HTML5画布canvas：
https://blog.csdn.net/qq_44174803/article/details/121067133

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制案例</title>
    <style>
        #myCanvas {
            /* width: 400;
            height: 300; */
            border: 2px solid red;
        }

        /* #myDiv {
            width: 400px;
            height: 300px;
            margin: 100px auto;
            line-height: 300px;
        } */
    </style>
</head>

<body>
    <!-- <div id="myDiv">
    </div> -->
    <canvas id="myCanvas" width="400" height="300">
        <!-- 定义好需要绘制的幕布 -->
    </canvas>
</body>


<script type="text/javascript" src="mycanvas.js">
    // 此处可以直接内嵌写入html代码中，也可以通过外部链接的方式将JS代码引入
</script>

</html>

JS控制代码：

var canvas=document.getElementById("myCanvas");        //通过dom操作获取当千需要绘制的幕布
var pen=canvas.getContext('2d');       //设置绘制的上下文环境为2D类型

//准备画笔部分
// pen.fillStyle="#FF0000";        //将画笔设置为红色
pen.lineWidth=1;
pen.strokeStyle="black";   //将画笔设置为红色

//设置鼠标和画布的连接（通过函数实现）
canvas.οnmοusedοwn=start;       //鼠标左键按下代表开始绘制
canvas.οnmοusemοve=draw;        //鼠标移动正在绘制（前提是按下左键）
canvas.οnmοuseup=end;           //鼠标左键松开代表绘制完成

var mousePress=null;        //设置变量储存鼠标状态 用于判断
var lastPos=null;           //代表上一次绘制的终点


//实现绘制函数部分：
//此外需要一个获取鼠标坐标的函数  方便进行绘图
function getPos(event){     //event是事件响应的参数（包括鼠标点击事件和键盘敲击事件等等）
    //尝试把参数event换成e或者其他变量试试
    var tx,ty;
    tx=event.clientX;
    ty=event.clientY;
    return {
        x:tx,
        y:ty
    }
}
function start(event){       //定义开始函数
    mousePress=true;           //一按下就修改变量状态
    // pen.moveTo(800,300);
    //     pen.lineTo(800,350);
    //     pen.stroke();
}

function draw(event){        //  定义绘制函数
    if(!mousePress) return;     //如果没有按下鼠标  直接退出当前函数
    var now=getPos(event);      //获取当前鼠标位置
    //实际上一绘制结束点 是此次绘制的起点，而当前的鼠标位置是绘制的终点
    if(lastPos!=null){
        pen.beginPath();
        pen.moveTo(lastPos.x,lastPos.y);
        pen.lineTo(now.x,now.y);
        pen.stroke();      //该函数是完成绘制的最后一个步骤
    }
    //如果lastPos为空 则不进行绘制
    lastPos=now;    //绘制完成 当前鼠标点变成上一绘制结束点
}
function end(event){
    mousePress=false;
    lastPos=null;       //鼠标弹起后一定要将lastPos设置为空 要不然每次结束都会记忆上一次结束的点 
}