html5 画笔（brush）

最新推荐文章于 2021-06-04 14:48:51 发布

蕉风夜雨

最新推荐文章于 2021-06-04 14:48:51 发布

阅读量2.9k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/qqq_11101/article/details/50649564

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>画笔</title>
    <meta charset="utf-8">

</head>
<body>
<canvas id="mycanvas" width="600" height="400" style="background: black;">
</canvas>
<script type="text/javascript">
    var canvas = document.getElementById('mycanvas');
    var cxt = canvas.getContext("2d");
    cxt.strokeStyle="white";
    var flag = false;//判断鼠标是否按下
    canvas.onmousedown = function (e) {
        flag = true;
//e是鼠标按下事件，this是画布canvas.
//pageX是相对于浏览器的，offsetLeft是相对于父级容器的
        var startx = e.pageX-this.offsetLeft;
        var starty = e.pageY-this.offsetTop;
        cxt.moveTo(startx,starty);
    }
    canvas.onmousemove = function (e) {
        var endx = e.pageX-this.offsetLeft;
        var endy = e.pageY-this.offsetTop;
        if(flag){
            cxt.lineTo(endx,endy);
            cxt.stroke();
        }

    }
    canvas.onmouseup = function(){
        flag = false;
    }

    canvas.onmouseout = function(){
        flag = false;
    }



</script>
</body>
</html>

这里写图片描述

蕉风夜雨

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5 画笔（brush）

<!DOCTYPE html><html><head> <title>画笔</title> <meta charset="utf-8"></head><body><canvas id="mycanvas" width="600" height="400" style="background: black;"></canvas><script type="text/java
复制链接

扫一扫

专栏目录