canvas实现的简易涂鸦板效果

用canvas实现的简易涂鸦板效果，用鼠标点击在画布上随意涂鸦

<head>
<meta charset="UTF-8">
<title>涂鸦</title>
<style>
*{
margin: 0;
padding: 0;
}
#canvas1{
box-shadow: 0 5px 40px black;
}
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d')

canvas.onmousedown = function (e) {
    
    var ev = e||window.event;

    var x = ev.clientX - canvas.offsetLeft;
    var y = ev.clientY - canvas.offsetTop;

    context.beginPath();
    context.moveTo(x,y);

    canvas.onmousemove = function (e) {
        var ev = e||window.event;
        var x = ev.clientX - canvas.offsetLeft;
        var y = ev.clientY - canvas.offsetTop;
        console.log(x)
        context.lineWidth = 5;
        context.strokeStyle = "red";

        context.lineTo(x,y);
        context.stroke()
    }
    canvas.onmouseup = function () {
        canvas.onmousemove = null;
    }
}

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>涂鸦</title>
    <style>
        #canvas1{
            box-shadow: 0 5px 40px black;
        }
    </style>
</head>
<body>
    <canvas id="canvas1" width="500" height="500"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas1');

    var context = canvas.getContext('2d')

    canvas.onmousedown = function (e) {
        
        var ev = e||window.event;

        var x = ev.clientX - canvas.offsetLeft;
        var y = ev.clientY - canvas.offsetTop;

        context.beginPath();
        context.moveTo(x,y);

        canvas.onmousemove = function (e) {
            var ev = e||window.event;
            var x = ev.clientX - canvas.offsetLeft;
            var y = ev.clientY - canvas.offsetTop;
            console.log(x)
            context.lineWidth = 5;
            context.strokeStyle = "red";

            context.lineTo(x,y);
            context.stroke()
        }
        canvas.onmouseup = function () {
            canvas.onmousemove = null;
        }
    }

</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • canvas基础第一节
    一、基础介绍和画直线 大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome...
    空谷悠阅读 945评论 0赞 1
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 2,007评论 0赞 1
  • canvas实现简单的Amaziograph效果画对称图
    标题很难引人入胜，先放个效果图好了 如果图片吸引不了你，那我觉得也就没啥看的了。 demo链接：https://w...
    kingZXY2009阅读 2,180评论 0赞 1
  • zuma
    html5实现简易版祖玛小游戏 canvas简介 是html5出现的新标签，像所有的dom对象一样它有自己本身的属...
    啾啾哒阅读 717评论 0赞 0
  • 无标题文章
    title: Optical Character Recognition (OCR)author: Marina ...
    4a87cc38dcbc阅读 406评论 0赞 0

友情链接更多精彩内容