简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

HTML5 canvas画矩形时出现边框样式不一致的解决方法

来源:易贤网   阅读:1409 次  日期:2014-07-23 14:28:22

温馨提示:易贤网小编为您整理了“HTML5 canvas画矩形时出现边框样式不一致的解决方法”,方便广大网友查阅!

这两天需要用到同事HTML5画图的东东,发现里面画矩形的函数画出来的边框出现了样式不一致的问题,最后我通过一些排除法找到了问题的症结,现分享给大家。

先附上HTML5画矩形的的代码:

代码如下:

canvas id="myCanvas" width="578" height="200"></canvas>

<script>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

context.beginPath();

context.rect(188.0, 50, 200, 100.375);

context.fillStyle = 'white';

context.fill();

context.lineWidth = 1;

context.strokeStyle = 'red';

context.stroke();

</script>

你会发现执行后边框样式不一样,明显底部很细。颜色也略有不同

名单

把context.rect(188.0, 50, 200, 100.375)修改为context.rect(188.0, 50, 200, 100)后,发现样式就完全一致了。

由此说明:画矩形的时候,如果里面的参数有不是整数的话,容易导致边框问题,所以建议大家取整后再用。

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:CSS隐藏文字的6种方法
下一篇:html5 offlline 缓存使用示例
易贤网手机网站地址:HTML5 canvas画矩形时出现边框样式不一致的解决方法
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!