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

2015-08-14html教程
397

 

这两天需要用到同事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)后,发现样式就完全一致了。
由此说明:画矩形的时候,如果里面的参数有不是整数的话,容易导致边框问题,所以建议大家取整后再用。

The End

相关推荐

layui根据经纬度在弹出层中显示具体位置
我们要实现在layui根据经纬度在弹出层中显示具体位置,具体要怎么操作呢? 1、首先你需要引入百度地图的js,这个ak我们去百度地图开发者平台申请,一定要申请浏览器版的ak. script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0ak=你的ak...
2024-10-24 html教程
152

layui table筛选列实现记忆功能,刷新不丢失
layui table给前端的table字段很多,一两百个,但是每个人关注的字段不同,有些人会设置这个defaultToolbar中的列字段,但是每次进去页面都得重新设置,很麻烦。 想法是,defaultToolbar的filter这个功能中,用户自定义显示列时保存起来,下次进入页面默认加...
2024-10-21 html教程
119

layui表格渲染templet解析单元格的问题
在解析单元格的时候自定义列为这样: {field: 'tpye', title: '所属类别', align:"center",templet:'#typeBar'} 我们通常这样简单的解析像这样也没什么毛病: script type="text/html" id="typeBar" {{# if(d.tpye == 1){ }} 系统优化 {{# }else if(d.tpye==2...
2024-10-21 html教程
166

html表单标签详细介绍以及实例代码
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1、form标签 定义整体的表单区域 action属性 定义表单数据提交地址 method属性 定义表单提交的方式,一般有get方式和post方式 2、label标签 为表单元素定义文字标注 fo...
2024-10-16 html教程
85

Js正则表达式过滤特殊字符、表情
Js正则表达式过滤特殊字符、表情的实例代码: let ret = "12312ffds#¥@¥#%^***(()))*)).`@%@¥@¥", val = this.customDeviceName;//特殊字符过滤let pattern = new RegExp("[`~!@#$^*()=|{}':;',\\[\\]./?~!@#¥……*()——|{}【】‘;:”“'。,、?]...
2022-10-14 html教程
594

让你的HTML5&CSS3网站在老IE中也能正常显示的3种方法
1、htmlshiv.js Remy开发的HTML5shiv工具能利用JavaScript在老式IE里创建main,header,footer等HTML5元素。也就是说使用JavaScript能创建这些本来不存在的HTML5新元素。这是什么原理?你可能花几天也想不明白,但谁在意呢!这个脚本几乎是所有正式网站必用...
2017-04-15 html教程
586