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 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
纯CSS打字动画的实现示例
Aug 05 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
其他功能
2006/10/09 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
PDO::prepare讲解
2019/01/29 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery 使用个人心得
2009/02/26 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
AngularJS语法详解
2015/01/23 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Vue.js实现分页查询功能
2020/11/15 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
python3库numpy数组属性的查看方法
2018/04/17 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python流程控制常用工具详解
2020/02/24 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
python解包用法详解
2021/02/17 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
感恩的演讲稿
2014/05/06 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Vue.Draggable实现交换位置
2022/04/07 Vue.js