canvas实现鼠标三角形，多边形区域绘制并下载图片

林-

已于 2023-04-10 09:48:26 修改

阅读量213

点赞数

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

于 2023-04-10 09:47:26 首次发布

本文链接：https://blog.csdn.net/weixin_42571979/article/details/130052407

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

所需要的知识点：

let ctx = canvas.getContext(‘2d’); // 方法返回canvas 的上下文，如果上下文没有定义则返回 null
canvas.width； //canvas的宽
canvas.height； //canvas的高
new Image(); //函数将会创建一个新的HTMLImageElement实例
ctx .drawImage(),//绘制图像
ctx .beginPath(); //创建不同的路径
ctx.moveTo(0, 0);//移动画笔到起始点绘制一条线
ctx.lineTo();//画一条直线
ctx.stroke();//渲染线路
canvas.toDataURL()//方法返回一个包含图片展示的 data URI（下载图片返回base64）
ctx.clearRect() //清楚画布
看更多canvasApi详情请到这里

绘制图像的demo：

这里直接贴代码demo了，可直接运行，vue的话，稍微改一下变量的引用就行

<body>
    <button id="button">点击截屏</button>     [选择后鼠标双击保存线路]
  
    <div style="background-color: #ccc;width: 400px">
        <canvas id="canvas" style="background:url('http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290');background-size: 100% 100%;"></canvas>
    </div>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
        $(function() {
            var startdraw = false;
            
            var point = {
                x: 0,
                y: 0
            };
            var drawCanvas = document.getElementById('canvas');
            var ctx = drawCanvas.getContext('2d');
            drawCanvas.width = 400;
            drawCanvas.height = 300;

            var canvasOffset = $('#canvas').offset();     //获取x和y的偏移量{x:,y:}
            var arrlines = [];
            var arr = [];


            var num=0;

             $("#button").click(function(){
                console.log(num)
                console.log(arr)
                    let imgObj = new Image()
                    imgObj.src = 'http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&f=JPEG?w=1200&h=1290'
                    imgObj.setAttribute("crossOrigin",'Anonymous')
                    imgObj.onload = function () {
                    ctx.drawImage(imgObj,0,0,drawCanvas.width,drawCanvas.height)
                    ctx.beginPath();

                    if (arr.length > 2) {
                            ctx.moveTo(arr[0].x, arr[0].y);
                            for (var i = 0; i < arr.length; i++) {
                                var p = arr[i];
                                ctx.lineTo(p.x, p.y);
                                //ctx.closePath();
                            }
                            ctx.lineTo(arr[0].x,arr[0].y);
                            ctx.stroke();
                        }
                    }
                    // 生成图片（图片的格式）
                    let t = setTimeout(()=>{
                            let imageUrl = drawCanvas.toDataURL("image/png");
                            console.log(imageUrl);
                            clearInterval(t)
                    },300)
                
              

             })

            $('#canvas').mousemove(function(e) {
                if (startdraw) {
                    ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
                    ctx.strokeStyle = 'blue';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    if (arr.length > 0) {
                        ctx.moveTo(arr[0].x, arr[0].y);
                        for (var i = 0; i < arr.length; i++) {
                            var p = arr[i];
                            ctx.lineTo(p.x, p.y);
                            ctx.stroke();
                            //ctx.closePath();
                        }
                    }
                    if(num>1){
                        ctx.moveTo(point.x, point.y);
                        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);

                        ctx.moveTo(arr[0].x, arr[0].y);
                        ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                    }else{
                         ctx.moveTo(point.x, point.y);
                         ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
                    }
                    ctx.stroke();
                }
            });

            $('#canvas').mousedown(function(e) {
                num++;
                ctx.beginPath();
                point = {
                    x: e.pageX - canvasOffset.left,
                    y: e.pageY - canvasOffset.top
                }
                arr.push(point);
                startdraw = true;
            });

            $("#canvas").dblclick(function(){
                if(arr.length-1<3){
                    alert('最少绘制三个点')
                    return;
                }
                startdraw = false;
                num--;
                arr.splice(arr.length-1,1)
                ctx.closePath();
            })

            $(window).mouseup(function(e) {
                // startdraw = false;
                // var obj = {
                //     x: e.pageX - canvasOffset.left,
                //     y: e.pageY - canvasOffset.top
                // };
                // arr.push(obj);
                // arrlines.push(arr);
                // arr = [];
                // console.log(arrlines);
            });
        });


    </script>

</body>

觉得不错的话点个赞，收藏一下哈

林-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas实现鼠标三角形，多边形区域绘制并下载图片

所需要的知识点：let ctx = canvas.getContext(‘2d’); // 方法返回canvas 的上下文，如果上下文没有定义则返回 nullcanvas.width； //canvas的宽canvas.height； //canvas的高new Image(); //函数将会创建一个新的HTMLImageElement实例ctx .drawImage(),//绘制图像ctx .beginPath(); /
复制链接

扫一扫