1、show 看结果
点击可以下载
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>
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
