关于使用canvas画图时,图片被拉伸的问题

html-css012

关于使用canvas画图时,图片被拉伸的问题,第1张

如果您觉得我的文章有用,欢迎点赞和关注,也欢迎光临我的个人博客 https://github.com/BokFangcanvas元素可以用来画2D图形,我们通过写js来完成任务。 首先,我们在html文件中写入: 然后在css中给canvas一个背景颜色: 此时浏览器中是这样的: 正如我们所看到的,canvas的默认值是宽300高150。我想把画布变为正方形,所以在css中加入width:300pxheight:300px。接着我们在上面画圆。 却发现圆被拉伸为椭圆了。 canvas是由一张画板和一张画纸铺成的,画板相当于一个容器,我们在画纸上作画。当画纸与画板宽高不相等时,图形就会被拉伸。 1.在html标签中设置canvas属性: 2.在js中设置:

使用双缓冲机制解决白屏。

以下代码实现了双缓冲绘图机制:var container=document.getElementById("container")var realCanvas=document.createElement("canvas")realCanvas.width=container.clientWidth*2realCanvas.height=container.clientHeight*2realCanvas.style.width=container.clientWidth+"px"realCanvas.style.height=container.clientHeight+"px"container.appendChild(realCanvas)var cacheCanvas=document.createElement("canvas")cacheCanvas.width=container.clientWidth*2cacheCanvas.height=container.clientHeight*2var realContext=realCanvas.getContext("2d")var cacheContext=cacheCanvas.getContext("2d")cacheContext.fillRect(0,0,100,100)输入之后之后,一般的图形都不会在出现HTML5-canvas白屏的现象了。