首页 > 如何用js动态设置canvas的宽和高。

如何用js动态设置canvas的宽和高。

1、最近在做一个在线试题编辑项目,连线题部分需要用canvas进行画线,canvas的宽和高要根据我的试题编辑情况进行动态设置,我通过js进行动态设置,但是没有起效果,打印出来的宽和高依旧是默认值,求大神指点。
2、代码如下:

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
var canvas_height=$('.connection-div-box').height();
canvas.style.width = "170px";
canvas.style.height = canvas_height;
console.log("宽为:"+canvas.width+"高为:"+canvas.height);

3、打印结果如下:


canvas标签的宽度是这样设置的

<canvas width="300" height="300">

你使用canvas.style.width = "170px";出来的结果是这样的

<canvas style="width:170px;">

Canvas 要直接设置 attributes 的 width 和 height.


var canvas=document.getElementById('canvas');
canvas.width=500;
canvas.height=500;

如此即可,它会让画布内容清空,即使当前尺寸和你设置的尺寸完全相同。


谢谢大家,问题解决了 canvas的宽和高要通过设置属性值来改变,

var canvas_height=parseInt($('.connection-li-left').length*37-10);
console.log('canvas_height高为:'+canvas_height);
canvas.setAttribute('width',170);
canvas.setAttribute('height',canvas_height);

并且宽和高的设置每次重新设置,都会重置canvas画布。


我也觉得楼上的对,canvas.width而不是canvas.style.width

【热门文章】
【热门文章】