html canvas 画注释框

1、show 看结果

点击可以下载

2 show me the code

DOCTYPE html>


    
    note rect 注释框
    
        #canvas {
            width: 640px;
            height: 360px;
            border: 1px;
            border-color: black;
        }   
    


    
    
    下载



/*
   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; 
    };