canvas提供了一个重要的方法toDataURL()，这个方法能把画布里的图案转变成base64编码格式的png或者其他格式的图片(根据你传入的mine类型的参数)，然后返回 Data URL数据。
html代码
<body>
<canvas id="canvas"/>
<button class="button-balance" id="save">save</button>
<a href="" download="canvas_love.png" id="save_href"/>
<img src="" id="save_img" alt="">
</body>
js代码
var c = document.getElementById('canvas');
function drawLove(canvas) {
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#e992b9';
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
}
drawLove(c)
var btnSave = document.getElementById('save');
btnSave.onclick = function () {
var saveHref = document.getElementById('save_href');
var img = document.getElementById('save_img');
var tempSrc = c.toDataURL('image/png');
console.log(tempSrc);
saveHref.href = tempSrc;
img.src = tempSrc
}
最后的效果展示
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
