首页JS+Canvas绘画&导出图片

JS+Canvas绘画&导出图片

时间: 2023-08-09 09:04:30 浏览: 116

canvas画布导出为图片

toDataURL 这是canvas元素上的API 方法返回一个包含图片展示的 data URI 语法： canvas.toDataURL(type, encoderOptions)； type | 可选图片格式，默认为 image/png encoderOptions | 可选在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。 var canvas = document.getElementById(canvas); var dataURL

JS+Canvas可以用来绘画各种图形并导出为图片。下面是一个简单的例子，展示如何使用Canvas绘制图形并将其导出为PNG图片： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘图并导出为图片</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <button id="export">导出为PNG</button> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 绘制一个红色矩形 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); // 绘制一个蓝色圆形 ctx.beginPath(); ctx.arc(250, 250, 50, 0, 2*Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); // 导出为PNG图片 var exportBtn = document.getElementById('export'); exportBtn.addEventListener('click', function() { var dataURL = canvas.toDataURL('image/png'); var link = document.createElement('a'); link.download = 'canvas.png'; link.href = dataURL; document.body.appendChild(link); link.click(); }); </script> </body> </html> ``` 在这个例子中，我们首先获取了一个Canvas元素，然后使用getContext()方法获取了Canvas的上下文，使用上下文来绘制一个红色矩形和一个蓝色圆形。接着，我们添加了一个按钮，当用户点击该按钮时，我们将Canvas导出为PNG图片并提供下载链接。我们将导出图片的方式设置为dataURL，并将其赋值给一个链接的href属性，然后通过模拟点击链接来下载图片。

阅读全文