无法在html5画布上绘制

我是谁

我创建了Hi dpi画布,然后尝试绘制框,但是出了点问题。为什么我不能在画布上绘画,有人可以帮助我吗?

没有发生错误,绘图功能正在执行,但我没有结果

var HiDPICanvas = function(container_id, color, w, h) {
    /*
    canvas will be placed in the container
    canvas will have width w and height h
    */
    
    var ratio = function() {
        // return pixel ratio
        var ctx = document.createElement("canvas").getContext("2d");
        var dpr = window.devicePixelRatio || 1;
        var bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1;
    
        return dpr / bsr;
    }

    var createHiDPICanvas = function() {
        if (!ratio) { ratio = ratio(); }
        var chart_container = document.getElementById(container_id);
        var can             = document.createElement("canvas");
        can.style.backgroundColor = color
        can.width           = w * ratio;
        can.height          = h * ratio;
        can.style.width     = w + "px";
        can.style.height    = h + "px";
        can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
        chart_container.appendChild(can);
        return can;
    }

    var canvas = createHiDPICanvas()
    return {
        canvas : canvas,
        ctx    : canvas.getContext("2d"),
        width  : w,
        height : h,
        color  : color
    }

}

// cci -> canvas ctx info (dict)
var cci = HiDPICanvas("lifespanChart", "bisque", 780, 640)
var ctx           = cci.ctx
var canvas        = cci.canvas

var Box = function(color) {
    
    var create = function() {
        ctx.save();
        ctx.globalCompositeOperation = "source-over";
        ctx.beginPath();
        ctx.lineWidth = 0.001;
        ctx.fillStyle = color;
        ctx.moveTo(-1, -1);
        ctx.lineTo(50, -1)
        ctx.lineTo(50, 50)
        ctx.lineTo(-1, 50)
        ctx.lineTo(-1, -1)
        console.log("drawing square")
        ctx.stroke();
        ctx.closePath();
        ctx.fill();
        ctx.restore()
    }

    create()
    return {
        refresh : create,
        color   : color
    }
    
}


var borders = Box("red")
<div>
        <div id="lifespanChart"></div>
    </div>

它应该画盒子,但不是,我忘了做什么?

在此处添加了一些文本,因为它不想让我问问题,因为有很多代码,但是我无话可说了

先感谢您

安东

你搞砸了ratio同时是变量和函数...

我将函数名称更改为getRatio并添加了变量。现在可以使用:

var HiDPICanvas = function(container_id, color, w, h) {
    /*
    canvas will be placed in the container
    canvas will have width w and height h
    */
    
    var getRatio = function() {
        // return pixel ratio
        var ctx = document.createElement("canvas").getContext("2d");
        var dpr = window.devicePixelRatio || 1;
        var bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1;
    
        return dpr / bsr;
    }

    var createHiDPICanvas = function() {
        let ratio = getRatio();
        var chart_container = document.getElementById(container_id);
        var can             = document.createElement("canvas");
        can.style.backgroundColor = color
        can.width           = w * ratio;
        can.height          = h * ratio;
        can.style.width     = w + "px";
        can.style.height    = h + "px";
        can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
        chart_container.appendChild(can);
        return can;
    }

    var canvas = createHiDPICanvas()
    return {
        canvas : canvas,
        ctx    : canvas.getContext("2d"),
        width  : w,
        height : h,
        color  : color
    }

}

// cci -> canvas ctx info (dict)
var cci = HiDPICanvas("lifespanChart", "bisque", 780, 640)
var ctx           = cci.ctx
var canvas        = cci.canvas

var Box = function(color) {
    
    var create = function() {
        ctx.save();
        ctx.globalCompositeOperation = "source-over";
        ctx.beginPath();
        ctx.lineWidth = 0.001;
        ctx.fillStyle = color;
        ctx.moveTo(-1, -1);
        ctx.lineTo(50, -1)
        ctx.lineTo(50, 50)
        ctx.lineTo(-1, 50)
        ctx.lineTo(-1, -1)
        console.log("drawing square")
        ctx.stroke();
        ctx.closePath();
        ctx.fill();
        ctx.restore()
    }

    create()
    return {
        refresh : create,
        color   : color
    }
    
}


var borders = Box("red")
<div>
        <div id="lifespanChart"></div>
    </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在HTML5画布上绘制多个圆的问题

来自分类Dev

如何获取在HTML5画布上绘制的图像的X / Y值?

来自分类Dev

RXJS在HTML5画布上绘制线条

来自分类Dev

html5画布上的部分楔形

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

在html5画布上绘制多个粒子元素而无需渲染终止

来自分类Dev

在HTML5画布上绘制1像素线的完整解决方案

来自分类Dev

如何下载HTML5画布上的图像?

来自分类Dev

让用户输入图片网址并将其绘制在html5画布上

来自分类Dev

使用for循环绘制HTML5画布圆

来自分类Dev

在HTML5画布上绘制多个图像有时不起作用

来自分类Dev

实时HTML5画布绘制

来自分类Dev

使用JavaScript在HTML5画布上绘制大量点

来自分类Dev

在HTML5画布上定位

来自分类Dev

HTML5画布图像上的插图阴影

来自分类Dev

重新加载页面后才能绘制HTML5画布(仅在Google Chrome上)

来自分类Dev

html5画布绘制多个图像

来自分类Dev

HTML5画布图案绘制延迟

来自分类Dev

无法在Phonegap中的HTML5画布上绘制图像

来自分类Dev

在背景缩放上绘制HTML5画布

来自分类Dev

在HTML5画布上绘制图像

来自分类Dev

在html5画布上绘制多个粒子元素而无需渲染终止

来自分类Dev

如何在HTML5画布上绘制背景图像

来自分类Dev

使用JavaScript无法绘制到HTML5画布的线条

来自分类Dev

在HTML5画布上绘制/移动/删除笔划

来自分类Dev

连续绘制HTML5画布

来自分类Dev

HTML5画布-绘制环形扇形

来自分类Dev

在HTML5画布上使用CSS样式绘制SVG

来自分类Dev

html5画布部分绘制