// 绘制
var canvas = document.getElementById("myCanvas");
canvas.width=document.getElementById('drawLine').offsetWidth
canvas.height=document.getElementById('drawLine').offsetHeight
var drawLine = function(){
// 设置背景透明并清除画布
$('#drawLine').css('background',"transparent")
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
var isDrawing = false;
// 鼠标按下时开始绘制
canvas.addEventListener("mousedown", function(e) {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
});
// 鼠标移动时继续绘制轨迹
canvas.addEventListener("mousemove", function(e) {
if (isDrawing) {
ctx.strokeStyle = 'red'
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
ctx.stroke();
}
});
// 鼠标松开时结束绘制
canvas.addEventListener("mouseup", function() {
ctx.closePath();//结束路径绘制
ctx.stroke();//对路径进行填充
isDrawing = false;
});
}
var exportImg = function(){
var dataURL = canvas.toDataURL("image/png"); // 将canvas转换为data URL
// 创建一个链接元素,并将data URL设置为链接的地址
var link = document.createElement('a');
link.href = dataURL;
link.download = "transparent_image.png"; // 设置导出的图片文件名
document.body.appendChild(link);
console.log(dataURL,'link')
link.click()
document.body.removeChild(link)
// $('#drawLine').css('background',"url("+"./img/transparent_image.png"+") center center no-repeat")
}
canvas绘制并导出图片(画笔)
最新推荐文章于 2024-07-28 18:24:32 发布