微信小程序巨头之战_解决canvas画布使用fillRect(

解决canvas画布使用fillRect()时高度出现双倍效果的问题     投稿:jingxian   下面小编就为大家带来一篇解决canvas画布使用fillRect()时高度出现双倍效果的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
window.onload=function(){ var canvas=document.getElementById('canvas').getContext('2d'); canvas.fillRect(50,50,50,50); /script style body{ background: #000; #canvas{ width: 300px; height: 400px; background:#fff; /style /head body canvas id="canvas" span 不支持canvas标签 /span /canvas /body /html

显示情况如下:

该效果与我们预想的不同,此时有两种修改方案:

(1) 在代码js中添加设置宽高属性的代码设置宽度和高度:

canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);

(2) 除去外部css中设置宽高属性的代码,给canvas标签直接添加宽度和高度属性:

 canvas id="canvas" width="300" height="400" 
 span 不支持canvas标签 /span 
 /canvas 

最后显示效果如下:

以上这篇解决canvas画布使用fillRect()时高度出现双倍效果的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


相关阅读