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


Posted in HTML / CSS onOctober 14, 2013

这两天需要用到同事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>


你会发现执行后边框样式不一样,明显底部很细。颜色也略有不同
HTML5 canvas画矩形时出现边框样式不一致的解决方法
把context.rect(188.0, 50, 200, 100.375)修改为context.rect(188.0, 50, 200, 100)后,发现样式就完全一致了。
由此说明:画矩形的时候,如果里面的参数有不是整数的话,容易导致边框问题,所以建议大家取整后再用。
HTML / CSS 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 #HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 #HTML / CSS
html5 利用canvas实现超级玛丽简单动画
Sep 06 #HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 #HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 #HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 #HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
You might like
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
javascript 变量作用域 代码分析
2009/06/26 Javascript
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python实现的几个常用排序算法实例
2014/06/16 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
python requests post多层字典的方法
2018/12/27 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Puma印度官网:德国运动品牌
2019/10/06 全球购物
数据库面试要点基本概念
2013/10/31 面试题
开会迟到检讨书
2014/01/08 职场文书
考博专家推荐信
2014/05/10 职场文书
工商管理自荐书
2014/07/06 职场文书
教师工作表现评语
2014/12/31 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
win7配置本地ftp服务器的图文教程
2022/08/05 Servers