HTML5 Canvas用火把探险洞穴

cave and torch, canvas绘制的可交互火把火炬动画。

h5, canvas, fire, particle

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function Random(range) {
    return Math.floor((Math.random() * range) + 1);
}

viewport.init();

function Viewport() {
    var me = this;
    me.objects = [];

function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.onresize = function() {
        resizeCanvas();
    }
    var context = document.getElementById("drawing-surface").getContext("2d");
    me.doPaint = true;

function drawBackgroundImage() {
        context.globalAlpha = 1;
        context.fillStyle = 'black';
        context.fillRect(0, 0, canvas.width, canvas.height);
    }

function drawObjects() {
        context.save();
        context.beginPath();
        context.arc(fireBall.x - 20, fireBall.y, 200, 0, 2 * Math.PI);
        context.clip();
        var img = document.getElementById('scream');
        context.drawImage(img, 0, 0, window.innerWidth, window.innerHeight);
        context.beginPath();
        context.arc(fireBall.x - 20, fireBall.y, 200, 0, Math.PI * 2)
        context.strokeStyle = "rgba(0,0,0,.75)"
        context.lineWidth = 20;
        context.stroke();
        context.beginPath();
        context.arc(fireBall.x - 20, fireBall.y, 183, 0, Math.PI * 2)
        context.strokeStyle = "rgba(0,0,0,.5)"
        context.lineWidth = 15;
        context.stroke();
        context.beginPath();
        context.arc(fireBall.x - 20, fireBall.y, 171, 0, Math.PI * 2)
        context.strokeStyle = "rgba(0,0,0,.25)"
        context.lineWidth = 10;
        context.stroke();
        drawTorchHandle();
        for (var i = 0; i < me.objects.length; i++) {
            me.objects[i].paint(context);
        }
        console.log(fireBall.x + ', ' + fireBall.y);
        context.restore();

}
    me.paintInit = function() {
        me.doPaint = true;
    }

function drawTorchHandle() {
    var startX = fireBall.x - 25;
    var startY = fireBall.y + 120;
    context.beginPath();
    context.moveTo(startX, startY);
    context.lineTo(startX, startY - 77);
    context.lineTo(startX - 18, startY - 101);
    context.lineTo(startX + 32, startY - 101);
    context.lineTo(startX + 14, startY - 77);
    context.lineTo(startX + 14, startY);
    context.lineTo(startX, startY);
    context.closePath();
    context.fillStyle = '#472900';
    context.fill();
    context.fillStyle = 'gray';
    context.fillRect(startX - 1, startY - 60, 16, 10);
    context.fillRect(startX - 1, startY - 20, 16, 10);
}

var lastMouse = {
    x: fireBall.x,
    y: fireBall.y
}

canvas.addEventListener('mousemove', function(e) {
    lastMouse = fireBall;
    fireBall.x = e.clientX + 20;
    fireBall.y = e.clientY - 50;
    if (lastMouse.x > fireBall.x) {
        fireBall.wind = (lastMouse.x - fireBall.x + 5);
    } else if (lastMouse.x < fireBall.x) {
        fireBall.wind = -(fireBall.x - lastMouse.x + 5);
    }
});

编译

CSS

HTML

cave and torch, canvas绘制的可交互火把火炬动画。

h5, canvas, fire, particle

编辑器支持Emmet

快捷键

cave and torch, canvas绘制的可交互火把火炬动画。

h5, canvas, fire, particle

HTML5 Canvas可用鼠标拖拉的火把和烟雾动画

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：