canvas快速入门（三）canvas实现笔触绘画案例

最新推荐文章于 2024-01-23 16:14:51 发布

小智爱学编程

最新推荐文章于 2024-01-23 16:14:51 发布

阅读量412

点赞数 3

分类专栏： JS小案例 JS成长之路文章标签： canvas javascript

本文链接：https://blog.csdn.net/qq_43690340/article/details/108136654

版权

JS成长之路同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS小案例

3 篇文章 0 订阅

订阅专栏

实现代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas{
            background-color: beige;
        }
    </style>
</head>
<body>
    <canvas width="1000" height="500"></canvas>
    <script>
        var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineCap = "round";
        ctx.lineJoin = "miter";
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#cccccc";
        ctx.fillStyle = "#FFDD88";
        ctx.beginPath();
        canvas.addEventListener("mousedown", mouseHandler);

        function mouseHandler(e) {
            if (e.type === "mousedown") {
                ctx.moveTo(e.offsetX, e.offsetY);
                canvas.addEventListener("mousemove", mouseHandler);
                canvas.addEventListener("mouseup", mouseHandler);
                canvas.addEventListener("mouseleave", mouseHandler);
            } else if (e.type === "mousemove") {
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            } else {
                canvas.removeEventListener("mousemove", mouseHandler);
                canvas.removeEventListener("mouseup", mouseHandler);
                canvas.removeEventListener("mouseleave", mouseHandler);
            }
        }

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

效果图

在这里插入图片描述

小智爱学编程

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
canvas快速入门（三）canvas实现笔触绘画案例

实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas{
复制链接

扫一扫