canvas批阅-添加对错以及箭头文字图形等，可撤销可保存

最新推荐文章于 2024-03-22 18:49:25 发布
最新推荐文章于 2024-03-22 18:49:25 发布
阅读量147 收藏 1
点赞数
文章标签： html canvas 批注
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zx0203/article/details/79245128
版权 
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Document</title>  
<style type="text/css">
    body{font:16px/1 "Microsoft Yahei","微软雅黑",'Arial Negreta', 'Arial';}
    canvas{border:1px solid #000000; cursor: crosshair;}
    .hide{display: none;}
    #txt{position: absolute; top: 1%; left: 1%; width: 575px; height: 30px; border:1px solid #e42343;}
    #word{position: absolute;width: 220px; height: 80px; padding: 0 2px; background:none; color:#e42343; border: 1px dashed #b9b9b9; font-size: 15px; font-family: "微软雅黑", "arial"; }
    #word::-webkit-input-placeholder{color:#e42343; font-family: "微软雅黑", "arial";}
    #word::-moz-placeholder{color:#e42343;font-family: "微软雅黑", "arial";}
    #word::placeholder{color:#e42343; font-family: "微软雅黑", "arial";}
</style>
</head>  
<body>
  <button type="button" class="btn btn-warning" onclick="true1();" >正确</button>
  <button type="button" class="btn btn-warning" onclick="error1();" >错误</button>
  <button onclick="pen();">画笔</button>
  <button onclick="arrow();">箭头</button>
  <button onclick="rect();">矩形</button>
  <!--<button onclick="text();">text</button>-->
  <button onclick="word1();">文字</button>
  <button onclick="put();">上一步</button>
  <button onclick="restuya();">清除批注</button>
  <button onclick="back();">回退</button>
  <button onclick="saveTu();">保存</button>
<hr>

<div style="position: relative;">
  <canvas id="canvas" width="700"  height="500" >
    您的浏览器不支持绘图，请升级或更换浏览器！
  </canvas>
  <input type="text" value="" class="hide" id="txt" placeholder="请输入文字">
  <textarea class="hide" id="word" cols="30" rows="10"  placeholder="请输入文字" autofocus></textarea>
  <input id="inputV" type="hidden"  value="1">
</div>
<hr>
  <div id="res"></div>

<script type="text/javascript">  
    var canvas = document.getElementById('canvas');   
    var ctx = canvas.getContext('2d'); 
    var myCanvas_rect = canvas.getBoundingClientRect();
    var Txt = document.getElementById('txt');
    var word = document.getElementById('word');
    var widths = myCanvas_rect.width;
    var heights = myCanvas_rect.height;
    var lineW = 3;
    var lineWPen = 2;
    var colorF="#e42343";
    var colorT="#50f596";
    var imgData;
    var preDrawAry = new Array();

    //引入图片背景路径
    var imgs = new Image();  
    imgs.src = "images/stu.png";
    imgs.onload = drawImg;

    //图片加载完成再执行
    function drawImg(){  
        ctx.drawImage(imgs,0,0,widths,heights);  
    };

    // 对号
    function true1(){
            Txt.style.display="none";
            word.style.display="none";
            ctx.closePath();
            canvas.onmousedown=function (ev) {
            imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
            preDrawAry.push(imgData);
            ctx.beginPath();
            ctx.strokeStyle = colorT;
            ctx.lineWidth = lineW;
            ctx.lineJoin="round";
            };
            canvas.onmouseup=function (ev) {
                //鼠标按下的位置
                var oldX = ev.offsetX;
                var oldY = ev.offsetY;
                console.log(oldX,oldY);
                ctx.moveTo(oldX,oldY);
                ctx.lineTo(ev.offsetX+20,ev.offsetY+20);
                ctx.lineTo(ev.offsetX+60,ev.offsetY-10);
                ctx.stroke();
            }
    };

    // 叉号
    function error1(){
           Txt.style.display="none";
            word.style.display="none";
           ctx.closePath();
           canvas.onmousedown=function (ev) {
            imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
            preDrawAry.push(imgData);
            ctx.beginPath();
            ctx.strokeStyle = colorF;
            ctx.lineWidth = lineW;
            ctx.lineJoin="round";
           };
            //鼠标按下的位置
            canvas.onmouseup=function (ev) {
                var oldX = ev.offsetX;
                var oldY = ev.offsetY;
                ctx.moveTo(oldX,oldY);
                ctx.lineTo(ev.offsetX+30,ev.offsetY+30);
                ctx.moveTo(ev.offsetX+30,ev.offsetY);
                ctx.lineTo(ev.offsetX,ev.offsetY+30);
                ctx.stroke();
            };
            ctx.closePath();
    };

    // 画笔
    function pen(){
          Txt.style.display="none";
          word.style.display="none";
          var last;
          // 鼠标按下  
          canvas.onmousedown = function(){  
              // 在鼠标按下后触发鼠标移动事件  
              canvas.onmousemove = move;  
              imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
              preDrawAry.push(imgData);
          }  
        
          // 鼠标抬起取消鼠标移动的事件  
          canvas.onmouseup = function(){  
              canvas.onmousemove = null;    
              last = null;  
          }  
        
          // 鼠标移出画布时 移动事件取消  
          canvas.onmouseout = function(){  
              canvas.onmousemove = null;  
              last = null;  
          }  
           // 鼠标移动函数  
            function move(e){  
                // console.log(e.offsetX);  
                if(last != null){  
                    ctx.beginPath();  
                    ctx.lineWidth = lineWPen;
                    ctx.strokeStyle = colorF;
                    ctx.moveTo(last[0],last[1]);  
                    ctx.lineTo(e.offsetX,e.offsetY);  
                    ctx.stroke();  
                }         
                // 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来  
                // 做下一次 线段的 起始点。  
                last = [e.offsetX,e.offsetY];  
          
            }  
    };

    // 箭头
    function arrow(){
           Txt.style.display="none";
           word.style.display="none";
           var beginPoint = {},
           stopPoint = {},
           polygonVertex = [],
           CONST = {
               edgeLen:100,
               angle: 50
           };
            var Plot = {
               angle: "",
               //短距离画箭头的时候会出现箭头头部过大，修改：
               dynArrowSize: function() {
                   var x = stopPoint.x - beginPoint.x,
                       y = stopPoint.y - beginPoint.y,
                       length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
                       if (length < 250) {
                           CONST.edgeLen = CONST.edgeLen/2;
                           CONST.angle = CONST.angle/2;
                       }
                       else if(length<500){
                           CONST.edgeLen=CONST.edgeLen*length/500;
                           CONST.angle=CONST.angle*length/500;
                       }
//                    console.log(length);
               },
               //getRadian 返回以起点与X轴之间的夹角角度值
               getRadian: function(beginPoint, stopPoint) {
                   Plot.angle = Math.atan2(stopPoint.y - beginPoint.y, stopPoint.x - beginPoint.x) / Math.PI * 180;
                   console.log(Plot.angle);
                   paraDef(50,25);
                   Plot.dynArrowSize();
               },
               ///获得箭头底边两个点
               arrowCoord: function(beginPoint, stopPoint) {
                   polygonVertex[0] = beginPoint.x;
                   polygonVertex[1] = beginPoint.y;
                   polygonVertex[6] = stopPoint.x;
                   polygonVertex[7] = stopPoint.y;
                   Plot.getRadian(beginPoint, stopPoint);
                   polygonVertex[8] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle + CONST.angle));
                   polygonVertex[9] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle + CONST.angle));
                   polygonVertex[4] = stopPoint.x - CONST.edgeLen * Math.cos(Math.PI / 180 * (Plot.angle - CONST.angle));
                   polygonVertex[5] = stopPoint.y - CONST.edgeLen * Math.sin(Math.PI / 180 * (Plot.angle - CONST.angle));
               },
               //获取另两个底边侧面点
               sideCoord: function() {
                   var midpoint = {};
                   // midpoint.x = polygonVertex[6] - (CONST.edgeLen * Math.cos(Plot.angle * Math.PI / 180));
                   // midpoint.y = polygonVertex[7] - (CONST.edgeLen * Math.sin(Plot.angle * Math.PI / 180));
                   midpoint.x=(polygonVertex[4]+polygonVertex[8])/2;
                   midpoint.y=(polygonVertex[5]+polygonVertex[9])/2;
                   polygonVertex[2] = (polygonVertex[4] + midpoint.x) / 2;
                   polygonVertex[3] = (polygonVertex[5] + midpoint.y) / 2;
                   polygonVertex[10] = (polygonVertex[8] + midpoint.x) / 2;
                   polygonVertex[11] = (polygonVertex[9] + midpoint.y) / 2;
               },

               //画箭头
               drawArrow: function() {
                   ctx.beginPath();
                   ctx.moveTo(polygonVertex[0], polygonVertex[1]);
                   ctx.lineTo(polygonVertex[2], polygonVertex[3]);
                   ctx.lineTo(polygonVertex[4], polygonVertex[5]);
                   ctx.lineTo(polygonVertex[6], polygonVertex[7]);
                   ctx.lineTo(polygonVertex[8], polygonVertex[9]);
                   ctx.lineTo(polygonVertex[10], polygonVertex[11]);
                   // ctx.lineTo(polygonVertex[0], polygonVertex[1]);
                   ctx.closePath();
                   ctx.fillStyle=colorF;
                   ctx.fill();
               }
           };
              //记录起点beginPoint
               canvas.onmousedown=function (e) {
                     imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
                     preDrawAry.push(imgData);
                       beginPoint.x = e.offsetX;
                       beginPoint.y = e.offsetY;
                      console.log(beginPoint.x+"+"+beginPoint.y);
                 };

               //记录终点stopPoint，绘图
              canvas.onmouseup = function(e){  
                   stopPoint.x = e.offsetX;
                   stopPoint.y = e.offsetY;
                   // alert(stopPoint.x+"+"+stopPoint.y);
                   Plot.arrowCoord(beginPoint, stopPoint);
                   Plot.sideCoord();
                   Plot.drawArrow();
               };

               //自定义参数
               function paraDef(edgeLen, angle) {
                   CONST.edgeLen = edgeLen;
                   CONST.angle = angle;
               }

    };

    // 矩形
//    function rect() {
//        Txt.style.display="none";
//        word.style.display="none";
//        var x1,y1,x2,y2,wid,hig;
//        ctx.closePath();
//        canvas.onmousedown=function (ev) {
//            imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
//            preDrawAry.push(imgData);
//            x1 = ev.offsetX;
//            y1 = ev.offsetY;
//            ctx.beginPath();
//            ctx.moveTo(x1,y1);
//            ctx.lineWidth = 2;
//            ctx.strokeStyle = colorF;
//            ctx.lineJoin="round";
//
//        };
//        canvas.onmouseup=function (v) {
//            x2 = v.offsetX;
//            y2 = v.offsetY;
//            wid = x2 - x1;
//            hig = y2 - y1;
//            ctx.lineTo(x2,y1);
//            ctx.lineTo(x2,y2);
//            ctx.lineTo(x1,y2);
//            ctx.lineTo(x1,y1);
//            ctx.stroke();
//        }
//    }

    //矩形
    function rect(){
        Txt.style.display="none";
        word.style.display="none";
        var startPoint = {};
        var isDraw = false;
        function getLocation(e) {
            var bbox = document.getElementById("canvas").getBoundingClientRect();
            return {
                x: e.clientX - bbox.left * (canvas.width/bbox.width),
                y: e.clientY - bbox.top * (canvas.height/bbox.height)
            };
        }
        //绘制矩形方法
        function drawRect(startPoint, endPoint){
            ctx.save();
            ctx.beginPath();
            ctx.strokeRect(startPoint.x, startPoint.y,
                endPoint.x-startPoint.x, endPoint.y-startPoint.y);
            ctx.strokeStyle = colorF;
            ctx.lineWidth = lineWPen;
            ctx.stroke();
            ctx.closePath();
        }
        function saveImageData() {
            imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
            preDrawAry.push(imgData);
        }
        function restoreImageData() {
            ctx.putImageData(imgData, 0, 0);
        }
        canvas.onmousedown = function(e) {
            startPoint = getLocation(e);
            isDraw = true;
            saveImageData();
        };
        canvas.onmousemove = function(e) {
            if(isDraw) {
                restoreImageData();
                drawRect(startPoint, getLocation(e));
            }
        };
        canvas.onmouseup = function(e) {
            isDraw = false;
            ctx.closePath();
        };
    }
    // 文字先写字
    function text(){
        Txt.style.display="block";
        word.style.display="none";
        ctx.font="16px Microsoft Yahei";
        canvas.onmousedown=function (ev) {
            imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
            preDrawAry.push(imgData);
            var v = Txt.value;
//            console.log(v);
            if (v != '') {
                var oldX = ev.offsetX;
                var oldY = ev.offsetY;
                console.log(oldX,oldY);
                ctx.moveTo(oldX,oldY);
                canvas.onmouseup=function (ev) {
                    ctx.fillStyle=colorF;
                    ctx.fillText(v,oldX,oldY);
                    canvasTextAutoLine(v,canvas,oldX,oldY,20);
                    // Txt.value = "";
                    Txt.style.display="none";
                }
            }
        }
    }

    // 文字
    function word1(){
        var canvas = document.getElementById('canvas');
        Txt.style.display="none";
        ctx.font="16px Microsoft Yahei";
        canvas.onmousedown=function () {
            ctx.closePath();
        }
        canvas.onmouseup=function (ev) {
           var inputV= document.getElementById('inputV').value;
           if(inputV == 1){
               document.getElementById('word').focus();
//               console.log(ev.offsetX,ev.offsetY);
               var oldX = ev.offsetX;
               var oldY = ev.offsetY;
               word.style.display="block";
               word.style.left=oldX+'px';
               word.style.top =oldY+'px';
               word.onblur=function () {
                   var v = word.value;
                   if(v != '' && v != ' '){
                       imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
                       preDrawAry.push(imgData);
                       ctx.moveTo(oldX,oldY);
                       ctx.fillStyle=colorF;
                       ctx.fillText(v,oldX,oldY+10);
                       canvasTextAutoLine(v,canvas,oldX,oldY+10,20);
                       inputV ="2";
                       word.value = "";
                   }

               }
           }
       }
   }

    // 文字过长超出换行toDataURL()
    function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){
        var ctx = canvas.getContext("2d");
        var lineWidth = 0;
        var canvasWidth = canvas.width;
        var lastSubStrIndex= 0;
        for(var i=0;i<str.length;i++){
            lineWidth+=ctx.measureText(str[i]).width;
            if(lineWidth>canvasWidth-initX){
                ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY);
                initY+=lineHeight;
                lineWidth=0;
                lastSubStrIndex=i;
            }
            if(i==str.length-1){
                ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);
            }
        }
    }

    // 删除批注
    function restuya(){
        word.style.display="none";
        Txt.style.display="none";
        ctx.clearRect(0,0,canvas.width,canvas.height);  
        window.location.reload();
    };

    // 回退多次
    function back(){
        word.style.display="none";
        Txt.style.display="none";
        if(preDrawAry.length>0) {
            console.log(preDrawAry)
            var popData = preDrawAry.pop();
            ctx.putImageData(popData, 0, 0);
        }
    }

    // 回退一次
    function put(){
         ctx.putImageData(imgData,0,0);
    };

    //保存
    function saveTu(){
        var image = new Image();
        var image = canvas.toDataURL('image/png');    
        console.log(Image);
        document.getElementById('res').innerHTML = '<img src="'+image+'">';  
    }

</script>  
</body>  
</html>
潇潇呀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在canvas中绘制箭头
xiaoshe的专栏
09-04 4620
canvas中没有提供绘制箭头的函数，需要自己手动绘制，幸好箭头并不复杂，简单来说箭头由三条线段组成，如下图所示，线段AB、BC和BD，关键在于在给定端点A和B的坐标情况下，如何计算点C和D的坐标。 这里有两个思路可供参考，如下 思路一，利用线段 首先，在线段AB上确定一个点P，接着经过P点画一条直线与AB垂直，最后在直线P点两端确定C和D点。 确定P点坐标，利用三角形相似得， 计算得P的横坐标xp = xb - (xb-xa)*|BP|/|BA|，同样纵坐标yp = y...
canvas画箭头
上食埃土，下饮黄泉
08-30 1220
原文地址 So what are we trying to accomplish? First we’re going to deal with lines with arrow head. We want: the arrow head can be on the beginning of the line, the end of the line, or both We want to be...
使用Canvas画箭头
weixin_30869099的博客
08-29 197
canvas是HTML5的一个新添加的元素，HTML5 canvas是一个原生HTML绘图薄，用于Javascript代码，不使用第三方工具。 canvas部分方法列表： 方法用途 getContext(contextId) 公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID 是 2d。 height 设置 ca...
Canvas学习：绘制箭头
热门推荐
chelen_jak的专栏
05-29 1万+
原文出处：https://www.w3cplus.com/canvas/drawing-arrow.html （博主有一系列实用Canvas教程)在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法，言外之意，在Canvas中要绘制箭头是需要自己封装函数来处理。那今天的主题就是来看怎么封装绘制箭头的函数。了...
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）
qq_32886245的博客
03-13 1539
canvas绘制基础图形 这两天整理了下项目中用到的函数，学着博客里的方法封装成了一个插件，若有不对的地方，还请不吝赐教，谢谢！ javascript立即执行函数 怎样用原生JS封装自己需要的插件 canvas Two 三角形 Canvas学习：绘制箭头 功能介绍 1.初始化画布 initCanvas 2.绘制网格线 drawGridlines 3.绘制圆点 drawDot 4.绘制圆环...
canvas原生绘图，实现主观题批阅，对错箭头，图形文字等，可撤销可保存
11-21
在这个特定的场景中，我们关注的是如何利用canvas来实现主观题的批阅系统，包括绘制对错箭头、图形文字以及支持可撤销和保存的功能。以下是对这些知识点的详细解释： 1. **Canvas原生绘图**：HTML5中的canvas元素...
canvas绘图，实现主观题批阅，对错箭头，图形文字等，可撤销可保存
02-03
canvas绘图，实现主观题批阅，对错箭头，图形文字等，可撤销可保存
Leaflet.Canvas-Markers-0.2.0
04-22
由于Canvas是在内存中绘制图形，因此可以实现大量的动态标记，且不会对浏览器性能造成太大压力，尤其适用于大数据集的展示。 在0.2.0版本中，这个插件提供了以下主要特性： 1. **高性能**：通过使用Canvas API，...
Canvas-火焰燃烧文字动画特效.zip
07-11
Canvas火焰燃烧文字动画特效</title> <link rel="stylesheet" href="css/style.css?3.1.64"> </head> <body> <canvas id="canvas" width="1024" height="600"></canvas> ...
canvas背景效果-可用于首页，登录页等动态背景
12-17
"canvas背景效果-可用于首页，登录页等动态背景"这个资源提供了一系列使用HTML5 Canvas元素实现的背景效果，适用于首页、登录页面以及其他需要增添动态元素的场景。Canvas是HTML5的一个重要组成部分，它允许开发者在...
【Java AWT 图形界面编程】在 Canvas 画布中绘制箭头图形 ( 数据准备 | 几个关键的计算公式 | 绘制箭头直线和尾翼 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-31 1485
一、在 Canvas 画布中绘制箭头图形 - 要点分析 1、数据准备 2、绘制直线 3、绘制箭头尾翼 二、代码示例
使用canvas实现箭头效果
weixin_33834075的博客
04-26 919
1.这篇为最基础的鼠标点击，移动生成一个随意方向的箭头，日后再把复杂的效果补上； 2.涉及到canvas，面向对象，一些数学角度运算,当然还有jq; 3.content: 首先canvas声明 var canvas=document.getElementById('canvas'); var ctx=canvas.getContent('2d'); 接下来声明draw对象，省略部分取值...
canvas绘图学习: 绘制箭头
最新发布
m0_52912501的博客
03-22 1265
在canvas绘图的过程中有时我们需要绘制箭头，但canvas本身没有绘制箭头的方法，于是就需要我们自己来封装。本文章就介绍一下我是如何封装绘制箭头的方法的。
Javascript利用canvas绘制两点间曲线、箭头等
zhaoyang314的博客
10-24 809
Javascript利用canvas，在两点间绘制曲线，矩形，并且在矩形中绘制文字，实现居中对齐，同时实现了箭头绘制，效果如图: 二、css代码如下： 三、Javascript代码如下 ok，代码就是如此，完整代码如下：
canvas 绘制箭头
weixin_30652879的博客
12-14 111
绘制向右箭头： <head> <meta charset="utf-8"> <title>无标题文档</title> <script type="text/ecmascript"> function draw(){ var canvas=document.getElementById("test"); ...
用Canvas画带箭头的线（包括箭头向内和箭头向外）
tracyXiaoAi的专栏
08-30 3483
利用角度去画箭头，其实箭头也是用线段来画的，主要是要算好箭头的坐标。所以在这里，Math函数起到了至关重要的地位了。
如何用canvas绘制带有箭头的直线
jingtian678的博客
08-13 3621
话不多说，直接上代码~~~ <canvas id="canvasId" width="400" height="400" style="border: 1px solid #ccc;"></canvas> 1 window.onload = function(){ var cavParam = {}; cavParam.canvas = document....
使用canvas画直线箭头
HeMister的博客
11-06 751
HTML <canvas class="CanvasArrow" width="66" height="50"></canvas> JS function createCanvas(obj) { // 使用Canvas 批量绘画的同一形状的图像的方法 var CN= obj.canvasNodes; var CNL= CN.length; var c=document.getElementsByClassNam
基于 canvas的 图片编辑 html5 箭头 文字
09-12
基于 canvas 的图片编辑是一种使用 HTML5 技术的...总的来说，基于 canvas 的图片编辑可以让用户在网页上绘制箭头并添加文字。这个功能可以应用于图片标注、图形设计等各种场景，为用户提供了更多的编辑和创造空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值