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

2016-02-19 10:15 80 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享HTML5 canvas画矩形时出现边框样式不一致的解决方法,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1593978.html

延伸阅读
标签: Web开发
在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊,我还没摸透,所以要一步步尝试。 canvas里画曲线的难点之一,就在于他连曲线的函数就有4个!分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可...
如: 2000-1-1== 2000-01-01、2000-01-1==2000-01-01、2000-1-01==2000-01-01 以前会写一个function/procedure之类的脚本,大量的IF ELSE。。。 今次无意中发现oracle10g已经支持正则功能,上述问题也就迎刃而解了。。 代码如下: UPDATE LZ__EQ_RHGL LZRH SET LS__SP_GHTIME = SUBSTR(LZ__SP_GHTIME, 1, 5) || '0' || SUBSTR(LZ__SP_GHTIME...
标签: Web开发
HTML 5 canvas 基本语法简述 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。 5 规...
标签: Web开发
canvas是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些canvas的应用示例,我们将会在此教程中看到他们的实现。 canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,...
标签: Web开发
前面的文章我已经讲了3种在canvas中画曲线的方法:arc,arcTo以及quadraticCurveTo.他们都有一个共同点,就是他们画的曲线都只能偏向一边,今天讲的bezierCurveTo与他们最大的不同点就是有两个控制点,即可以画出S形的曲线了。 bezierCurveTo,也就是所谓的贝赛尔曲线了,如果你学过某些画图工具,就能马上理解。 bezierCurveTo的语法如下 :...

经验教程

920

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部