canvas编写画图工具

最新推荐文章于 2023-09-22 23:16:21 发布

空山新雨君

最新推荐文章于 2023-09-22 23:16:21 发布

阅读量470

点赞数

分类专栏：前端 js canvas 文章标签：前端 canvas js

本文链接：https://blog.csdn.net/xxtz0522/article/details/83989406

版权

前端同时被 3 个专栏收录

51 篇文章 2 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="board">
        <canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
            您的浏览器不支持 HTML5 canvas 标签。
        </canvas>
    </div>
    <div>
        <button id="clear" onclick="clearcanvas()">清除</button>
        <button id="nomal" onclick="normaldraw()">画线</button>
        <button id="nomal" onclick="drawline()">直线</button>
    </div>

<script>
    //笔刷设置
    var brush = {
        color: "#888",
        size: 1,
    };

    var canvas;//创建画布
    var context;//获取上下文
    
    window.onload=function(){
            //创建画布
            canvas=document.getElementById("myCanvas");
            context = canvas.getContext("2d");
            
        }

    //不同绘画类型
    //随便画
    function setNormal(canvas) {
        // var context = canvas.getContext("2d");
        context.lineCap = "round";//lineCap 属性设置或返回线条末端线帽的样式。
        canvas.onmousedown = function (e) {
            context.lineWidth = brush.size;
            context.strokeStyle = brush.color;
            context.beginPath();
            //console.log(brush.color);
            context.moveTo(e.offsetX, e.offsetY);
            e.target.onmousemove = function (e2) {
                //console.log("move");
                context.lineTo(e2.offsetX, e2.offsetY);
                context.stroke();//stroke()方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。
                context.moveTo(e2.offsetX, e2.offsetY);
            }
            //console.log("down");
        }
        canvas.onmouseup = function (e) {
            e.target.onmousemove = null;
        }
    }

    //画直线
    function setLine(canvas) {
        // context.fillStyle = "rgba(0,0,0,0.01)"
        // context.fillRect(0,0,canvas.width,canvas.height)
        context.lineCap = "round";
        canvas.onmousedown = function (e) {
            //为了画多条直线，每次创建新image
            var tempimg = new Image();
            tempimg.src = canvas.toDataURL();

            var oldx = e.offsetX;
            var oldy = e.offsetY;
            context.lineCap = "round";
            context.lineWidth = brush.size;
            canvas.onmousemove = function (e2) {
                context.clearRect(0, 0, canvas.width, canvas.height);//鼠标按住拖动的时候要清除当前画布内容，否则持续画直线
                // context.drawImage(canvasBackground, 0, 0, canvas.width, canvas.height);
                context.drawImage(tempimg, 0, 0);//若无此句会清除之前的直线重新画线
                
                context.beginPath();
                context.moveTo(oldx, oldy);
                context.lineTo(e2.offsetX, e2.offsetY);
                context.stroke();
            }

        }
        canvas.onmouseup = function (e2) {
            canvas.onmousemove = null;
        }
    }
    

    //按钮
    function clearcanvas(){//清除画布
        context.clearRect(0,0,500,500);
        }
    
    function normaldraw(){//随便画
        setNormal(canvas);
    }

    function drawline(){//画直线
        setLine(canvas);
    }
</script>
</body>
</html>

空山新雨君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas编写画图工具

效果：代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
复制链接

扫一扫