無法在 html5 畫布上繪制

Question

我創建了 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>

它應該畫框但它沒有，我忘了做什么？

在這里添加了一些文字，因為它不想讓我問問題，因為代碼很多，但我已經沒有什么可描述的了

先感謝您

Answer 1

你搞砸了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>