我创建了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] 删除。
我来说两句