canvas 基本用法

最新推荐文章于 2022-09-13 16:23:20 发布

weixin_43180610

最新推荐文章于 2022-09-13 16:23:20 发布

阅读量106

点赞数

文章标签： js canvas javascript

本文链接：https://blog.csdn.net/weixin_43180610/article/details/106410402

版权

canvas 基本用法

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>JavaScript+Canvas实现自定义画板</title>
</head>
<style>
    .parent {
        /* position: relative; */
    }

    canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    button {
        border: none;
        outline: none;
        padding: 10px 20px;
        background-color: green;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<body>
    <div style="text-align: center;"><button onclick="clearCanvas()">清除</button></div>
    <canvas id="canvas" width="600" height="500"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        //画一个红色矩形  
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        //按下标记  
        var onoff = false;
        // canvas 距上边和左边的距离
        var Absleft = getAbsLeft(canvas) - (canvas.width / 2);
        var AbsTop = getAbsTop(canvas) - (canvas.height / 2);

        var oldx = -10;
        var oldy = -10;
        //设置颜色  
        var linecolor = "white";
        //设置线宽  
        var linw = 4;
        //添加鼠标移动事件  
        canvas.addEventListener("mousemove", draw, true);  //第三个参数主要跟捕获或者冒泡有关  
        //添加鼠标按下事件  
        canvas.addEventListener("mousedown", down, false);
        //添加鼠标弹起事件  
        canvas.addEventListener("mouseup", up, false);
        function down(event) {
            onoff = true;
            oldx = event.pageX - Absleft;
            oldy = event.pageY - AbsTop;
            console.log(event.pageX + '..............000.............' + event.pageY);
            //event.pageX跟event.pageY相对于整个页面鼠标的位置 包括溢出的部分（就是滚动条）  

        }

        function up() {
            onoff = false;
        }

        function draw(event) {
            if (onoff == true) {
                var newx = event.pageX - Absleft;
                var newy = event.pageY - AbsTop;
                ctx.beginPath();//beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。  
                ctx.moveTo(oldx, oldy);   //移动到点击时候的坐标，以那个坐标为原点  
                ctx.lineTo(newx, newy);   //绘制新的路径  
                ctx.strokeStyle = linecolor;
                ctx.lineWidth = linw;
                ctx.lineCap = "round";
                ctx.stroke();//stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。  
                //将新的鼠标位置赋给下一次开始绘制的起始坐标  
                oldx = newx;
                oldy = newy;
            };
        };

        // 计算canvas 中心距屏幕浏览器上侧距离
        function getAbsTop(obj) {
            var top = obj.offsetTop;
            while (obj.offsetParent != null) {
                obj = obj.offsetParent;
                top += obj.offsetTop;
            }
            return top;
        }
        // 计算canvas 中心距屏幕浏览器左侧距离
        function getAbsLeft(obj) {
            var l = obj.offsetLeft;
            while (obj.offsetParent != null) {
                obj = obj.offsetParent;
                l += obj.offsetLeft;
            }
            return l;
        }
        // 清除canvas 内容
        function clearCanvas() {
            var canvas = document.getElementById("canvas");
            var cxt = canvas.getContext("2d");
            // 重新生成一下 画布
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>

</html>