HTML5 Canvas保存为本地图片文件

直接从浏览器下载，带文件名和扩展名。

canvas, image, save

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 6020
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var minRadius = 30;
var bubbleNum = 1;
var depth = 100;

var canvas = document.getElementById('canvastoimage');
var ctx = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

window.addEventListener('resize', function() {
    canvas.width = innerWidth;
    canvas.height = innerHeight;
    generateBubbles();
})

function Bubble() {
    this.gravity = Math.random() * 0.02;
    this.radius = minRadius + Math.random() * 40;
    this.x = this.radius + (Math.random() * (innerWidth - this.radius * 2));
    this.y = this.radius + (Math.random() * (innerHeight - this.radius * 2));
    this.z = Math.random() * depth;
    this.hspeed = 0.5 + (Math.random() * -1);
    this.vspeed = 0.5 + (Math.random() * -1);
}

Bubble.prototype.move = function() {
    if (this.x + this.hspeed < this.radius || this.x + this.hspeed > innerWidth - this.radius) {
        this.hspeed *= -1;
    }
    if (this.y + this.vspeed < this.radius || this.y + this.vspeed > innerHeight - this.radius) {
        this.vspeed *= -1;
    }
    this.x += this.hspeed;
    this.y += this.vspeed;
    this.vspeed += this.gravity;

if (this.x > innerWidth || this.x < 0 || this.y > innerHeight || this.y < 0) {
        this.x = this.radius + (Math.random() * (innerWidth - this.radius * 2));
        this.y = this.radius + (Math.random() * (innerHeight - this.radius * 2));
    }
};

Bubble.prototype.draw = function() {
    var bubble = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
    bubble.addColorStop(0, 'rgba(98, 79, 249, 0.05)');
    bubble.addColorStop(1, 'rgba(98, 79, 249, 0.3)');
    ctx.fillStyle = bubble;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fill();

var glare = ctx.createRadialGradient(this.x, this.y, this.radius * 0.2, this.x, this.y, this.radius * 1.1);
    glare.addColorStop(0, 'rgba(255,255,255,0)');
    glare.addColorStop(1, 'rgba(255,255,255,0.6)');
    ctx.strokeStyle = glare;
    ctx.lineWidth = this.radius * 0.25;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius * 0.66, Math.PI * -0.05, Math.PI * 1.55, true);
    ctx.stroke();
    ctx.lineWidth = this.radius * 0.1;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius * 0.7, Math.PI * 0.65, Math.PI * 0.9, false);
    ctx.stroke();
};

var bubbles = [];

function generateBubbles() {
    for (var i = bubbles.length; i < bubbleNum; i++) {
        bubbles.push(new Bubble());
    }
}

generateBubbles();

function loop() {
    ctx.clearRect(0, 0, innerWidth, innerHeight);
    for (var i = 0; i < bubbles.length; i++) {
        bubbles[i].draw();
        bubbles[i].move();
    }
    requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

function saveAsImage() {
    var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.

//save as download without name and extension
    //window.location.href = image;

var link = document.getElementById('link');
    link.setAttribute('download', 'my.png');
    link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
    link.click();
}

编译

CSS

HTML

直接从浏览器下载，带文件名和扩展名。

canvas, image, save

编辑器支持Emmet

快捷键

直接从浏览器下载，带文件名和扩展名。

canvas, image, save

HTML5 Canvas在线把文本或图像转成3D点云动画

HTML5 Canvas 图片特效 - 3D波动网状纹理映射

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：