Canvas绘制质量/屏幕分辨率性能测试

Canvas quality/resolution performance test

canvas, dpi

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var colours = ['#233D4D', '#FE7F2D', '#FCCA46', '#E4FDE1', '#8ACB88'];

var quality = devicePixelRatio,
    maxQuality = 10;
qualityInput.value = quality;
currentQuality.innerText = quality;
qualityMax.innerText = maxQuality;
qualityInput.max = maxQuality;

function changeQuality() {
    quality = parseFloat(qualityInput.value);
    currentQuality.innerText = quality;
    setSize();
}

function onSetQualityToScreenDPI() {
    qualityInput.value = devicePixelRatio;
    changeQuality();
}
qualityInput.addEventListener('change', changeQuality);
setQualityToScreenDPI.addEventListener('click', onSetQualityToScreenDPI);

var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = 0;
stats.domElement.style.right = 0;
document.body.appendChild(stats.domElement);

function inside(square, point) {
    var left = square.position.scaled()[0],
        top = square.position.scaled()[1],
        right = left + square.size.scaled(),
        bottom = top + square.size.scaled(),
        px = point.scaled()[0],
        py = point.scaled()[1];
    return px > left && px < right && py > top && py < bottom;
}

var canvasNode = document.querySelector('canvas');
var context = canvasNode.getContext('2d');
var width = ScaledValue.create(window.innerWidth),
    height = ScaledValue.create(window.innerHeight);
canvasNode.width = width.scaled();
canvasNode.height = height.scaled();
canvasNode.style.width = width.actual + 'px';
canvasNode.style.height = height.actual + 'px';

var squareSize = ScaledValue.create(50),
    squares = makeGrid(),
    cursor = Point.create(0, 0);

function setCursor(event) {
    cursor = Point.create(event.clientX, event.clientY);
}
window.addEventListener('mousemove', setCursor);

function makeSquare(position) {
    return {
        position: position,
        size: squareSize,
        colour: colours[Math.floor(Math.random() * colours.length)],
        opacity: Math.random() * 0.4 + 0.2
    };
}

function setSize() {
    width = ScaledValue.create(window.innerWidth), height = ScaledValue.create(window.innerHeight);
    canvasNode.width = width.scaled();
    canvasNode.height = height.scaled();
    canvasNode.style.width = width.actual + 'px';
    canvasNode.style.height = height.actual + 'px';
    squares = makeGrid();
}
window.addEventListener('resize', setSize);

function drawSquare(square) {
    context.globalCompositeOperation = "screen";
    context.globalAlpha = square.opacity;
    context.fillStyle = square.colour;
    context.fillRect(square.position.scaled()[0], square.position.scaled()[1], square.size.scaled(), square.size.scaled());
}

function drawSquares() {
    squares.forEach(drawSquare);
}

function clear() {
    context.clearRect(0, 0, width.scaled(), height.scaled());
}

function render() {
    requestAnimationFrame(render);

stats.begin();
    clear();

updateSquares();
    drawSquares();
    stats.end();
}

render();

编译

CSS

HTML

Canvas quality/resolution performance test

canvas, dpi

编辑器支持Emmet

快捷键

Canvas quality/resolution performance test

canvas, dpi

HTML5/Canvas龙图分形自动绘制动画

HTML5 Canvas使用分形算法实现交互式花形图案自动绘制

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：