html canvas 画注释框

1、show 看结果

html canvas 画注释框
点击可以下载

2 show me the code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>note rect 注释框</title>
    <style type="text/css">
        #canvas {
            width: 640px;
            height: 360px;
            border: 1px;
            border-color: black;
        }   
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <br />
    <a href="" download="canvas.png" id="save_href">下载</a>
</body>

<script type="text/javascript">
/*
   418511899@qq.com
   qianbo 钱波
*/


    var c=document.getElementById("canvas");
    function drawNoteRect(canvas){
        let ctx = canvas.getContext("2d");
        ctx.fillStyle="#E992B9";
        ctx.fillRect(0,0,150,75);

        ctx.beginPath();                           
        ctx.moveTo(50,50);             
        ctx.lineTo(50,100);             
        ctx.lineTo(75,75);                
        ctx.fill();                            
        ctx.fillStyle = "purple"; 
        ctx.font = "18px bold 黑体";
        ctx.fillText("要写的文字", 30, 50);
    }
    drawNoteRect(c); 
     
    var butSave = document.getElementById("save_href");
    butSave.onclick=function(){
        var tempSrc = canvas.toDataURL("image/png");
        butSave.href=tempSrc; 
    }; 
</script>
</html>
上一篇:关于matplotlib直方图不居中的解决方案


下一篇:力扣75:颜色分类排序